Ein paar Probleme bezüglich JSSOR Schieberegler
Ich habe die JSSOR Schieberegler FULLPACK und beschlossen, diese Galerie: http://www.jssor.com/demos/image-gallery.html
Steckte ich diese in meine Seite das gleiche, wie gezeigt wurde, in der Quelle. Aber keine thumbnails oder die Navigationspfeile zeigen.
Ich dann verändert die Dimensionen des aktuellen Bildes angezeigt, 306x306, da dies die Größe der Bilder, die ich verwenden werden, und geändert thumbnail-Größe 64x64 wie diesem ist die Größe meiner Vorschaubilder.
Die wichtigsten Bilder der Diashow funktionieren, aber die thumbnails sind Teil des Haupt-slideshow und nicht unter dem Hauptbild. Auch noch keine nav-Pfeile zeigen.
Hier sind 2 Bilder, die Ihnen zeigen:
http://www.imagebam.com/image/baa18d322946581
http://www.imagebam.com/image/48d327322946583
Ich kenne die Pfeile nicht zeigen, weil Sie auf Standard-Werte:
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 8px;">
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">Ich bin nicht sicher, welche Werte ich brauche hier aber.
Hier ist der vollständige code für die slideshow in meine html-Datei:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 306px; height: 372px; background: #191919; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../imag/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 306px; height: 306px; overflow: hidden;">
<div>
<img u="image" src="../images/dundee1.jpg" />
<img u="thumb" src="../images/thumbs/dundee1_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee3.jpg" />
<img u="thumb" src="../images/thumbs/dundee3_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee12.jpg" />
<img u="thumb" src="../images/thumbs/dundee12_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee16.jpg" />
<img u="thumb" src="../images/thumbs/dundee16_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee17.jpg" />
<img u="thumb" src="../images/thumbs/dundee17_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee18.jpg" />
<img u="thumb" src="../images/thumbs/dundee18_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee19.jpg" />
<img u="thumb" src="../images/thumbs/dundee19_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee25.jpg" />
<img u="thumb" src="../images/thumbs/dundee25_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee26.jpg" />
<img u="thumb" src="../images/thumbs/dundee26_thumb.jpg" />
</div>
<div>
<img u="image" src="../images/dundee27.jpg" />
<img u="thumb" src="../images/thumbs/dundee27_thumb.jpg" />
</div>
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05ldn (mousedown)
.jssora05rdn (mousedown)
*/
.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(../images/a17.png) no-repeat;
overflow:hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05ldn { background-position: -250px -40px; }
.jssora05rdn { background-position: -310px -40px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
<!-- Thumbnail Navigator Skin Begin -->
<div u="thumbnavigator" class="jssort01" style="position: absolute; width: 306px; height: 64px; left:0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<style>
/* jssor slider thumbnail navigator skin 01 css */
/*
.jssort01 .p (normal)
.jssort01 .p:hover (normal mouseover)
.jssort01 .pav (active)
.jssort01 .pav:hover (active mouseover)
.jssort01 .pdn (mousedown)
*/
.jssort01 .w {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.jssort01 .c {
position: absolute;
top: 0px;
left: 0px;
width: 64px;
height: 64px;
border: #000 2px solid;
}
.jssort01 .p:hover .c, .jssort01 .pav:hover .c, .jssort01 .pav .c {
background: url(../images/t01.png) center center;
border-width: 0px;
top: 2px;
left: 2px;
width: 64px;
height: 64px;
}
.jssort01 .p:hover .c, .jssort01 .pav:hover .c {
top: 0px;
left: 0px;
width: 66px;
height: 66px;
border: #fff 1px solid;
}
</style>
<div u="slides" style="cursor: move;">
<div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;">
<div class=w><thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div>
<div class=c>
</div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Thumbnail Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">CE0832a jQuery Slider</a>
</div>
<!-- Jssor Slider End -->
<img width=0 height=0 />
<!--<div id="debuginfo" style="width:300px;height:300px;background-color:Red;color:White;Padding:5px;"></div>--> Und hier ist der script-code:
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [
//Fade in L
{$Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade out R
, { $Duration: 1200, $SlideOut: true, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade in R
, { $Duration: 1200, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 2, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade out L
, { $Duration: 1200, $SlideOut: true, $FlyDirection: 1, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade in T
, { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out B
, { $Duration: 1200, $SlideOut: true, $FlyDirection: 8, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade in B
, { $Duration: 1200, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 8, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out T
, { $Duration: 1200, $SlideOut: true, $FlyDirection: 4, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade in LR
, { $Duration: 1200, $Cols: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade out LR
, { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 1, $ChessMode: { $Column: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade in TB
, { $Duration: 1200, $Rows: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out TB
, { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 4, $ChessMode: { $Row: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade in LR Chess
, { $Duration: 1200, $Cols: 2, $During: { $Top: [0.3, 0.7] }, $FlyDirection: 4, $ChessMode: { $Column: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out LR Chess
, { $Duration: 1200, $Cols: 2, $SlideOut: true, $FlyDirection: 8, $ChessMode: { $Column: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade in TB Chess
, { $Duration: 1200, $Rows: 2, $During: { $Left: [0.3, 0.7] }, $FlyDirection: 1, $ChessMode: { $Row: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade out TB Chess
, { $Duration: 1200, $Rows: 2, $SlideOut: true, $FlyDirection: 2, $ChessMode: { $Row: 3 }, $Easing: { $Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $Opacity: 2 }
//Fade in Corners
, { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade out Corners
, { $Duration: 1200, $Cols: 2, $Rows: 2, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $FlyDirection: 5, $ChessMode: { $Column: 3, $Row: 12 }, $Easing: { $Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Opacity: 2 }
//Fade Clip in H
, { $Duration: 1200, $Delay: 20, $Clip: 3, $Assembly: 260, $Easing: { $Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
//Fade Clip out H
, { $Duration: 1200, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
//Fade Clip in V
, { $Duration: 1200, $Delay: 20, $Clip: 12, $Assembly: 260, $Easing: { $Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
//Fade Clip out V
, { $Duration: 1200, $Delay: 20, $Clip: 12, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }
];
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 3, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideDuration: 800, //Specifies default duration (swipe) for slide in milliseconds
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
},
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 1 //[Required] 0 Never, 1 Mouse Over, 2 Always
},
$ThumbnailNavigatorOptions: { //[Optional] Options to specify and enable thumbnail navigator or not
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
$SpacingX: 8, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$Cols: 10, //[Optional] Number of pieces to display, default value is 1
$Align: 360 //[Optional] The offset position to park thumbnail
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 306), 306));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
}); Haben nun diese Probleme:
-
Den schwarzen Rahmen um die Miniaturansichten ausschalten .....
http://www.imagebam.com/image/cd9d52323141060 -
Die Diashow ist ganz Links auf der Seite ... ich muss es zentriert aber keine der Methoden, die ich versuchen, die Arbeit.
-
Ich habe schon ein paar Bilder in der Diashow, kann aber nicht sehen, alle anderen thumbnails als im obigen Bild gezeigten ... ich kann ziehen Sie die miniaturen nach Links oder rechts. Es rastet nur zurück zu den Miniaturansichten im Bild.
bitte poste vollständigen code hier
Hinzugefügt Diashow-code oben
und script-code bitte
Hinzugefügt script-code oben
Hinzugefügt Diashow-code oben
und script-code bitte
Hinzugefügt script-code oben
InformationsquelleAutor heartsfan | 2014-04-26
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
re 1: thumbnails offset
Sie würden anpassen der css für das thumbnail Haut.
re 2: center-Schieberegler
verwenden Sie 'margin: 0 auto;' an center-element
re 3: display-Stücke
setzen Sie bitte $Cols 4
InformationsquelleAutor jssor
end-tag </div> <div u="slides"...> fehlt.
bitte ersetzen Sie
mit
InformationsquelleAutor jssor
Ihnen fehlt ein Semikolon am Ende der rechten Pfeil für den Anfang
sollte
Habe auch, laden Sie Ihre Pfeil-Bilder, um Ihre img-Ordner online. Diese 2 sind aufgelistet in Ihrem Quellcode auf Ihrer Webseite t01.png und a17.png Laden Sie Sie auf Ihren server.
InformationsquelleAutor robbo