designer76 Posted August 5, 2012 Share Posted August 5, 2012 Hi, I do not have much jQuery experience at all, so please bear with me. What I need is for dropdown (select) boxes to change a main image as well as a set of thumbnails being able to do the same. I have some code below that uses buttons and thumbnails, but I can?t use buttons, it needs to be dropdowns (select) boxes and thumbnails. For example: I will have thumbnails and dropdown (select) boxes on one page. The thumbnails will be red, blue and green and the dropdown (select) box will have three options in them that say red, blue and green. When I click on the green thumbnail the thumbnail will be highlighted/selected, the dropdown (select) box will also change to the green option and the main image would change to the green image. And in reverse, if I click on the green option in the dropdown (select) box, the thumbnail that is green will be highlighted/selected and the main image would change to the green image. I don't know how complicated this is, and for the life of me, I can't seem to get this to work. The important thing is that the thumbnail, image and dropdown always update/be in sync at the same time. I can't have the selected thumbnail and main image showing green while the dropdown box says red. I have posted the code below that has the buttons in it (which I do not want, they are just there as an example) along with everything else. Also, here is a link to the show as an example exactly what I am looking to do: http://www.abercrombie.com/webapp/wcs/stores/servlet/ProductDisplay?catalogId=10901&storeId=10051&langId=-1&categoryId=12215&parentCategoryId=%5bLjava.lang.String%3b%4061db61db&topCategoryId=&productId=1002193 Thanks in advance for any help given. <script> var $thumbs; jQuery(function($){ $thumbs = $('.zoom_thumbnails').find('li a'); $thumbs.each(function (i){ $(this).bind('click', {src: $(this).attr('href'), ob: $(this).find('img')}, function (e){ //Add your zoom settings here $('#zoom_container').smoothZoom('destroy').css('background-image', 'url(zoom_assets/preloader.gif)').smoothZoom({ image_url: e.data.src, width: 512, height: 384, button_ROUND_CORNERS: false, control_BOX_MARGIN: 4, /****************************************** Enable Responsive settings below if needed. Max width and height values are optional. ******************************************/ responsive: false, responsive_maintain_ratio: true, max_WIDTH: '', max_HEIGHT: '' }); $thumbs.each(function (){ $(this).find('img').removeClass('thumb_highlight').addClass('thumb_normal'); }); e.data.ob.addClass('thumb_highlight'); return false; }) .find('img').addClass('thumb_normal'); }).eq(0).trigger('click'); }); </script> </head> <body> <div id="zoom_container"></div> <div style="width: 512px; text-align:center"> <ul class="zoom_thumbnails"> <li><a href="images/gallery_images/main1.jpg" data-size="500,400"><img src="images/gallery_images/thumb1.jpg"></a></li> <li><a href="images/gallery_images/main2.jpg" data-size="500,400"><img src="images/gallery_images/thumb2.jpg"></a></li> <li><a href="images/gallery_images/main3.jpg" data-size="500,400"><img src="images/gallery_images/thumb3.jpg"></a></li> <li><a href="images/gallery_images/main4.jpg" data-size="500,400"><img src="images/gallery_images/thumb4.jpg"></a></li> </ul> </div> <button type="button" onClick="$thumbs.eq(0).trigger('click')" >Show Image 1</button> <button type="button" onClick="$thumbs.eq(1).trigger('click')">Show Image 2</button> <button type="button" onClick="$thumbs.eq(2).trigger('click')" >Show Image 3</button> <button type="button" onClick="$thumbs.eq(3).trigger('click')">Show Image 4</button> </body> Quote Link to comment Share on other sites More sharing options...
scootstah Posted August 6, 2012 Share Posted August 6, 2012 I made this quick JSFiddle (http://jsfiddle.net/vrUdd/) which (I think) does what you wanted. Hope that helps. Quote Link to comment Share on other sites More sharing options...
designer76 Posted August 6, 2012 Author Share Posted August 6, 2012 I made this quick JSFiddle (http://jsfiddle.net/vrUdd/) which (I think) does what you wanted. Hope that helps. Thanks for the help! That does 100% exactly what I wanted. The only problem is that I am having issues integrating it into the script that I posted already. The one that I posted already handles the thumbnails changing a main image, I just needed to integrate the dropdowns in there as well (exactly as you have it). I need to be able to integrate the new code into the my original script because it allows you to zoom in, pan around the image, etc... so that code needs to stay. Is this possible? I appreciate you bearing with me, as I said, I am new to jQuery and this script is one that I found that I am trying to modify to fit what I need. Thanks in advance for any further help given. Quote Link to comment Share on other sites More sharing options...
scootstah Posted August 6, 2012 Share Posted August 6, 2012 Well, I would recommend putting the code you already have into a function. That way all you have to do is call it from the select event. Alternatively, you could probably just bind the select.change event to the thumbnail.click event. Quote Link to comment Share on other sites More sharing options...
designer76 Posted August 6, 2012 Author Share Posted August 6, 2012 Well, I would recommend putting the code you already have into a function. That way all you have to do is call it from the select event. Alternatively, you could probably just bind the select.change event to the thumbnail.click event. I'm still confused, LOL. I sent you a PM sir! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.