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>
Related
Hello I have this code:
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">Content of popup</div>
And I have this image:
<img src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
</a><a href="tecnologia.html">
I want to know how to change the link on that image to do the same the button does, whats the syntax that I should use, so whenever I click the image it'd trigger the button action and remove the button itself
Thanks
<img onclick="document.getElementById('my-button').click()" src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
or
<img src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
You can use input type="image"
<input type="image" src="submit.gif" alt="Submit">
I have a page with a very long list of images and I'm looking to lazy load them. But instead of loading the images when they appear in the viewport, I want to load them in order of id when the page is ready. Is there any way to do this?
Here is my markup. My goal would be to load realimg1, realimg2, realimg3, etc in order.
<img src="loading.png" width="300" height="200" id="id1" data-src="realimg1.png">
<img src="loading.png" width="300" height="200" id="id2" data-src="realimg2.png">
<img src="loading.png" width="300" height="200" id="id3" data-src="realimg3.png">
<img src="loading.png" width="300" height="200" id="id4" data-src="realimg4.png">
<img src="loading.png" width="300" height="200" id="id5" data-src="realimg5.png">
Right now, I'm using this plugin just lazy loading images by replacing the src with data-src when the image come into the viewport. How would I do the same thing but do it on load in order of id instead of when they appear in the viewport?
I don't think you will find the lazy loading to be of any use as it's functionality is entirely directed at loading based on images appearing in the viewport.
Check this out:
Hi, this demo might be of interest to you
http://nettuts.s3.amazonaws.com/860_preloaderPlugin/index.html
and the corresponding tutorial is here:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/
it uses a jQuery plugin that is called like this:
<script type="text/javascript">
$(function(){
$("#gallery").preloader();
});
</script>
Where
<ul id="gallery" class="clearfix">
<li><p><img src="images/1.jpg" /></p></li>
<li><p><img src="images/2.jpg" /></p> </li>
<li><p><img src="images/3.jpg" /></p> </li>
<li><p><img src="images/4.jpg" /></p></li>
<li><p><img src="images/5.jpg" /></p> </li>
</ul>
source: http://wpquestions.com/question/showChrono/id/7959
<script>
function lazyLoader(id){
var images = document.getElementById(id).getElementsByTagName('img');
for(prop in images){
images[prop].setAttribute('src', images[prop].getAttribute('data-src'));
}
}
// should be called after document ready or load -
lazyLoader('lazy_loader');
</script>
You can use the justlazy plugin, which prevents to use external dependencies. It can load by id. You only have to provide the images to load.
For your images you can call the library as follows:
var placeholders = document.querySelectorAll(".some-class-of-images-to-load");
for (var i = 0; i < placeholders.length; ++i) {
Justlazy.lazyLoad(placeholders[i]);
}
The placeholders have to be in the following structure:
<span data-src="default/image" data-alt="some alt text"
class="some-class-of-images-to-load">
</span>
For SEO reasons you can use any other placeholder element.
how to prevent image wrap in responsive mode. A simple code like below is break to new line in responsive mode.
<img src="image1.jpg" style="float:left;" />
<img src="image2.jpg" style="float:left;" />
<img src="image3.jpg" style="float:left;" />
<img src="image4.jpg" style="float:left;" />
<img src="image5.jpg" style="float:left;" />
please help
Edit:
see this jsbin: http://jsbin.com/AhIwiCA/1/edit
If you want to prevent the images from wrapping, then add a white-space: nowrap; to the parent element and remove the style="float:left; from the images.
http://jsfiddle.net/myajouri/gqxxC/
Bootstrap has a class called inline I believe which may bring the images in line with each other, failing that you may need to trawl through the css to find the relevant css class to prevent this behaviour.
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.
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.