Featured Image Zoomer | Thumbnails & Options Box

[JamesArtVille]

1) Script Title: Featured Image Zoomer (now w/Multi-Zoom) v2.2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm (also referencing: http://home.comcast.net/~jscheuer1/side/demos/multizoom/demoactivepersist.htm)

3) Describe problem: The Multi-Zoom feature works great with thumbnails. I also have an options box that corresponds to the thumbnails (it makes it easier to the customer to know what pattern they are purchasing). Unfortunately, when the selection box is used instead of the thumbnails being clicked, the magnified zoom box does not change. This isn't a flaw in the script, but I've been trying without success to make it correspond accordingly. It was hard enough for me just to get the select options box to update after clicking a thumbnail in the first place. I am new to javascript, and I've learned so much from Dynamic Drive's tutorials and scripts.

Here is the page with the script: http://www.gunskins.com/products/reef-slayer-camo.html.

An alternative that I considered was to use the single image zoomer script (the one that uses the 'largeimage' definition) and putting a variable as the value for largeimage (ex: largeimage = x). Then have a separate function that is called from 'onclick' for the thumbnails and 'onchange' for the selection box that re-defines the 'x' variable with the appropriate url of the large image. But I was not successful in this attempt also. Is it possible to update a variable in the image zoomer function definitions list, and have it reflect in real time on the same page?:confused:

If anybody is bold enough to look at my page's source and give me advice/critique, I much appreciate it. I really just want to know if my inquiry is even possible. It would save me lost of time and effort if I knew either way.

Thanks.

[jscheuer1]

You are missing the loading image for the multizoomer script (from multizoom.js):


var featuredimagezoomer = { // global options for Featured Image Zoomer:
loadinggif: 'spinningred.gif', // full path or URL to "loading" gif
magnifycursor: 'crosshair', // value for CSS's 'cursor' property when over the zoomable image
statusmessage: 'Current Zoom: ', // with below line, messages shown for variable zoom
usemousemessage: '<div style="font-size:80%">Use Mouse Wheel to Zoom In/Out</div>'
};

You can download it from the demo page or use your own.

On to your question. First backup everything in case there's a problem, then -

Get rid of this (it's not being used):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Change:


<select id="pattern-select" onchange="changeCamo2(this.value)">

to:


<select id="pattern-select" onchange="changeCamo2(this.value, this.options.selectedIndex)">

Move this:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

to just before the first changeCombo function:


<!--SCRIPTS-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script>
function changeCamo(option)
{
var path = "/views/i . . .



Edit the changeCombo2 function like so (or copy this one and replace the existing one with it):


function changeCamo2(option, index)
{
var path = "/views/images/products/5-reef-slayer-camo-";
//document.brand_image.src = path+option+"-medium.png";
jQuery('.productImgLg.thumbs a').eq(index).trigger('click');
document.getElementById('pattern-select').value = option;

var pattern = document.getElementById("pattern-select").value;
if (pattern == 'none')
{
document.getElementById('results').innerHTML = '<span style="font-weight: bold; color: #990000; size: 1.3 em; padding: 10px;">Please Select a Pattern</span>';
}
else
{
document.getElementById('results').innerHTML = '<button onclick="myFunction()" type="submit">Add to Cart</button>';

}

}



Though not required, I'd advise changing the init:


<script type="text/javascript">
jQuery(document).ready(function($){
$('#productImgLg').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
speed: 500, // duration of fade in for new zoomable images (in milliseconds, optional) - new
descpos: true, // if set to true - description position follows image position at a set distance, defaults to false (optional) - new
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true //<-- No comma after last option!
});
})

</script>



to:


<script type="text/javascript">
jQuery(document).ready(function($){
$('#productImgLg').addimagezoom({ // multi-zoom: options same as for previous Featured Image Zoomer's addimagezoom unless noted as '- new'
speed: 500, // duration of fade in for new zoomable images (in milliseconds, optional) - new
disablewheel: true, // if set to true mousewheel will not shift image position while mouse is over image - new
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true //<-- No comma after last option!
});
})

</script>



Because the description feature is not being used, and the disablewheel feature makes sense in this situation, as it prevents the mousewheel from getting you off of the image while you're viewing it.

The browser cache may need to be cleared and/or the page refreshed to see changes.



Some additional notes:

The results div shows nothing on page load, but no pattern is selected. Perhaps it should say "Please Select a Pattern".

The quantity select is in a form that gets submitted, but the pattern select isn't in that or any form. How will you know which pattern was selected?

[JamesArtVille]

Thank you so much for the detailed reply! :D

I will update my code and tell you the results. You're right, the pattern select is not in a form. I was going to work on that next.

I REALLY appreciate it, John, You sure know your stuff.

[JamesArtVille]

It works perfectly! And thank you again for the additional suggestions. You are a life saver. Thank you so much for your generous response and for all the amazing scripts you provide to the world!