I embedded Jssor slider (Image gallery with vertical thumbnail) in my WordPress (in the template of a Custom Post-type), according to the instructions at the page:
http://www.jssor.com/development/embed-jssor-slider-into-blogger-post.html
I would like:
to remove the autoplay
to have one only type of transition (fade) and to remove all others
(rotate, zoom, etc.)
Can you help me please?
jssor_slider1_starter = function (containerId) {
var _SlideshowTransitions = [
//Fade
{ $Duration: 1200, $Opacity: 2 }
];
var options = {
$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
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
Reference: demos-no-jquery/simple-fade-slideshow.source.html
Related
Having 360+ transition effects is cool, but I have only 10 slides. How can I give them fancy transitions equal chance to show off?
The transition effect is defined in option object before the JssorSlider object is created. It seems to me I can only pick 1 of the 360 and set it in the option. Can I have random transition effect for each transition?
A.K.A, after the JssorSlider is created, can I still apply new option values to it?
You can specify a transition array with multi transitions. And you can set $TransitionsOrder: 0 to let it play transition randomly.
jQuery(document).ready(function ($) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [
{ code1 },
{ code2 },
{ code3 }
];
var options = {
$AutoPlay: true,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 0, //The way to choose transition to play slideshow, 1: Sequence, 0: Random
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
After the JssorSlider is created, you can also set transitions dynamically by api call $SetSlideshowTransitions(transArray).
jssor_slider1.$SetSlideshowTransitions(transArray);
Reference:
http://www.jssor.com/development/slider-with-slideshow-jquery.html
http://www.jssor.com/development/reference-options.html
http://www.jssor.com/development/reference-api.html
I would like 3 tiles: previous, current, next.
For instance, when the user move from current to next, I would like a new next tile to be added and the old previous tile to be removed.
Is there any specific javascript function which could be used ?
Or in which function should it be implemented ? (OnPark?)
Any idea, how to implement it ?
Thanks
Thanks Jssor. It works fine. For information, this is my "do something treatment"
if (slideIndex > -1 && fromIndex > -1) {
// filter first access to keep only slide changement
var difference=slideIndex-fromIndex;
if (difference === 1 || difference === -2){
//next tile was just requested
var replaceIndex=(slideIndex+1)%3;
replaceImage(replaceIndex, nextImageUrl);
} else {
//previous tile was just requested
var replaceIndex=(2+slideIndex)%3;
replaceImage(replaceIndex, previousImageUrl);
}
}
function replaceImage(index,url){
// I have add the attributes class="tilei" where i = 0,1 or 2
// inside the tags <img u="image" ...
$('.tile'+index).attr("src",url).load(function(){
var fillHeight=this.height*720/this.width;
var top=(1130-fillHeight)/2;
$('.tile'+index).attr("style","width: 720px; height: "+fillHeight+
"px; top: "+top+"px; left: 0px; position: absolute;");
});
}
Would you do this image replacement in another way to avoid duplication code with the Jssor API, or to block any interaction during image loading ? Sincerely, Didier
You can use your own 'prev' and 'next' buttons.
You can call $Prev or $Next method when a button is clicked.
For example,
jssor_slider1.$Prev();
jssor_slider1.$Next();
And you can display/hide/alter any button when the slider parks.
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$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)
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function SlideParkEventHandler(slideIndex, fromIndex) {
//do something to display/hide/alter any button
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
});
</script>
I am using JSSOR Content Slider.
I want to have multiple right arrows in slides.. Like one will be the default one and other can we put it inside the content when user clicks the other arrow button it should take us to next slide..
Screenshot is also attached..
Please help me on this.
Please use api to do this job.
You can put any arrow in slide, and call api when user click.
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$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)
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ArrowClickEventHandler() {
jssor_slider1.$PlayTo(slideIndex); //slideIndex is index of slide
}
$("#yourarrow").bind("click", ArrowClickEventHandler);
});
I am building a pretty good JSSOR slide show, with what must be recognized as very good support by jssor on StackOverflow. I'm also completely amazed that the best slideshow program in the world is free.
My slideshow does a "chess mode" type animation mode on every slide. What I am looking for is a variety of transition modes (I call them transition modes, but maybe that is the wrong term?).
Example:
"ChessMode" slide show
But I want something more like this:
JSSOR image-gallery demo
I think the secret lies in the _SlideshowTransitions array values, but I don't know what the full range of possibilities are, or how to make multiple effects modes within one slide show.
These are my _SlideshowTransitions settings:
var _SlideshowTransitions = [{
$Duration: 600,
$Delay: 50,
$Cols: 8,
$Rows: 4,
$FlyDirection: 5,
$Formation:
$JssorSlideshowFormations$.$FormationZigZag,
$Assembly: 1028,
$ChessMode: { $Column: 3, $Row: 12 },
$Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad },
$Opacity: 2
}];
I see you use only one transition, please use more transitions in following manner,
var _SlideshowTransitions = [
{ code1 },
{ code2 },
{ code3 },
...
];
Get transition code at http://www.jssor.com/development/tool-slideshow-transition-viewer.html
I have to put image loading at client side, which is basically right after browser finishes requesting a page, an ajax call is triggered to load list of images, then slides are added into sider container. Number of photos is not known after that ajax call.
I tried building html text of slides, and assign into slider container, then trigger the slider-starter. But the slider doesn't show properly.
Thanks a lot for any suggestion
I post what I did here in case it's helpful for someone:
//function to start the slider
jssor_slider1_starter = function (containerId) {
var options = {
$AutoPlay: false,
$SlideDuration: 800,
$FillMode: 2,
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$ChanceToShow: 2,
$Lanes: 1,
$SpacingX: 14,
$SpacingY: 12,
$Cols: 6,
$Align: 156,
$Orientation: 2
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
};
//Ajax function to start the slider after loading the 'content' of slider
//getImgUrl is the url of page returning urls of images contained in slider. Format of response can be whatever as long as you can parse it, my sample is [[[url1,url2..]]]
$.ajax({
url:getImgUrl,
success:function(data){
var imgurls_str=data.substring(data.indexOf('[[[')+3,data.indexOf(']]]'));
var imgurls=imgurls_str.split(',');
var imgHtmls='';
for(var i=0;i<imgurls.length;++i){
imgHtmls+='<div><img u="image" src="'+imgurls[i]+'" /><img u="thumb" src="'+imgurls[i]+'" /></div>';
}
$("#slides").html(imgHtmls);
jssor_slider1_starter('slider1_container');
}
});
You are doing in a right way.
All you need is to check slides (you added dynamically) are correct or not.
To check html created dynamically, you can copy it out and test it in a standalone html file to see if the slider works.