Odd issue with jquery variables

[richrock]

I've got a jquery plugin to zoom on images, which works great.  However, as you would hover over a series of thumbnails, another script switches the image.

 

I've passed that through a hidden element (a bit of an ugly hack, but it works) however, I'm stumped on the last part.  Here's my code so far:

 

					<script type="text/javascript">
					var stinky = jQuery.noConflict();

					var img_url = document.getElementById("null_image");
					alert(img_url);
					stinky(document).ready( function() { 
						// Magnifier
						stinky('#main_image').addimagezoom({
							zoomrange: [6, 6],
							magnifiersize: [520,384],
							largeimage: ,
							cursorshade: true
						});
					});
				</script>

 

The addimagezoom utilises jquery, and works on the primary image - but I want to make the largeimage option variable based on the innerHTML value of null_image. 

 

I tried using the var img_url, adding document.getElementById and also by trying +img_url+.

 

Any ideas or is this possible -to get img_url into the largeimage: '(variable here)',

 

[haku]

You didn't actually say what your problem was. But I'm guessing that it's not working, and I'm suspecting it's not working because this line of code:

 

var img_url = document.getElementById("null_image");

 

Is outside your $(document).ready() function, which means it's being executed before your document is ready, and most likely before that element exists. Move it inside your $(document).ready() function.

 

By the way, you can get around the jQuery conflict like this (so you don't have to use 'stinky'):

 

(function($)
{
  // your code goes in here. For example:
  $(document).ready(function()
  {
    alert("the document is ready");
  });
}(jQuery));

 

By doing this, the $ symbol is only available inside your function, and is known as jQuery outside your function, which will prevent any conflicts, and not require you to use stinky.

[richrock]

Thanks for the reply...

 

When I hover over the series of thumbnails that another script would generate, they will be inserted via a pre-existing piece of Javascript that changes the image.

 

The addimagezoom function does work on the initial image, but not on the changed images.  I tried to get the url of the images, hence var img_url = document,.....etc.

 

I'm using noConflict as there is a ton of other jquery stuff going on with this site...

 

What I'm trying to do is get that var img_url to change the largeimage: <variable here>, which only seems to work on fixed strings rather than a dynamic item. 

 

Hopefully that makes sense?

[haku]

jQuery won't conflict with itself, only with other libraries. And either way, you don't need to use noConflict() if you use the wrapper I showed you. The wrapper is also nice because it insulates you against errors in other scripts that can crash all your scripts (without the wrapper).

 

But anways, to get to your point, if you have dynamically added content that you want a hover listener on, you need to do one of two things:

 

1) Manually (through code), add the listeners AFTER that content has been added to the page.

2) Use one of the following:

.live() (jQuery 1.3)

.delegate() (jQuery 1.4.2)

.on() (jQuery 1.7)

 

If you are using less than jQuery 1.3, you will need to go with option 1. If you are using anything after jQuery 1.3, then pick the one furthest down my list that you can, as each of the functions is preferred over those that come before it.