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?
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