Jquery幻灯片/改变标题&现在我的幻灯片中没有出现图像/缩略图仍然可见

时间:2014-02-04 18:17:32

标签: javascript jquery css slideshow

我在我的网站上插入了幻灯片。我能够将CSS position完全放在我想要的位置。它工作得很好。但是,当我在每个图像中输入我的源代码并更改了“标题”(每张照片都有一个小标题)时,照片停止显示。他们出现了,直到我改变了每张照片的标题。除了标题,我没有改变任何东西。

我的错误可能是哪些建议?

以下是我的图片列表:

<style type="text/css"> #mhgallery img { display:none; } </style>

<div id="mhgallery"><img src="family gallery/images/3kids.jpg" title="All Dressed Up!" /><img src="family gallery/images/boysnguns.jpg" title="Laser Tag" />
<img src="family gallery/images/boyswisconsindells.jpg" title="This was taken on our last Wisconsin Dells Trip" />
<img src="family gallery/images/carridewithkids.jpg" title="Typical Car Ride For Us" />
<img src="family gallery/images/grandmaandcharlie.jpg" title="Grandma and puppy Charlie" />
<img src="family gallery/images/Jacobandjuliasleeping.jpg" title="Two Peas in a Pod" />
<img src="family gallery/images/jacobandmomfaceshot.jpg" title="Jacob with Mom Never a Dull Moment" />
<img src="family gallery/images/jacobcakeface.jpg" title="Silly Jacob" />
<img src="family gallery/images/jacobchurch.jpg" title="Jacob" />
<img src="family gallery/images/jacobfootball.jpg" title="Jacob Football" />
<img src="family gallery/images/Jacobindesk.jpg" title="Jacob in an Old Fashioned Desk at a Museum" />
<img src="family gallery/images/JacobsFace.jpg" title="Jacobs" />
<img src="family gallery/images/jamesandjenahalloween.jpg" title="James & Jen joining in the Halloween Fun" />
<img src="family gallery/images/jamesandjencamping.jpg" title="Camping!!!!" />
<img src="family gallery/images/jameswithhisfish.jpg" title="James in his Glory" />
<img src="family gallery/images/jonathancakeface.jpg" title="Happy 1st Birthday Jonathan!" />
<img src="family gallery/images/jonathanface.jpg" title="Jonathan" />
<img src="family gallery/images/jonathaninahat.jpg" title="Love the Hat! Thanks Auntie Tanya!" />
<img src="family gallery/images/jonathantoys.jpg" title="Love my Toys" />
<img src="family gallery/images/jonthanonawalk.jpg" title="Jonathan Out for a Stroll" />
<img src="family gallery/images/juliaandjacobswing.jpg" title="Jacob and Julia Playing" />
<img src="family gallery/images/juliaartist.jpg" title="Our little artist" />
<img src="family gallery/images/juliagoeyhands.jpg" title="Gooey Fun!!" />
<img src="family gallery/images/juliainaturtle.jpg" title="Riding a Turtle is so Fun!" />
<img src="family gallery/images/juliamuddy.jpg" title="Tom-Boy" />
<img src="family gallery/images/julianna.slide.jpg" title="Look at the Fun!" />
<img src="family gallery/images/Juliannaanddaddybutterflyball.jpg" title="Butterfly Ball 2013" />
<img src="family gallery/images/juliannaplayground.jpg" title="More Camping Adventures" />
<img src="family gallery/images/juliaonthedock.jpg" title="Camping" />
<img src="family gallery/images/juliashoppingforhaloween.jpg" title="Shopping for Halloween" />
<img src="family gallery/images/juliaslide.jpg" title="Julianna Sliding" />
<img src="family gallery/images/justinboredface.jpg" title="Justin...bored.." />
<img src="family gallery/images/justinhelpingjonathan.jpg" title="Justin is a big help!" />
<img src="family gallery/images/Justininahat.jpg" title="Justin" />
<img src="family gallery/images/justinrollercoaster.jpg" title="Justin" />
<img src="family gallery/images/Justinsprofile.jpg" title="Justin" />
<img src="family gallery/images/kidsatchuckeecheese.jpg" title="Chuckee Cheese Fun" />
<img src="family gallery/images/kidsatdq.jpg" title="Local Dairy Queen Treat" />
</div>

这是我的 CSS

.mhSlideshow {
position: relative;
display: inline-block;
margin-top: 20;
margin-bottom: 0;
margin-left: 200px;
}
.fullscreen {
position:fixed;
display:block;
top:0px;
left:0px;
z-index:10000;
margin:0 auto;
}
.mhSlideshowBg {
display:block;
position:absolute;
top:0px;
left:0px;
z-index:10;
}
.mhSlideshow img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.slideContainer, .navArrowWrap {
position: relative;
display: block;
z-index: 100;
overflow: hidden;
visibility: hidden;
}
.bgWrap, .slide {
display:block;
position:absolute;
z-index:200;
height:100%;
}
.slice {
display:block;
position:absolute;
z-index:200;
height:100%;
}
.captionBar {
position:absolute;
left:0px;
z-index:400;
}
.caption {
margin:0 auto;
}
.caption a {
display:inline !important;
}
.navArrows a {
position:absolute;
display:block;
width:32px;
height:32px;
border:0;
top:40%;
z-index:300;
cursor:pointer;
}
.thumbBar {
position:absolute;
left:0px;
z-index:600;
display:block;
}
.thumbLeftArrow, .thumbRightArrow, .thumbPause, .thumbPlay, .thumbFullscreen{
position:absolute;
display:block;
width:30px;
height:30px;
border:0;
cursor:pointer;
}
.thumbLeftArrow {
left:0px;
}
.thum

JS

$(document).ready(function(){
    $("#mhgallery").mhgallery({
        width:600,
        height:300,
        scaleMode:'scaleToFit',
        firstSlide:0,
        randomPlay:false,
        autoPlay:true,
        backgroundMode:'transparent',
        backgroundColor:'#333333',
        showShadow:true,
        showThumbShadow:true,
        showPause:true,
        showBorder:true,
        borderSize:6,
        borderColor:'#5E220F',
        showFullscreen:true,
        fullscreenBackgroundColor:'#333333',
        fullscreenThumbArrowStyle:'white',
        interval:3000,
        effectSpeed:500,
        showCaption:true,
        textCSS:'.title {font-size:12px;font-weight:bold;font-family:Arial;color:#ffffff;line-height:200%;} .alt {font-size:12px;font-family:Arial;color:#ffffff;}',
        captionPosition:'bottom',
        captionBarColor:'#333333',
        captionBarOpacity:0.8,
        captionBarPadding:8,
        captionAlign:'center',
        showNavArrows:true,
        autoHideNavArrows:true,
        arrowStyle:'white',
        showThumbs:true,
        thumbSize:40,
        thumbGap:8,
        thumbBottom:-60,
        thumbArrowStyle:'black',
        thumbOpacity:0.8,
        thumbBorderWidth:1,
        thumbBorderColor:'#FFFFFF',
        thumbBorderActiveColor:'#FFFFFF',
        effect:'fade,slideLeft,slideRight,slideTop,slideBottom',
        jsFolder:'js'
    });
});

0 个答案:

没有答案