Sunday, 26 May 2013

Image thubnails slider

Image thubnails slider

js-image-slider.js
var sliderOptions=
{
    sliderId: "slider",
    effect: "13,17,13,13,5",
    effectRandom: true,
    pauseTime: 2600,
    transitionTime: 500,
    slices: 12,
    boxes: 9,
    hoverPause: 1,
    autoAdvance: true,
    captionOpacity: 1,
    captionEffect: "fade",
    thumbnailsWrapperId: "thumbs",
    m: false,
    license: "mylicense"
};

var imageSlider=new mcImgSlider(sliderOptions);
.......
single-photos.php
<div <?php post_class() ?> id="post-<?php the_ID(); ?>=">
<div id="sliderFrame">
        <div id="slider">
              <?php the_content (); ?>
    </div>         
        <!--thumbnails-->
        <div id="thumbs">
            <div class="thumb"></div>
        </div>
    </div>
</div>   <!-- post -->
slider.css
#sliderFrame
{
    width:680px;
    margin:20px auto;
    padding:20px;
    background:#fafafa;
    border:1px solid #666;
    border-radius:1px;
}

#slider {
    width:533px;height:400px;
    background:black url(loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;
}
#slider img {
    position:absolute;
    border:none;
    visibility:hidden;
}

#slider a.imgLink {
    z-index:2;
    display:none;position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}

div.navBulletsWrapper  {
    display:none;
}

#thumbs
{
    margin-top:50px;
    text-align:center;
    font-size:0;
}
#thumbs .thumb
{
    display:inline-block;
    *display:inline;zoom:1;
    margin:0 1px;
    border:1px solid #333;
    padding:4px;
    background:black;
}

#thumbs .thumb img{border:1px solid #555; cursor:pointer; width:70px; height:44px; opacity:0.5;filter:alpha(opacity:50);}
#thumbs .thumb img{ opacity:0.6;filter:alpha(opacity:60); } #thumbs .thumb-on img{ opacity:1;filter:alpha(opacity:100);}
#thumbs .thumb-on img{border:1px solid #999; opacity:1;filter:alpha(opacity:100);}
The images :
<img class="alignnone size-large wp-image-1370" title="imagesample1" src="imagesample1.jpg" alt="" width="533" height="400" />
<img class="alignnone size-large wp-image-1369" title="imagesample2" src="imagesample2.jpg" alt="" width="533" height="400" />
<img class="alignnone size-large wp-image-1368" title="imagesample3" src="imagesample3.jpg" alt="" width="533" height="400" />
For this, the slider didn't work. It's show me only one image, but when i put the images (<img class="alignnone />) into the single-photos.php, the slider works. What i am doing wrong?

No comments:

Post a Comment