1. 首頁
  2. 問答
  3. jQuery的幻燈片 - 圖片在Firefox

jQuery的幻燈片 - 圖片在Firefox

2013-09-01 84 views
0
不顯示

我使用Camera slideshow，一切都OK在Chrome和Internet Explorer，但在Firefox中的圖像不顯示jQuery的幻燈片 - 圖片在Firefox

我怎樣才能改變這種代碼，以便在圖像顯示？

HTML：

<div class="camera_wrap pattern_4 camera_emboss" id="camera_wrap_4"> 
        <div data-src="Content/Images/demo/slide1.jpg"> 
         <div class="camera_caption fadeFromTop"> 
          <h1>MultiPurpose Responsive Template</h1> 
          <span>Professional & modern website template created for you and your business prosperity. Build a top-notch business website in no time! </span> 
         </div> 
        </div> 
        <div data-src="Content/Images/demo/slide2.jpg"> 
         <div class="camera_caption fadeFromRight"> 
          <h1>Professional Design & Elegant Code</h1> 
          <span>Beautiful behind the scenes too! Biscaya Template comes with top notch customer support to help you get your business online fast. </span> 
         </div> 
        </div> 
       </div>

CSS：

/************************** 
* 
* GENERAL 
* 
**************************/ 
.camera_wrap a, .camera_wrap img, 
.camera_wrap ol, .camera_wrap ul, .camera_wrap li, 
.camera_wrap table, .camera_wrap tbody, .camera_wrap tfoot, .camera_wrap thead, .camera_wrap tr, .camera_wrap th, .camera_wrap td 
.camera_thumbs_wrap a, .camera_thumbs_wrap img, 
.camera_thumbs_wrap ol, .camera_thumbs_wrap ul, .camera_thumbs_wrap li, 
.camera_thumbs_wrap table, .camera_thumbs_wrap tbody, .camera_thumbs_wrap tfoot, .camera_thumbs_wrap thead, .camera_thumbs_wrap tr, .camera_thumbs_wrap th, .camera_thumbs_wrap td { 
    background: none; 
    border: 0; 
    font: inherit; 
    font-size: 100%; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; 
    list-style: none 
} 
.camera_wrap { 
    display: none; 
    float: left; 
    position: relative; 
    z-index: 0; 
} 
.camera_wrap img { 
    max-width: none!important; 
} 
.camera_fakehover { 
    height: 100%; 
    min-height: 500px; 
    position: relative; 
    width: 100%; 
    z-index: 1; 
    margin-bottom:25px; 
} 
.camera_wrap { 
    width: 100%; 
} 
.camera_src { 
    display: none; 
} 
.cameraCont, .cameraContents { 
    height: 100%; 
    position: relative; 
    width: 100%; 
    z-index: 1; 
} 
.cameraSlide { 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 100%; 
} 
.cameraContent { 
    bottom: 0; 
    display: none; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 100%; 
} 
.camera_target { 
    bottom: 0; 
    height: 100%; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    right: 0; 
    text-align: left; 
    top: 0; 
    width: 100%; 
    z-index: 0; 
} 
.camera_overlayer { 
    bottom: 0; 
    height: 100%; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 100%; 
    z-index: 0; 
} 
.camera_target_content { 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 2; 
} 
.camera_target_content .camera_link { 
    background: url(Images/blank.gif); 
    display: block; 
    height: 100%; 
    text-decoration: none; 
} 
.camera_loader { 
    background: #fff url(Images/camera-loader.gif) no-repeat center; 
    background: rgba(255, 255, 255, 0.9) url(Images/camera-loader.gif) no-repeat center; 
    border: 1px solid #ffffff; 
    -webkit-border-radius: 18px; 
    -moz-border-radius: 18px; 
    border-radius: 18px; 
    height: 36px; 
    left: 50%; 
    overflow: hidden; 
    position: absolute; 
    margin: -18px 0 0 -18px; 
    top: 50%; 
    width: 36px; 
    z-index: 3; 
} 
.camera_bar { 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 3; 
} 
.camera_thumbs_wrap.camera_left .camera_bar, .camera_thumbs_wrap.camera_right .camera_bar { 
    height: 100%; 
    position: absolute; 
    width: auto; 
} 
.camera_thumbs_wrap.camera_bottom .camera_bar, .camera_thumbs_wrap.camera_top .camera_bar { 
    height: auto; 
    position: absolute; 
    width: 100%; 
} 
.camera_nav_cont { 
    height: 65px; 
    overflow: hidden; 
    position: absolute; 
    right: 9px; 
    top: 15px; 
    width: 120px; 
    z-index: 4; 
} 
.camera_caption { 
    bottom: 0; 
    display: block; 
    position: absolute; 
    width: 100%; 
} 
.camera_caption > div { 
    padding: 10px 20px; 
} 
.camerarelative { 
    overflow: hidden; 
    position: relative; 
} 
.imgFake { 
    cursor: pointer; 
} 
.camera_prevThumbs { 
    bottom: 4px; 
    cursor: pointer; 
    left: 0; 
    position: absolute; 
    top: 4px; 
    visibility: hidden; 
    width: 30px; 
    z-index: 10; 
} 
.camera_prevThumbs div { 
    background: url(Images/camera_skins.png) no-repeat -160px 0; 
    display: block; 
    height: 40px; 
    margin-top: -20px; 
    position: absolute; 
    top: 50%; 
    width: 30px; 
} 
.camera_nextThumbs { 
    bottom: 4px; 
    cursor: pointer; 
    position: absolute; 
    right: 0; 
    top: 4px; 
    visibility: hidden; 
    width: 30px; 
    z-index: 10; 
} 
.camera_nextThumbs div { 
    background: url(Images/camera_skins.png) no-repeat -190px 0; 
    display: block; 
    height: 40px; 
    margin-top: -20px; 
    position: absolute; 
    top: 50%; 
    width: 30px; 
} 
.camera_command_wrap .hideNav { 
    display: none; 
} 
.camera_command_wrap { 
    left: 0; 
    position: relative; 
    right:0; 
    z-index: 4; 
} 
.camera_wrap .camera_pag .camera_pag_ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    text-align: right; 
} 
.camera_wrap .camera_pag .camera_pag_ul li { 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    cursor: pointer; 
    display: inline-block; 
    height: 16px; 
    margin: 20px 5px; 
    position: relative; 
    text-align: left; 
    text-indent: -9999px; 
    width: 16px; 
} 
.camera_commands_emboss .camera_pag .camera_pag_ul li { 
    -moz-box-shadow: 
     0px 1px 0px rgba(255,255,255,1), 
     inset 0px 1px 1px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 
     0px 1px 0px rgba(255,255,255,1), 
     inset 0px 1px 1px rgba(0,0,0,0.2); 
    box-shadow: 
     0px 1px 0px rgba(255,255,255,1), 
     inset 0px 1px 1px rgba(0,0,0,0.2); 
} 
.camera_wrap .camera_pag .camera_pag_ul li > span { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    height: 8px; 
    left: 4px; 
    overflow: hidden; 
    position: absolute; 
    top: 4px; 
    width: 8px; 
} 
.camera_commands_emboss .camera_pag .camera_pag_ul li:hover > span { 
    -moz-box-shadow: 
     0px 1px 0px rgba(255,255,255,1), 
     inset 0px 1px 1px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 
     0px 1px 0px rgba(255,255,255,1), 
     inset 0px 1px 1px rgba(0,0,0,0.2); 
    box-shadow: 
     0px 1px 0px rgba(255,255,255,1), 
     inset 0px 1px 1px rgba(0,0,0,0.2); 
} 
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span { 
    -moz-box-shadow: 0; 
    -webkit-box-shadow: 0; 
    box-shadow: 0; 
} 
.camera_pag_ul li img { 
    display: none; 
    position: absolute; 
} 
.camera_pag_ul .thumb_arrow { 
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent; 
    border-top: 4px solid; 
    top: 0; 
    left: 50%; 
    margin-left: -4px; 
    position: absolute; 
} 
.camera_prev, .camera_next, .camera_commands { 
    cursor: pointer; 
    height: 40px; 
    margin-top: -20px; 
    position: absolute; 
    top: 50%; 
    width: 40px; 
    z-index: 2; 
} 
.camera_prev { 
    left: 0; 
} 
.camera_prev > span { 
    background: url(Images/camera_skins.png) no-repeat 0 0; 
    display: block; 
    height: 40px; 
    width: 40px; 
} 
.camera_next { 
    right: 0; 
} 
.camera_next > span { 
    background: url(Images/camera_skins.png) no-repeat -40px 0; 
    display: block; 
    height: 40px; 
    width: 40px; 
} 
.camera_commands { 
    right: 41px; 
} 
.camera_commands > .camera_play { 
    background: url(Images/camera_skins.png) no-repeat -80px 0; 
    height: 40px; 
    width: 40px; 
} 
.camera_commands > .camera_stop { 
    background: url(Images/camera_skins.png) no-repeat -120px 0; 
    display: block; 
    height: 40px; 
    width: 40px; 
} 
.camera_wrap .camera_pag .camera_pag_ul li { 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    cursor: pointer; 
    display: inline-block; 
    height: 16px; 
    margin: 20px 5px; 
    position: relative; 
    text-indent: -9999px; 
    width: 16px; 
} 
.camera_thumbs_cont { 
    -webkit-border-bottom-right-radius: 4px; 
    -webkit-border-bottom-left-radius: 4px; 
    -moz-border-radius-bottomright: 4px; 
    -moz-border-radius-bottomleft: 4px; 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
} 
.camera_commands_emboss .camera_thumbs_cont { 
    -moz-box-shadow: 
     0px 1px 0px rgba(255,255,255,1), 
     inset 0px 1px 1px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 
     0px 1px 0px rgba(255,255,255,1), 
     inset 0px 1px 1px rgba(0,0,0,0.2); 
    box-shadow: 
     0px 1px 0px rgba(255,255,255,1), 
     inset 0px 1px 1px rgba(0,0,0,0.2); 
} 
.camera_thumbs_cont > div { 
    float: left; 
    width: 100%; 
} 
.camera_thumbs_cont ul { 
    overflow: hidden; 
    padding: 3px 4px 8px; 
    position: relative; 
    text-align: center; 
} 
.camera_thumbs_cont ul li { 
    display: inline; 
    padding: 0 4px; 
} 
.camera_thumbs_cont ul li > img { 
    border: 1px solid; 
    cursor: pointer; 
    margin-top: 5px; 
    vertical-align:bottom; 
} 
.camera_clear { 
    display: block; 
    clear: both; 
} 
.showIt { 
    display: none; 
} 
.camera_clear { 
    clear: both; 
    display: block; 
    height: 1px; 
    margin: -1px 0 25px; 
    position: relative; 
} 
/************************** 
* 
* COLORS & SKINS 
* 
**************************/ 
/*BROWN SKIN*/ 
.camera_brown_skin .camera_prevThumbs div { 
    background-position: -160px -320px; 
} 
.camera_brown_skin .camera_nextThumbs div { 
    background-position: -190px -320px; 
} 
.camera_brown_skin .camera_prev > span { 
    background-position: 0 -320px; 
} 
.camera_brown_skin .camera_next > span { 
    background-position: -40px -320px; 
} 
.camera_brown_skin .camera_commands > .camera_play { 
    background-position: -80px -320px; 
} 
.camera_brown_skin .camera_commands > .camera_stop { 
    background-position: -120px -320px; 
} 







.cameraContents .camera_caption h1 { 
background: #222; 
display: block; 
color: #ffffff; 
font-size: 21px; 
text-align: center; 
line-height: 1.4; 
padding: 10px; 

} 

.cameraContents .camera_caption span { 
background: #e7402f; 
color: #fff; 
display: block; 
line-height: 24px; 
padding: 17px 20px 15px 20px; 
font-size: 14px; 
} 

.cameraContents .camera_caption div { 
background: none; 
margin-top:-70%; 
} 
.camera_caption{ 
left: 5%; 
width:45%; 
display:inline; 
}

JS：

$(function() { 
      $('#camera_wrap_4').camera({ 
       height: 'auto', 
       loader: 'bar', 
       pagination: false, 
       thumbnails: false, 
       hover: false, 
       opacityOnGrid: false 
      }); 
     });

來源

2013-09-01 Sirwan Afifi

+0

該鏈接中的圖像在Firefox中顯示正常！？ – 2013-09-01 14:44:09

回答

1

嘗試使用螢火蟲調試JS內的任何給定的CSS。以當前的圖像風格玩。

來源

2013-09-01 14:09:18 PiotrC

相關問題

 相關問題