jQuery Array?

Genjutsushi · December 3, 2010, 12:00pm

Hi guys,

basically, I’ve got a jQuery plugin which I need to attempt to expand upon and I need part of it broken down into an array… at least that’s the way I think I need to handle it:

<script type="text/javascript">  

 

        $(function(){

            $.fn.resizer.options = {  

                startwidth: 1024,  

                startheight: 768,

                vertical_center: 1,

                slideshow: 1,

                navigation: 0,

                thumbnail_navigation: 0,

                transition: 1, 

                pause_hover: 0,

                slide_counter: 0,

                slide_captions: 0,

                slide_interval: 5000,

                slides : [

                    {image : 'img/item_1.jpg' },

                    {image : 'img/item_2.jpg' },

                    {image : 'img/item_3.jpg' },

                    {image : 'img/item_4.jpg' }

                ]

            };

            $('#resizer').resizer() 

        });

</script>

That is the inline call for it. I need to somehow have multiple slides and to output to separate ids. So above we got item_1 to item_4 which can be placed in the page by using <div id=”resizer”></div>

I need to then be able to have a separate set of slides, say item_5 to item_8 and output that to… #resizer_2

Would I need to create a new function for it? or Could it be done in a single function but with multiple arrays?

Hope this makes some kind of sense to someone.

Cheers!

rpkamp · December 3, 2010, 12:08pm

Can’t you pass the options to the .resizer() call?
Usually you can, and the $.<plugin>.options are only the default options that are used if no options are supplied.

So, something like this:


$(function(){
	
$('#resizer').resizer({  
	startwidth: 1024,  
	startheight: 768,
	vertical_center: 1,
	slideshow: 1,
	navigation: 0,
	thumbnail_navigation: 0,
	transition: 1, 
	pause_hover: 0,
	slide_counter: 0,
	slide_captions: 0,
	slide_interval: 5000,
	slides : [
		{ image : 'img/item_1.jpg' },
		{ image : 'img/item_2.jpg' },
		{ image : 'img/item_3.jpg' },
		{ image : 'img/item_4.jpg' }
	]
});

$('#resizer_2').resizer({
	bla: 'blah',
	blah: 'blahblah'
});

});

If that doesn’t work, could you tell us what the plugin you’re using is, can you supply a link?

Genjutsushi · December 3, 2010, 12:28pm

Thanks for your reply and suggestion, it didn’t work unfortunately.

The plugin is Supersized jQuery:
http://www.buildinternet.com/project/supersized/

The developers don’t support feature requests and what I’m trying to achieve is that when a link is click the background changes to a second set of images.

So as illustrated in my code above, I thought the way to go about this would be to output another array of images to a second div and merely use .hide and .show on a link to control this display.

Again, any input massively appreciated as I don’t want to do this in Flash if I can help it, as easy as that would be.

rpkamp · December 3, 2010, 12:58pm

You can easily make it accept options like I proposed by changing


$.fn.supersized = function() {
		
		var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options);

to


$.fn.supersized = function([COLOR="Blue"]options[/COLOR]) {
		
		var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options, [COLOR="Blue"]options[/COLOR]);

Just add the “options” in blue twice to the code

Genjutsushi · December 3, 2010, 1:10pm

That’s great, thank you very much. Could I trouble you to just give me an example in the context of my first post, sorry to be a nightmare!

I’ll be the first to admit, I’m slightly out of my depth with modifying jQuery plugins.

rpkamp · December 3, 2010, 3:14pm

I’m not entirely sure what you mean here. Do you mean the code I supplied in post 2, where I applied .resizer() to both #resizer and #resizer2 ?

Of course you need to supply a more sensible configuration than


{
    bla: 'blah',
    blah: 'blahblah'
}

but the general idea should work once you’ve updated the plugin

Genjutsushi · December 3, 2010, 5:28pm

I was refering to how to use your suggestion within the code in my first post. So at the moment I’ve got:

	

<script type="text/javascript">  
	
	$.fn.supersized = function(options) {
		
        var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options, options);
		


			$('#supersized').supersized.options = ({  
				startwidth: 1024,  
				startheight: 768,
				vertical_center: 1,
				slideshow: 1,
				navigation: 0,
				thumbnail_navigation: 0,
				transition: 1, 
				pause_hover: 0,
				slide_counter: 0,
				slide_captions: 0,
				slide_interval: 5000,
				slides : [
					{image : 'img/item_1.jpg' },
					{image : 'img/item_2.jpg' },
					{image : 'img/item_3.jpg' },
					{image : 'img/item_4.jpg' }
				]
			});
			
			$('#supersized2').supersized.options = ({
			
				slides : [
					{image : 'img/item_5.jpg' },
					{image : 'img/item_6.jpg' },
					{image : 'img/item_7.jpg' }
				]
			
			});
			
			
	        $('#supersized').supersized() 
	        $('#supersized2').supersized() 
	    
		
		
	    };
		
		
	</script>

This currently does not work, although I’m sure I’ve not quite understood your explanation.

Thanks again for your help so far though.

rpkamp · December 3, 2010, 6:22pm

You need to do it like this:


$('#supersized').supersized({  
	startwidth: 1024,  
	startheight: 768,
	vertical_center: 1,
	slideshow: 1,
	navigation: 0,
	thumbnail_navigation: 0,
	transition: 1, 
	pause_hover: 0,
	slide_counter: 0,
	slide_captions: 0,
	slide_interval: 5000,
	slides : [
	{image : 'img/item_1.jpg' },
	{image : 'img/item_2.jpg' },
	{image : 'img/item_3.jpg' },
	{image : 'img/item_4.jpg' }
	]
}) 
$('#supersized2').supersized({
	slides : [
	{image : 'img/item_5.jpg' },
	{image : 'img/item_6.jpg' },
	{image : 'img/item_7.jpg' }
	]
})

Genjutsushi · December 3, 2010, 6:42pm

I’ve just tried this example but I’m afraid it didn’t work. In this instance no images are displayed at all.

rpkamp · December 3, 2010, 11:37pm

You did make the changes I suggested in post #4 didn’t you?
If so, and it doesn’t work, could you post a URL to a live example? Or at least paste all the code you have so far (including a minimal HTML) example here?

Genjutsushi · December 4, 2010, 12:00am

I have used the code you posted in post 4, though I am confused. Was I suppose to use it as is or change the “options”? I’m not sure what I would be expected to enter as an option exactly as the only thing that needs controlling is the image array which is specified in slides:

Here’s the top section of the HTML, it’s not currently on a live site

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en" id="index">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="distribution" content="Global" />
<meta name="copyright" content="" />
<meta name="resource-type" content="document" />
<meta name="author" content="" />
<meta name="robots" content="index,follow" />
<meta name="content-language" content="english" />
<meta name="rating" content="General" />
<meta name="revisit" content="28 days" />

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/peek-a-boo.js"></script>


<!-- supersized module -->

<script type="text/javascript" src="js/effects.core.js"></script>
<script type="text/javascript" src="js/supersized.3.0.js"></script>


	<script type="text/javascript">  
	
	
	  $.fn.supersized = function(options) {
		
		var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options, options); 
		
			$('#supersized').supersized({
       startwidth: 1024,
       startheight: 768,
       vertical_center: 1,
       slideshow: 1,
       navigation: 0,
       thumbnail_navigation: 0,
       transition: 1,
       pause_hover: 0,
       slide_counter: 0,
       slide_captions: 0,
       slide_interval: 5000,
       slides : [
       {image : 'img/item_1.jpg' },
					{image : 'img/item_2.jpg' },
					{image : 'img/item_3.jpg' },
					{image : 'img/item_4.jpg' }
       ]
});
$('#supersized2').supersized({
       slides : [
       {image : 'img/item_5.jpg' },
					{image : 'img/item_6.jpg' },
					{image : 'img/item_7.jpg' }
       ]
});

			
		
	    };
		
		
		
		
	</script>
	
	
	
	
	

<!--[if  IE 6 ]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('#nav_bar, .news_box');</script>
<![endif]-->

<!--[if  gte IE 7 ]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->



<title></title>  
</head>


<body class="index">




<!-- background if no js -->

<noscript>

	<img id="background" src="img/background_1.jpg" alt="" />
	
</noscript>

<!-- -->




<div id="loading"></div>

<div id="supersized"></div>
<div id="supersized2"></div>

I’ve removed all other jQuery or DOM elements that may have been conflicting including the control for hiding the ids so I would’ve expected at least either #supersized or #supersized2 background to be displayed, that isn’t the case.

Hope that makes some sense.

Thank you!

rpkamp · December 4, 2010, 12:25am

Ah, okay. The change I suggested in post #4 was not meant to be added to the page. So firstly, remove that.

Then, open up js/supersized.3.0.js , and apply the change there.
You will see that the first code box I had in post #4 is part of that file, so just add the parts in blue. Save the file, and use the script as I put it in post #8

So your HTML will only contain the code I put in post #8, none of the changes proposed in post #4; those go into js/supersized.3.0.js

Makes sense?

Genjutsushi · December 4, 2010, 11:06am

That made sense, excuse my stupidity. Though the problem remains, to an extent. Now Instead of no images, I simply get a fixed single image, the rotation of images no longer works.

rpkamp · December 4, 2010, 11:51am

No worries, we all have to start somewhere

Does it still work if you apply the .supersized() function to only one element instead of two? (i.e. just #supersized and not #supersized2) ?

Genjutsushi · December 4, 2010, 11:57am

Wait! I see what I’ve done wrong… it’s working now.

In putting:



$.fn.supersized = function(options) {

var options = $.extend($.fn.supersized.defaults, $.fn.supersized.options, options);

Into the body of the HTML, I’d removed the:



$(function(){


});

that had been previously wrapping the rest of the Javascript. So basically as far as the browser was concerned, there was no function.

Stupid, I know. But my mistake and as you say, we’ve all got to start somewhere!!

Thank you so much for your help, you’ve been brilliant!!

rpkamp · December 4, 2010, 12:11pm

Thanks. Glad you got it working

Genjutsushi · December 4, 2010, 12:17pm

Ok, I may have spoken too soon.

The images are now loading and rotating, that’s all fine.

But whether or not the ID call of #supersized2 is commented out or not, the images for #supersized2 are always displayed and never the images from the first #supersized.

The only way I can get around this is by commenting out the jQuery/Javascript for the slides in #supersized2



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en" id="index">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="distribution" content="Global" />
<meta name="copyright" content="" />
<meta name="resource-type" content="document" />
<meta name="author" content="" />
<meta name="robots" content="index,follow" />
<meta name="content-language" content="english" />
<meta name="rating" content="General" />
<meta name="revisit" content="28 days" />

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/peek-a-boo.js"></script>


<!-- supersized module -->

<script type="text/javascript" src="js/effects.core.js"></script>
<script type="text/javascript" src="js/supersized.3.0.js"></script>


	<script type="text/javascript">  
	
	
	  
		$(function(){
			$('#supersized').supersized({
       startwidth: 1024,
       startheight: 768,
       vertical_center: 1,
       slideshow: 1,
       navigation: 0,
       thumbnail_navigation: 0,
       transition: 1,
       pause_hover: 0,
       slide_counter: 0,
       slide_captions: 0,
       slide_interval: 5000,
       slides : [
					{image : 'img/item_1.jpg' },
					{image : 'img/item_2.jpg' },
					{image : 'img/item_3.jpg' },
					{image : 'img/item_4.jpg' }
       ]
});



/*$('#supersized2').supersized({


       slides : [
					{image : 'img/item_5.jpg' },
					{image : 'img/item_6.jpg' },
					{image : 'img/item_7.jpg' }
       ]
	   

	  


});*/



});












			
		
	    
		
		
		
		
	</script>
	
	
	

<!--[if  IE 6 ]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('#nav_bar, .news_box');</script>
<![endif]-->

<!--[if  gte IE 7 ]>
<link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->



<title></title>  
</head>


<body class="index">




<!-- background if no js -->

<noscript>

	<img id="background" src="img/background_1.jpg" alt="" />
	
</noscript>

<!-- -->




<div id="loading"></div>

<div id="supersized"></div>
<div id="supersized2"></div>

I’d planned to hide the div using a jQuery .hide method, but obviously if the images are still being shown regardless of whether the div is there or not, that’s not going to work.

If I comment out the div #supersized (so not the second one) then nothing is displayed at all.

Thus meaning I guess, that for whatever reason, the images in the second slide array are still connected to #supersized and not #supersized2…

rpkamp · December 4, 2010, 2:09pm

If you are not showing both supersized elements initially, why do you want to load them both initially?

Could you please describe what you’re trying to achieve exactly? i.e. what is shown initially, what action(s) can a visitor perform related to the supersized elements, etc.

Genjutsushi · December 4, 2010, 3:01pm

Ok, so when the page loads I would like the images in the first slide array to appear.

When a link is clicked, the first array is replaced by the images in the second array.

I was hoping to achieve this by:

<script type="text/javascript">
$(document).ready(function() {
   
   $('#supersized2').hide();
   
   });
</script>

using something like this to hide the second array on page load but then



$('a.background').click(function() {

$('#supersized2').show('fast');

return false;

	});

using that to then display the second set of images when the link is clicked. As I say, I don’t seem to be able to hide #supersized2 without commenting out the jQuery for it.

Genjutsushi · December 4, 2010, 10:23pm

Has anyone got any ideas on this, please?

I’ve been trying to resolve this all day and I’m getting nowhere.

Instead of using .hide I’ve also been trying to .append and .remove functions, again my lack of jQuery knowledge is letting me down.

Any input appreciated.