Jssor Slider - Text hyper link to a particular slide? - javascript

I am using Jssor Slider to display multiple images.
I have a separate thumbnail section which when clicked, should show the larger image in the slider.
Jssor Slider has an API to do this:
jssor_slider1.$GoTo(2);
How ever, I don't understand how to run this from a hyperlink.
I have tried doing onClick="jssor_slider1.$GoTo(2);" but this shows up an error in the console that "jssor_slider1" is undefined.
<script src="js/slider-master/js/jquery-1.9.1.min.js"></script>
<script src="js/slider-master/js/jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function($) {
var options = {
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
How would be correct way of doing this be? Thank you.

Make the jssor_slider1 variable global, you can access the instance anywhere.
Also, jssor_slider1.$PlayTo(2); is resonable as well.
<script src="js/slider-master/js/jquery-1.9.1.min.js"></script>
<script src="js/slider-master/js/jssor.slider.mini.js"></script>
<script>
var jssor_slider1;
jQuery(document).ready(function($) {
var options = {
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2
}
};
jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>

Related

JssorCaptionSlideo is Undefined

I am helping rebuild a website. They have a jssor Slider on the page.
On the old server and project it runs just fine. I have copy and pasted the contents of those files into a new project and server.
So now, the page runs, but there is a javascript runtime error that says
" '$JssorCaptionSlideo$' is undefined",
I didn't write any of this code, just simply trying to get it to run in a fresh solution environment.
<!-- #region Jssor Slider Begin -->
<!-- Generated by Jssor Slider Maker Online. -->
<!-- This demo works without jquery library. -->
<script type="text/javascript" src="js/jssor.slider.min.js"></script>
<!-- <script type="text/javascript" src="js/jssor.slider.debug.js">
</script> -->
<!-- use jssor.slider.debug.js instead for debug -->
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
...Bunch of machine code
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 5000, //how long pages is idle before changing pages.
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{
d: 5000,
b: 2500
}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
};
So I see where the script is trying to apply the class $JssorCaptionSlideo$. but it comes back undefined. jssor.slider.debug.js, the first <script> block points to, has the definition for the $JssorCaptionSlideo$. I am very new to web development and I was wondering if anyone could shed some light on this problem.
Is there a setting I need to enable in visual studio 2010?
Does the development server need to be configured a certain kind of way?
What Am I missing?
Just to clarify, I've literally never wrote or worked with javascript or html. So even the most basic solutions may be correct. I was kind of thrown into this project, and it may be something fundamental that I am missing.
oh and for good measure here is where I think the definition is
var $JssorCaptionSlideo$ = window.$JssorCaptionSlideo$ = function (j, c, i){ $JssorDebug$.$Execute(function () { if (!c.$Transitions) $JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$Transitions' not specified."); else !$Jssor$.$IsArray(c.$Transitions) && $JssorDebug$.$Error("'$CaptionSlideoOptions' option error, '$CaptionSlideoOptions.$Transitions' is not an array.") });
Try this. Put the code after <script type="text/javascript">
$(document).ready(function() {
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
...Bunch of machine code
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 5000, //how long pages is idle before changing pages.
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{
d: 5000,
b: 2500
}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
}
});
I really appreciate your help, but as I study the architecture of the website more closely, I realize the actual problem may be in several places. There is also a C# script associated with .aspx that helps in building the slideshow we have been trying fix. There is a strong possibility that key paths referenced in the C# script are no longer working on the new server space we are using to build the slideshow.

Ion.RangeSlider color from middle

I'm trying to use Ion.RangeSlider to make a slider where the color starts from the center and goes in the direction of the slider control until it hits the slider control. Right now, this is what I have:
Instead, I would like the color to go from the center of the slider to the slider control.
How can I make the RangeSlider work like that so that the color starts from the middle (as shown above)?
EDIT:
I looked at this question, but it deals with sliders with two controls instead one.
EDIT 1:
setup.js:
jQuery(document).ready(function($){
$(".slider").each(function() {
console.log($(this).attr("id"));
$(this).ionRangeSlider({
type: $(this).attr("data-slider_type"),
grid: $(this).attr("data-slider_grid"),
min: $(this).attr("data-slider_min"),
max: $(this).attr("data-slider_max"),
prefix: $(this).attr("data-slider_prefix")+" ",
postfix: " " + $(this).attr("data-slider_suffix"),
step: $(this).attr("data-slider_stepper"),
from: $(this).attr("data-slider_from")
});
$(this).on("change", function () {
var $this = $(this),
value = $this.prop("value").split(";");
});
});
});
Use: https://github.com/jordansoltman/ion.rangeSlider with has the additional boolean option: fixMiddle. For example:
$(".slider").ionRangeSlider({
fixMiddle: true,
...
});
Note: use ion.rangeSlider.js as ion.rangeSlider.min.js has not been updated.

idangero sliders startAutoplay after swipe not working

Hello, I am using the iDangero.us Slider and I have a problem resuming the replay/autoplay after swiping.
Here are the program details: "Create an iPad slider that has autoplay and a clickable pagination button. If the user stops using/swiping the slider, it will resume autoplay without refreshing the page."
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
autoplay: 2000,
speed:1000,
autoResize:true,
paginationClickable: true,
onTouchStart : function() {
slideTouched();
}
})
$('.pagination').on('click',function() {
mySwiper.stopAutoplay();
mySwiper.params.autoplay = 10000;
mySwiper.startAutoplay();
});
var timer = null;
function slideTouched(){
mySwiper.stopAutoplay();
mySwiper.params.autoplay = 10000
mySwiper.startAutoplay();
}
</script>
Link to live demo - http://emannthod.0fees.net/stock1/
I believe the problem is in the function slideTouched(). I don't think mySwiper is defined inside of the function. Please help me fix the autoplay feature after swiping.
Set this parameter:
autoplayDisableOnInteraction:false
Your live demo code in the link you provided has the slideTouched() function defined as
function slideTouched(){
Swiper.stopAutoplay();
Swiper.params.autoplay = 10000
Swiper.startAutoplay();
}
when it should be
function slideTouched(){
mySwiper.stopAutoplay();
mySwiper.params.autoplay = 10000;
mySwiper.startAutoplay();
}
You want to reference the Swiper object you used to create the slideshow.

jQuery fade to new image - then continue to cycle through a list of images?

So I've got a header image that upon being clicked animates with transit, fades out, and fades back in with a new image. I'm then able to click on the new image and it will also animate and fade out to blank space. How can I continuously animate/fade through a series of ordered images - one new image per click ad infinitum?
Here's what I've got so far...
$(document).ready(function(){
$("#headuh").click(function(){
$("#headimg").transition({ skewY: '30deg' },1000);
$("#headimg").fadeOut(function() {
$(this).transition({ skewY: '00deg' }) .load(function() { $(this).fadeIn(); });
$(this).attr("src", "/imgurl.jpg");
You can use the javascript function called setInterval(); like this:
setInterval(function(){
//this code will keep on executing on every 2 seconds.
},2000)
The following snippet doesn't solve your problem exactly, but it might put you on the right track, as it randomly cycles through a set of 28 images with fading in and out. You can see it live at http://moodle.hsbkob.de:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var g_first_call = true;
var g_pic_old;
$(document).ready(function() {
pickPic();
setInterval("pickPic()", 7500);
});
function randomPic() {
do {
var pic = parseInt(28*Math.random()+1);
} while (pic == g_pic_old); // Don't want same pic twice
g_pic_old = pic;
document.getElementById("_image_").src = "./picfolder/picno" + pic + ".jpg";
}
function pickPic() {
if (g_first_call) {
randomPic();
g_first_call = false;
}
$("#_fadee_").fadeIn(750, function() {
$("#_fadee_").delay(6000).fadeOut(750, randomPic);
});
}
//]]>
</script>
<div id="_fadee_"><img id="_image_" alt="Image" /></div>

Change pre-defined body background image

I found this script to change the body's background image when you click a link. It works, great except the only problem is is that I cannot have a pre-defined bg image in the css or else it won't change.
So I remove the css for the background image and it switches the images fine, but I want an image to be default to start with.
Script:
<script language="JavaScript">
<!--
var backImage = new Array(); // don't change this
backImage[0] = "images/bg0.png";
backImage[1] = "images/bg1.png";
backImage[2] = "images/bg2.png";
backImage[3] = "images/bg3.png";
backImage[4] = "images/bg4.png";
backImage[5] = "images/bg5.png";
function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}
//-->
</script>
Link:
Change2
And, for example, I want bg0.png to be the background by default when the page loads.
It would also be great if it was possible to fade between the bg images.
Thanks in advance.
Keep the background in the CSS, and use this code instead
var backImage = [
"images/bg0.png",
"images/bg1.png",
"images/bg2.png",
"images/bg3.png",
"images/bg4.png",
"images/bg5.png"
];
function changeBGImage(whichImage) {
if (document.body){
document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
}
}
To change the background if you have one defined in the css you need to alter: document.body.style.backgroundImage attribute

Categories

Resources