jQuery Array?

JavaScript
21

Okay, so we have established that passing options directly to the script doesn’t really work, so you need to use the $.fn.resizer.options

How about you try this:

Set the values for $.fn.resizer.options to the values you want for the initial supersized.
Then, when a user clicks the link you mentioned (a.background) set $.fn.resizer.options to the new values, and call .supersized() again on the div that is already supersized to initialize supersized again, but with the new values.

Does that make sense?

22

Sorry, I’m still not quite with you. Could you provide an example, please?

23

Okay, something along the lines of:


$(document).ready( function() {

  $.fn.resizer.options=[I]{options for the initial resizer}[/I]
  $('#supersized).supersize();

  $('.background a').click( function() {
    $.fn.resizer.options=[I]{options for the alternative (second) resizer}[/I]
    $('#supersized).supersize();
  });

});

That way the supersized div will be initialized with the first settings, but when a visitor clicks the link (.background a) the resizer will be re-initialized with the new settings.
Note that you need to supply all parameters to the second options, because it will replace the first options, not just replace the parts you want to change.

Does that make sense?

BTW. You can undo the changes you made to the plugin (adding the options parameter) since you don’t need that anymore.

24

Right, so now I’ve got:



<script type="text/javascript">   
   
   
   $(document).ready( function() {

 $.fn.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_001.jpg' },
					{image : 'img/item_002.jpg' },
					{image : 'img/item_003.jpg' },
					{image : 'img/item_004.jpg' }
       ]
 
 
 
 $('#supersized).supersize();

 
 
 
 
 
 
 $('.background a').click( function() {
   $.fn.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_005.jpg' },
					{image : 'img/item_006.jpg' },
					{image : 'img/item_007.jpg' }
       ]
	   
	   
   
   
   
   
   $('#supersized).supersize();
 });

});



<a class="background">click</a>

</script>

This presents me with no images, and in addition an “invalid label” error, though this is almost certainly syntax…

I have removed the options parameters.

25

You forgot the opening and closing brackets for the options object and the <a> shouldn’t be inside the <script> :



<script type="text/javascript">   
   
   
   $(document).ready( function() {

 $.fn.supersized.options= [COLOR="Red"][B]{[/B][/COLOR]
 
 
 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_001.jpg' },
					{image : 'img/item_002.jpg' },
					{image : 'img/item_003.jpg' },
					{image : 'img/item_004.jpg' }
       ]
 
 [COLOR="Red"][B]}[/B][/COLOR]
 
 $('#supersized).supersize();
 
 
 $('.background a').click( function() {
   $.fn.supersized.options= [COLOR="Red"][B]{[/B][/COLOR]
   
   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_005.jpg' },
					{image : 'img/item_006.jpg' },
					{image : 'img/item_007.jpg' }
       ]
    [COLOR="Red"][B]}[/B][/COLOR]	   
	   
   
   $('#supersized).supersize();
 });

});

</script>
<a class="background">click</a>
26

That’s all been corrected and once more I’ve got the initial set of images, but the second set do not load on click…

Would it be easier if I uploaded it somewhere?

27

I’ve PM’d you a link to the site, I hope this is ok. I can’t make it public at this time.

Thank you! :slight_smile: