We should let the multizoom script take care of things, rather than try to duplicate its workings because there's a lot that has to be changed besides just the src attributes of an image or two. Oh, and you're right about triggering a click on a link, in many cases it's blocked or even impossible to begin with. That's not what I was talking about. I want jQuery to trigger (execute) the event that it previously assigned to the thumbnail links for when they are clicked, not to actually click them.
OK, I've found something workable for that page. It depends upon somethings about that page being constant across the various pages you want to try this on. If you don't understand one or more of these conditions, ask questions. If you know they will not be met, let me know which one(s) and we can try to find a workaround, there probably will be one.
The first condition is that there's an array on the page called images. The comments show that it is generated by aspx, that's fine. The images in it are repeated and there are only four distinct ones. these four are the same images that the thumbnails load into the mid-sized image. Now there can be more or less than four distinct images, but they all must be ones that the thumbnails would load. The ones the thumbnails will load are the href's of the thumbnail links. So there must be one thumbnail link for each distinct image listed in the array.
Second, the generated images array lists the full URL to these images, while the href attributes of the thumbnail trigger links only list the relative path. This is fine as long as the page has a base href tag on it:
Code:
<BASE href="http://www.rockymountaintrail.com/">
like this one does that completes the href in the same way that these images are listed in the generated images array. Alternatively, the full URL can be listed as the href attribute for the thumbnail trigger links. The important thing is that if the images are listed one place with the www. part and the href resolves without it, there will be problems.
Third, the id of the drop down (ddlOptions), and the class names of the thumbnail containers (imgProduct thumbs) cannot change.
Keeping that in mind, here's what to do. Remove or comment out this line:
Code:
imgTag.src = images[myDD.selectedIndex-1];
from the change_dd() function.
Then using a text only editor like NotePad, edit the ZoomTool.js file adding the highlighted as shown (scroll the code block to see it):
Code:
// Multi-Zoom Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// requires: a modified version of Dynamic Drive's Featured Image Zoomer (w/ adjustable power) (included)
/*Featured Image Zoomer (May 8th, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
// Feb 21st, 2011: Script updated to v1.5, which now includes new feature by jscheuer1 (http://www.dynamicdrive.com/forums/member.php?u=2033) to show optional "magnifying lens" while over thumbnail image.
// March 1st, 2011: Script updated to v1.51. Minor improvements to inner workings of script.
// July 9th, 12': Script updated to v1.5.1, which fixes mouse wheel issue with script when used with a more recent version of jQuery.
// Nov 5th, 2012: Unofficial update to v1.5.1m for integration with multi-zoom (adds multiple images to be zoomed via thumbnail activated image swapping)
// Nov 28th, 2012: Version 2.1 w/Multi Zoom, updates - new features and bug fixes
var featuredimagezoomer = { // the two 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
};
//////////////// No Need To Edit Beyond Here ////////////////
jQuery.noConflict();
(function($){
jQuery(function($){
$('#ddlOptions').change(function(){
var rawindex = this.options.selectedIndex,
href = images[rawindex];
$('.imgProduct.thumbs a').each(function(){
if(this.href == href){$(this).trigger('click');}
});
});
});
$('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');
$.fn.multizoomhide = function(){
return $('<style type="text/css">' . . .
Save and use that version. That's it!
The browser cache may need to be cleared and/or the page refreshed to see changes.
Notes:
You don't need to have a separate class="imgProduct thumbs" div for each thumbnail, they can all go in one. But it's OK how you have it.
Ordinarily the code I'm having you put inside the main multizoom script could go anywhere, but because of the way the page is organized, it's best to put it there. It might not work if it goes somewhere else. It will not hurt pages that have no drop down.
Image Zoom
Reply With Quote
Bookmarks