I have a WooCommerce setup where I have a gallery. One is big image and others are thumbnails.
What I want to do is when someone clicks on the thumbnail, it replaces the big image and the big image comes there at the thumbnail. How do I do that? Any JavaScript guru here to help?
Here is the full HTML output.
<div class="images product-gallery ">
<div class="big_image">
<a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
</div>
<div class="thumbnails">
<a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
<a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
<a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
<a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
</div>
<div class="clear"></div>
</div>
I don't need that <a href=" part on image. So, you can ignore them.
I have very little knowledge in JavaScript, so please help me out. All I want is when someone click on any of the thumbnail image, the thumbnail image replaces the big image and the big image replace the clicked thumbnail. So basically the alter positions.
Please pardon me for my poor English.
Jquery
You can use src attr() in onclick event
$("#target").attr("src","newUrlOfTheImg");
or with plain java script
document.getElementById("target").src="newUrlOfTheImg";
And have look once
document.getElementById("target").src="myNewImage.extension";
Pure javascript alternative that you can use on the onclick event.
$(document).ready(function() {
$('.zoom').on('click', function() {
$('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
});
});
You should try this out, however it would be better to have separate thumbnail and big-images files for loading purposes.
Related
So I have a series of images in my image slider from Fotorama. My problem is that
there is a very slight delay when transitioning between different slides for the first time, I imagine because my images are all quite large. Is there any way to easily fix this through javascript or html/css? I read their documentation regarding 'lazy loading' but I'm not sure if that is really applicable for what I want to do. Any advice would be appreciated.
<div class="fotorama"
data-margin="0"
data-transition="slide"
transition-duration="0ms"
data-keyboard="true"
data-swipe="true"
data-click="false"
data-width="100%"
data-height="95%"
data-ratio="3/2">
<img src="images/bgardenflower2.jpg">
<img src="images/yellowflower.jpg">
<img src="images/lushflower.jpg">
<img src="images/flowerbee.jpg">
<img src="images/fly.jpg">
<img src="images/bgardenflower1.jpg">
<img src="images/toad.jpg">
<img src="images/algae.jpg">
<img src="images/lushscape1.jpg">
<img src="images/westvirginia1.jpg">
<img src="images/westvirginia2.jpg">
<img src="images/duskbridge.jpg">
<img src="images/lighthouse.jpg">
</div>
Using photoshop you can save images in webformat, so the images size will be reduced and load quickly...
I have some code I have written for a image gallery on my page, "gallery.aspx". The scenario is that I have an external aspx page with different links. When I click on one of those link I want to redirect to this image gallery but to a specific image.
For e.g I have a page called "home.aspx" with a link called "img2". When I click on "img2" I want to open up this image gallery(which sits on a page called "gallery.aspx"), but I want tab 2 of the gallery to be opened so 2nd image.
I can get it to work on my html pages using (url/gallery.html?img=img2) but I would really like to be able to do it on my sharepoint aspx page.
Thank you in advance.
My HTML code is as follows:
<div class="gallery" align="center">
<div class="thumbnails">
<img name="ift" onclick="preview.src=img6.src" id="img6" src="IFT.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img1.src" id="img1" src="Clear.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img2.src" id="img2" src="Agile.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img3.src" id="img3" src="AllForOne.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img4.src" id="img4" src="Decide.png" alt="Image Not Loaded"/>
<img onclick="preview.src=img5.src" id="img5" src="Possibilities.png" alt="Image Not Loaded"/>
</div>
<br/>
<div class="preview" align="center">
<img id="preview" src="IFT.png" alt="No Image Loaded"/>
</div>
Aspx also support HTML. You could just put these code to your ASPX page. No changes would be required.
I made a menu with images.
I have 2 divs with 3 images inside each so i make it to look like a menu. When I click the above image the image under it changes to highlight the above.
The JavaScript works but if I click the images many times some times its not working properly.
So how can I be certain that JavaScript wont lag? I cant figure out if its coding problem or placement or anything else...
By not working Properly i mean that if i click the images a lot of times some times the image that should change to highlight the top image arent changing i dont know if its my computer or not..
Here is Code http://codepen.io/DarkLord22/pen/Ghwbj
<div class="Menu1">
<div id="Menu1_1">
<img src="images/menu1/Landing_Campaign_Smartwatch_menu1_1.jpg" width="395" height="300" onclick="changeImage1() , removeImage1()"></div>
<div id="Menu1_1">
<img src="images/menu1/Landing_Campaign_Smartwatch_menu1_2.jpg" width="395" height="300" onclick="changeImage2(), removeImage2()">
</div>
<div id="Menu1_1">
<img src="images/menu1/Landing_Campaign_Smartwatch_menu1_3.jpg" width="395" height="300" onclick="changeImage3(), removeImage3()">
<div id="Menubluebuttondiv">
<div id="Menubluebutton">
<img src="images/Landing_Campaign_Smartwatch_blue_arrow.jpg" width="395" height="42" id="toChange1"></div>
<div id="Menubluebutton">
<img src="images/Landing_Campaign_Smartwatch_Bluearrow2.jpg" width="395" height="42" id="toChange2">
</div>
<div id="Menubluebutton">
<img src="images/Landing_Campaign_Smartwatch_Bluearrow2.jpg" width="395" height="42" id="toChange3">
</div>
</div>
Is it possible to put an image onto a webpage that changes depending where the cursor is?
Current Code:
<body onload="MM_preloadImages('Images/Home.png')">
<div class="HeaderWrapper">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Image2" width="1300" height="150" border="0" id="Image2" />
</a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Home" width="1300" height="150" border="0" id="Home" />
</a>
</div>
I was thinking it could be modified some how to use this?
<area shape="rect" coords="434,54,495,83" href="index.php" target="index.php" alt="index" />
Search how to respond to the hover event.
Search how to toggle a CSS class on an HTML element.
When the image is hovered, toggle the class of the HTML element such that a different CSS class is used. This different CSS class will have a different image.
It might be easier to use jQuery for this.
I would like to replace images on click but also have the replaced image click to a lightbox. Here is my example where the first image has the lightbox: http://www.artdesigngroup.co/products/test.html
My thought is that I need to apply the "display" ID on the surrounding div and replace the images within this div. But how do I do this and create the lightbox?
Thank You.
I would rethink your structure for handling this. Most of what you are doing can be handled with straight jQuery instead of rolling your own swap functions. When you ask your questions, including a Fiddle is a great way to get an answer faster. Note that I am using jQuery 1.7's prop method here which you should be using instead of attr.
http://jsfiddle.net/txbqX/3/
jQuery to get what you want
//when main image is clicked, show it in colorbox
$('#foo a').colorbox();
//when thumb is clicked, set main image to it
$('div#thumbs img').click( function() {
$('#foo a').prop('href', $(this).prop('src'));
$('#foo img').prop('src', $(this).prop('src'));
return false; //stop link from navigating
})
Simplified HTML
<div id="foo" >
<a href="http://www.artdesigngroup.co/images/tv-frames/01.jpg">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="304" height="304" name="Display" id="display" />
</a>
</div>
<br />
<div id="thumbs">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/02.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/03.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/04.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/05.jpg" width="56" height="56" />
</div>