We Keep Coding

jQuery: How to get value from "this" object?

I made one helper for open new popup window on click and I have a problem with setup default values inside object. I need to calculate position for TOP and LEFT position for popup to center new popup. Here is complete code:
/*
$(element).onPopup(options); - Open Popup window
-Ths function open new popup window on your browser
EXAMPLE:
----------------------------------------------
Google
$("a#link").onPopup({
name : "Popup Window",
width : 800,
height : 600
});
OPTIONS:
----------------------------------------------
attr // attribute where is located link
name // name of popup window
width // max width
height // max height
left // position left (px)
top // position top (px)
resizable // resizable 1 or 0
location // display location 1 or 0
fullscreen // open in full screen 1 or 0
scrollbars // display scroll bars 1 or 0
titlebar // display title bar 1 or 0
toolbar // display tool bar 1 or 0
directories // display directories 1 or 0
*/
$.fn.onPopup=function(options){
var s = {
attr : "href",
name : "Popup Window",
width : 700,
height : 600,
left : ($(window).width()/2)-(this.width/2),
top : ($(window).height()/2)-(this.height/2),
resizable : 0,
location : 0,
fullscreen : 0,
scrollbars : 1,
titlebar : 0,
toolbar : 0,
directories : 0
},
$element = this;
s = $.extend(s,options);
$element.on("click",function(e) {
e.stopPropagation(); e.preventDefault();
window.open(
$(this).attr(s.attr), s.name, "width="+s.width+", height="+s.height+", directories="+s.directories+", toolbar="+s.toolbar+", titlebar="+s.titlebar+", scrollbars="+s.scrollbars+", fullscreen="+s.fullscreen+", location="+s.location+", resizable="+s.resizable+", top="+s.top+", left="+s.left
);
});
};
And here is where is my problem:
var s = {
/*...*/
width : 700,
height : 600,
left : ($(window).width()/2)-(this.width/2),
top : ($(window).height()/2)-(this.height/2),
/*...*/
},
How to pass width/height to another object to work?

One way is to create the object first then add extra properties that reference other properties in the object
var s = {
attr : "href",
name : "Popup Window",
width : 700,
height : 600,
left : null, //calculated if not user provided
top : null //calculated if not user provided
....
};
// update user settings
s = $.extend(s,options);
// calculate based on actual values
if(s.left === null){
s.left = ($(window).width()/2)-(s.width/2);
}
if(s.top === null){
s.top = ($(window).height()/2)-(s.height/2);
}
Also note you should return this.each(.. and run your business there so you have separate instances when selector includes more than one element as well as make the plugin chainable with other jQuery methods

According to your API in the code comments you want the caller to be able to specify their own left and top positions.
You therefore need to check whether any values have been given at all, and only then calculate the default position based on the configured width and height.
var s = {
... // defaults, *not including* "left" and "top"
};
// override the defaults with the user-supplied options
// NB: no need to re-assign to `s` - `$.extend` overwrites
// the contents of the first parameter
$.extend(s, options);
// then calculate `left` and `top` if they weren't supplied
if (s.left === undefined) {
s.left = ($(window).width() - s.width) / 2;
}
if (s.top === undefined) {
s.top = ($(window).height() - s.height) / 2;
}

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.

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.

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,