Results 1 to 4 of 4

Thread: Featured Image Zoomer | Thumbnails & Options Box

  1. #1
    Join Date
    Aug 2013
    Location
    Oregon
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Featured Image Zoomer | Thumbnails & Options Box

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm (also referencing: http://home.comcast.net/~jscheuer1/s...ivepersist.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?

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    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):

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

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

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

    Code:
    <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:

    Code:
    			<!--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):

    Code:
    					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:

    Code:
    				<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:

    Code:
    				<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?
    Last edited by jscheuer1; 08-09-2013 at 12:23 PM. Reason: additional notes
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    JamesArtVille (08-09-2013)

  4. #3
    Join Date
    Aug 2013
    Location
    Oregon
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much for the detailed reply!

    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.

  5. #4
    Join Date
    Aug 2013
    Location
    Oregon
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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!

Similar Threads

  1. Replies: 4
    Last Post: 05-03-2013, 01:53 PM
  2. Featured Image Zoomer
    By vwphillips in forum Submit a DHTML or CSS code
    Replies: 14
    Last Post: 11-12-2012, 12:28 PM
  3. Featured Image Zoomer
    By fleance in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 04-26-2012, 12:02 AM
  4. Resolved Featured Image Zoomer conundrum
    By Franzal in forum Dynamic Drive scripts help
    Replies: 9
    Last Post: 12-03-2010, 09:59 PM
  5. Resolved Featured Image Zoomer
    By jfrene in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-31-2010, 06:22 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •