We Keep Coding

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'.

Add navigation for paging control of each slide in javascript

I want to add paging control of each slide in this website background slideshow.
Flexslider is used here. The javascript for the slider will be available in main.js.
I have added the code below to enable the paging control but nothing is showing up.
jQuery('.flexslider').flexslider({
// Primary Controls
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
animationLoop: true,
slideshow: false,
smoothHeight: true,
animation: "none",
});
Supersized in main.js:
if (typeof pt_supersized_slides !== "undefined")
{
jQuery.supersized({
slide_interval : 100000, // 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 : 500, // Speed of transition
slide_links : 0, // Individual links for each slide (Options: false, 'number', 'name', 'blank')
slides : pt_supersized_slides
});
}
Thanks in advance.

The id of the slider on your website is "supersized" not "flexslider" and I don't see any class name of "flexslider" in your source code.

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

How to display page loading indicator using spin.js

I am learning how to use Spin.js so that a loading indicator (the spinner) can be shown while the web page is loading.
I got it working but I am not sure whether I am calling the spin/stop in the proper page lifecycle. Is it possible to show the spinner before $(window).ready ?
<script type="text/javascript">
var spinner;
$(window).ready(function loadingAnimation() {
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = $("body")[0];
spinner = new Spinner(opts).spin(target);
});
window.onload = function() {
spinner.stop();
};
For the working example, please see http://sgratrace.appspot.com/industry.html

I created an object to control the spinning:
Rats.UI.LoadAnimation = {
"start" : function(){
var opts = {
lines : 13, // The number of lines to draw
length : 7, // The length of each line
width : 4, // The line thickness
radius : 10, // The radius of the inner circle
corners : 1, // Corner roundness (0..1)
rotate : 0, // The rotation offset
color : '#000', // #rgb or #rrggbb
speed : 1, // Rounds per second
trail : 60, // Afterglow percentage
shadow : false, // Whether to render a shadow
hwaccel : false, // Whether to use hardware acceleration
className : 'spinner', // The CSS class to assign to the spinner
zIndex : 2e9, // The z-index (defaults to 2000000000)
top : $(window).height()/2.5, // Manual positioning in viewport
left : "auto"
};
var target = $("body")[0];
return new Spinner(opts).spin(target);
},
"stop" : function(spinner){
spinner.stop();
}
};
When the DOM is loaded, I start spinning:
$(document).ready(function(){
// Once the DOM is loaded, start spinning
spinner = Rats.UI.LoadAnimation.start();
pageUI();
});
When the entire page is loaded, I stop spinning:
$(window).load(function(){
// Once the page is fully loaded, stop spinning
Rats.UI.LoadAnimation.stop(spinner);
});
What's the difference between window.onload vs $(document).ready()
See the full code on my github repo:
https://github.com/seahrh/sgratrace/blob/master/war/js/rats.js
https://github.com/seahrh/sgratrace/blob/master/war/index.html

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.