Supersized - loading images dynamically - javascript

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,

Related

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;
}

Add atrributes from image to javascript array and display

I need to add the attributes from the images inside this div to an JS array and run Supersized, with these images:
<div id="dgaslides">
<img src="img/temp/topimg01.jpg" title="Image 1">
<img src="img/temp/topimg02.jpg" title="Image 2">
<img src="img/temp/topimg03.jpg" title="Image 3">
</div>
My JS:
jQuery(function($){
var img_length = $('#dgaslides img').length-1;
var dgaslides = [];
$('#dgaslides img').each( function(i){
var src = $(this).attr('src');
var title = $(this).attr('title');
dgaslides.push("{image : '" + src + "', title : '" + title + "'}");
if(img_length == i){
$.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
horizontal_center : 1, // Centers image horizontally. When turned off, the images resize/display from the left of the page.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : dgaslides
});
}
}); });
It does work, as im getting 3 images in my output, but the link (src) is "Undefined", and the title isn't there either?
The right way to hardcode it is:
var dgaslides = [ // Slideshow Images
{image : 'img/temp/topimg01.jpg', title : 'Reception'},
{image : 'img/temp/topimg02.jpg', title : 'Reception 2 og noget mere tekst her'},
{image : 'img/temp/topimg03.jpg', title : 'Reception 3'}
];
Can anyone help me figuring out what i'm doing wrong?
You could use jQuery's map method to simplify the task. Following is the code.
jQuery(function ($) {
var dgaslides = $('#dgaslides img').map(function () {
return {
image: $(this).attr('src'),
title: $(this).attr('title')
};
});
$.supersized({
slide_interval: 3000,
transition: 1,
transition_speed: 700,
horizontal_center: 1,
slide_links: 'blank',
slides: dgaslides
});
});
Hope this helps.
I think you need to pass an array of objects and not an array of strings.
dgaslides.push({image : src, title : title });
You're saving the strings to the array rather than the objects.
Here's a JSFiddle with a modified version of your code (without the supersized function) that works as intended: http://jsfiddle.net/SBuXF/
Main change: dgaslides.push({image : src, title : title});
I've output the generated array to the console, followed by your hardcoded one - they're identical.
Edit: Your hardcoded titles didn't match the HTML, so the content of the two arrays is slightly different, but they are both formatted correctly. A corrected fiddle is here: http://jsfiddle.net/SBuXF/1/

jquery supersized stop_loop redirect?

i have four images slides and i want to redirect once finish sliding. how?
sample code:
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : [
if (data)
{
window.location = "http://www.google.com/";
}
], // Pauses slideshow on last slide
random: 0, // Randomize slide order (Ignores start slide)
slide_interval : 9000, // Length between transitions
transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right,
// 4-Slide Bottom, 5-Slide Left, 6-Carousel Right,
// 7-Carousel Left
transition_speed : 2000, // Speed of transition
});
});
According to the Supersized documentation, the stop_loop settings is a boolean to say whether to "pause" once the last slide is reached, it doesn't take a callback to be run at the end of the loop and the way you included the code there in your question is a syntax error.
I don't see anything in the doco about a way to receive a notification when the slideshow reaches its end, so the only thing that comes to mind (other than altering the Supersized source) is a setTimeout():
jQuery(function($){
var interval = 9000,
speed = 2000,
slideArray = []; // add your slides to this array
$.supersized({
slideshow : 1,
autoplay : 1,
start_slide : 1,
stop_loop : true, // Pauses slideshow on last slide
random: 0,
slides : slideArray,
slide_interval : interval,
transition : 6,
transition_speed : speed,
});
setTimeout(function() {
if (data)
window.location = "http://www.google.com/";
}, (interval + speed) * slideArray.length);
});
That is, figure out how long the whole slideshow should take and run your redirection code after that amount of time. Your code didn't specify any slides, but I've added an array variable where they could be specified and used that array's length in calculating the delay.

Categories