Schieberegler für Bildminiaturansichten

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  id="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);} 

Die Bilder :

    

Der Schieberegler hat dazu nicht funktioniert. Es zeigt mir nur ein Bild, aber wenn ich die Bilder ( ) in die single-photos.php , funktioniert der Slider. Was mache ich falsch?

Aktualisieren / bearbeiten: Ich verwende eine andere Methode, ohne Thumbnails.Aber, wieso zeigt mir nur das selbe Bild im Slider? Ich habe 5.

header.php

  $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); });  

script: easySlider1.7.js

single-photos.php

 

style.css

 #slider { margin-left:85px; position:relative; text-align:left; width:533px; background:#fff; margin-bottom:2em; } #slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0; padding:0; list-style:none; } #slider2{margin-top:1em;} #slider li, #slider2 li{ width:533px; height:400px; overflow:hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev{ display:block; width:30px; height:77px; position: relative; left:-40px; bottom:471px; z-index:1000; } #nextBtn, #slider1next{ left: 596px; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a{ display:block; position:relative; width:30px; height:77px; background:url(../images/btn_prev.gif) no-repeat 0 0; } #nextBtn a, #slider1next a{ background:url(../images/btn_next.gif) no-repeat 0 0; } /* numeric controls */ ul#controls{ margin:1em 0; padding:0; height:28px; } ul#controls li{ margin:0 10px 0 0; padding:0; float:left; list-style:none; height:28px; line-height:28px; } ul#controls li a{ float:left; height:28px; line-height:28px; border:1px solid #ccc; background:#DAF3F8; color:#555; padding:0 10px; text-decoration:none; } ul#controls li.current a{ background:#5DC9E1; color:#fff; } ul#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;} 

Solutions Collecting From Web of "Schieberegler für Bildminiaturansichten"