We Keep Coding

Find current Slide div and add Class

I'm trying to add Class to Current Slider div, I am using Jssor Slider, I've tried given JS below for add class to current slide, but it's not working. I have use this JS with Jssor Call.
// event fired when slider is "parked"
jssor_slider1.$On( $JssorSlider$.$EVT_PARK, function(slideIndex){
var allImages = $(jssor_slider1.$Elmt).find("img[u=image]");
var currentImage = allImages.eq(slideIndex);
var currentDiv = currentImage.parent("div");
currentDiv.addClass("current");
});
// event fired when slider starts moving
jssor_slider1.$On( $JssorSlider$.$EVT_POSITION_CHANGE, function(position){
// remove 'current' class from all slides
$(jssor_slider1.$Elmt).find(".current").removeClass("current");
});
Jssor Call Below:
jQuery(document).ready(function($) {
//Define an array of slideshow transition code
var _SlideshowTransitions = [
{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Shift:-100}},
{$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
];
var options = {
$AutoPlay: true,
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
$ArrowKeyNavigation: true, //Allows arrow key to navigate or not
$SlideWidth: 800, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, the default is width of 'slides' container
$SlideSpacing: 0, //Space between each slide in pixels
$Cols: 1, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
//New add for random transition
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 0, //The way to choose transition to play slideshow, 1: Sequence, 0: Random
$ShowLink: true
},
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
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.min(parentWidth, 800));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//============== Find Current slide Code =====================//
// event fired when slider is "parked"
jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex) {
var allImages = $(jssor_slider1.$Elmt).find("img[u=image]");
var currentImage = allImages.eq(slideIndex);
var currentDiv = currentImage.parent("div");
currentDiv.addClass("current");
});
// event fired when slider starts moving
jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, function(position) {
// remove 'current' class from all slides
$(jssor_slider1.$Elmt).find(".current").removeClass("current");
});
//============================================================//
}); // Call end
(Demo) Please see the Fiddle >>
Current slide should be red bored color when add class to current slide, but it's not working, it's unable to find current slide (some time Find for few moment), but where is the problem?
Trying to find current Slide div and add Class properly.
More Information:
This JS was good without random transition: demo http://jsfiddle.net/y7fap5dy/8/
But when I've added random transition code, it's unable to add class to current div.
Please compare:
Without random transition demo: http://jsfiddle.net/y7fap5dy/8/
Random transition demo: http://jsfiddle.net/y7fap5dy/7/ (unable to add class to current div)
Thanks in advance.

There are 2 issues:
first: You are applying the class current to the wrong div (to the inner most), that is why at random transition sometimes only a part (the innermost image) is affected.
the image structure at jssor has a lot of nested divs, you need to go up the dom to find the correct div.
so just change your variable currentDiv to:
var currentDiv = currentImage.closest('#slider1_container').children("div");
this finds the first nested div in your jssor slider, there you want your class current added.
second: in order to find out once a slide is changing, you need to check with $EVT_STATE_CHANGE for idleBegin and idleEnd; don't use $EVT_PARK:
jssor_slider1.$On( $JssorSlider$.$EVT_STATE_CHANGE , function(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd){
// add 'current' class to slide
if(progress==idleBegin){
var allImages = $(jssor_slider1.$Elmt).find("img[u=image]");
var currentImage = allImages.eq(slideIndex);
var currentDiv = currentImage.closest('#slider1_container').children("div");
currentDiv.addClass("current");
}
// remove 'current' class from slide
else if(progress==idleEnd){
$(jssor_slider1.$Elmt).find(".current").removeClass("current");
}
});
check the updated fiddle

Dynamic javascript that is echoed by php doesn't work

I'm echoing a javascript snippet with php. the problem is that when I load that snippet dynamically, it doesn't work. but when I put generated javascript right in the place and comment the php, it works.
CODE :
<script type="text/javascript">
$(document).ready(function(){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 5000, // Length between transitions
transition : 2, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 600, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 0, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
<?php
$loop = new WP_Query('post_type=slide');
if($loop->have_posts()):while($loop->have_posts()):$loop->the_post();
?>
{
image : '<?php the_field('slide_pic'); ?>',
title : '<h2><?php the_content(); ?></h2>',
thumb : '',
url : ''
},
<?php endwhile;endif;wp_reset_query(); ?>
],
// Theme Options
progress_bar : 0, // Timer for each slide
mouse_scrub : 0
});
});
</script>
Generated javascript:
<script type="text/javascript">
$(document).load(function(){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 5000, // Length between transitions
transition : 2, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 600, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 0, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
{
image : 'http://mahpari.dev/wp-content/uploads/2014/07/image4.jpg',
title : '<h2><p>شعار مورد نظر 2</p>
</h2>',
thumb : '',
url : ''
},
{
image : 'http://mahpari.dev/wp-content/uploads/2014/07/image1.jpg',
title : '<h2><p>شعار مورد نظر 1</p>
</h2>',
thumb : '',
url : ''
},
],
// Theme Options
progress_bar : 0, // Timer for each slide
mouse_scrub : 0
});
});
</script>
Any ideas?

The problem seems to be the line breaks. This will produce an error. (SyntaxError: Unexpected EOF)
title : '<h2><p>شعار مورد نظر 2</p>
</h2>',
It should be better like that:
title : '<h2><p>شعار مورد نظر 2</p>\n</h2>',

Here, at the end of your "while" loop:
url : ''
}, // <--dangling comma
],
Internet Explorer is particular harsh on those and will puke with a syntax error.

Pass Values with with php from DB to jquery

I have a slider with jQuery. what i want is that i want to build a dynamic way of populating the images of the slider. For example the user puts images to DB and the slider automaticly shows them:
TEST.slider = function(){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 4000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 300, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 0, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
{image : 'img/slider-images/image01.jpg', title : '<div class="slide-content">CESI</div>', thumb : '', url : 'CESI'},
{image : 'img/slider-images/image02.jpg', title : '<div class="slide-content">Responsive Design</div>', thumb : '', url : ''},
{image : 'img/slider-images/image03.jpg', title : '<div class="slide-content">FullScreen Gallery</div>', thumb : '', url : ''},
{image : 'img/slider-images/image04.jpg', title : '<div class="slide-content">Showcase Your Work</div>', thumb : '', url : ''}
],
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 1
});
}
So what i want is that with PHP to read data from DB , which are the images path and pass it as values to the slider expecialy to this part:
slides : [
{image : '<?php echo $image_path_dynamic; ?>', title : '<div class="slide-content">Responsive</div>', thumb : '', url : ''},
],
i want to pass the variables from the index page.

There are two ways of passing php variables to javascript.
Make an endpoint, that you can hit with XHTMLRequest or some framework.
json_encode the variable and then echo it. Javascript is capable of parsing json, which is rather cool. (A cool package, which can help you with this approach: https://github.com/laracasts/PHP-Vars-To-Js-Transformer)

I don't know if it'll work because I couldn't test it myself, but that's how I would do it. Inside your fucntion you can add a call to the $.post method, should look something like this:
var imagesArray;
$.post('imagesRetriever.php', function(echoedValue){ imagesArray= jQuery.parseJSON(echoedValue); });
Your imagesRetriever.php should look something like:
<?php
$db = new mysqli('localhost', 'user' ,'password', 'dbname');
...some code here..
$array = ..build the array with the data you need as a php array...;
echo json_encode($array);
}?>
Then inside $.supersized you can access to the var imagesArray that now contains the data you need and behaves as a normal jQuery array, this means you can use all the know methods to work with arrays in jQuery. I think you can just loop through every element of the array and build a new element to put inside 'slides'.

Supersized - choose different set of slides

I an using Supersized plugin for my site and would like to know if it is possible to do do the following:
I have 5 sets of pictures, 2 pictures in a set.
When page loads, play RANDOMLY one set and then stop.
Basically, i want to supersized choose different set of slides each time the page reloads.
Thank you for any help.

I figured it up myself:
var setnum;
setnum = Math.floor((Math.random()*5)+1);
switch (setnum)
{
case 1:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image1.jpg'},
{image : 'image1-2.jpg'},
]
});
});
break;
case 2:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image2.jpg'},
{image : 'image2-2.jpg'},
]
});
});
break;
case 3:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image3.jpg'},
{image : 'image3-2.jpg'},
]
});
});
break;
case 4:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image4.jpg'},
{image : 'image4-2.jpg'},
]
});
});
break;
case 5:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 5000, // Length between transitions
transition : 1, // 0one, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
stop_loop : 1, //Pauses slideshow upon reaching the last slide.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : 'image5.jpg'},
{image : 'image5-2.jpg'},
]
});
});
break;
}

Supersized - loading images dynamically

Ok, I have a js script on the page that calls this:
function loadTheseimages(slideList) {
jQuery(function($){
var slideIterate = [];
var slidesObj = new Object;
slideIterate = slideList.split(',');
$.each(slideIterate, function(key, value) {
slidesObj += '{image: "' + value + '"}';
});
$.supersized({
// Functionality
slide_interval : 3000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 700, // Speed of transition
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
slidesObj
]
});
});
}
The Script calling the above function passes
"http://cliffside.ca/wp-content/uploads/2012/06/cliff-side-nightsky.jpeg, http://cliffside.ca/wp-content/uploads/2012/05/Sunset.jpg, http://cliffside.ca/wp-content/uploads/2012/05/Relaxing-Room.jpg"
Why is it not working?
http://Cliffside.ca/

Just to clarify, the object that has to be passed to supersized must be built like this:
var slidesObj = new Array;
$.each( data, function( key, value ) {
var slide = new Object;
slide = {image:value };
slidesObj.push(slide);
});
And the just put the following when calling supersized:
slides : slidesObj,