I'm looking for a javascript option that will allow me to mouseover a thumbnail image to replace the "large" image. The trick here is using the anchor href from the thumbnail link as the large image source. I need this to work for multiple instances.
The <img src="large1.jpg"> etc. can be removed if that helps
Below is a simplified version of the HTML code I am using. This code cannot be changed.
Every id and class can be unique.
<div class="image-1">
<img src="large1.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="large1.jpg" title="1"><img src="small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="large2.jpg" title="2"><img src="small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="large3.jpg" title="3"><img src="small3.jpg" alt="image 1"/></a>
</div>
...
<div class="image-2">
<img src="large2.jpg">
</div>
<div id="thumbs">
<a id="thumb_1" href="another_large1.jpg" title="1"><img src="anout_small1.jpg" alt="image 1"/></a>
<a id="thumb_2" href="another_large2.jpg" title="2"><img src="another_small2.jpg" alt="image 1"/></a>
<a id="thumb_3" href="another_large3.jpg" title="3"><img src="another_small3.jpg" alt="image 1"/></a>
</div>
...
check this solution
http://jsfiddle.net/dtdaynjp/
add to all "large" image unique class, image-1, image-2, image-3..
for each thumbs link add class similar like appropriate large image: thumb-image-1, thumb-image-2, thumb-image-1...
add this jQuery code:
$(function() {
$(".mouseover a").mouseover(function(){
var src=$(this).attr('href');
var classs=$(this).attr('class');
classs=classs.substr(6);
$('.'+classs).find('img').attr('src',src);
})
})
I would just use the CSS :hover selector. Then you can add animations and other cool things to your images.
EXAMPLE HERE.
Related
I tried a course for JS that made a Hover Gallery project. 5 thumbnails were shown in a line and whichever you hovered, was displayed in a bigger size under them.
Now, the code didn't contain any JS in it, only HTML and CSS. Here it is:
<div class="slider">
<img class="arrow" onclick="sliderBackward()" src="img/left-arrow.png"> // later added
<img onmouseover="preview.src=img1.src" name="img1" class="thumbnail" src="img/1.jpg" alt="1">
<img onmouseover="preview.src=img2.src" name="img2" class="thumbnail" src="img/2.jpg" alt="2">
<img onmouseover="preview.src=img3.src" name="img3" class="thumbnail" src="img/3.jpg" alt="3">
<img onmouseover="preview.src=img4.src" name="img4" class="thumbnail" src="img/4.jpg" alt="4">
<img onmouseover="preview.src=img5.src" name="img5" class="thumbnail" src="img/5.jpg" alt="5">
<img class="arrow" onclick="sliderForward()" src="img/right-arrow.png"> // later added
</div>
<div class="preview">
<img name="preview" src="img/1.jpg">
</div>
My question:
Is using the name attribute this way alright? I think that this mini project is a good example to show features but not one, that should be put in practise in bigger projects. Is that right?
Goal:
I wanted to show the further added thumbnails when I click on an arrow button and hide the other end of the list. (It would always show 5). For this I'm thinking if I should just delete the name attributes and approach it only through JS.
I think its better practice to use id rather than name to create unique identifiers. Name is often used in forms (I believe that's really what its for) and you could have multiple inputs with the same name. ID on the other hand is a very handy way to identify/select elements within the dom and should be unique.
That being said, there is nothing against you using name in this manner, its just not what its for.
I am relatively new to javascript and I'm looking for the best possible way to explain this problem. Hope anyone can give me advice on this
I have this :
<div class="col-md-4">
<img src="">
<img src="">
<img src="">
</div>
When Clicked on img it's redirected to the stuffedd.html page. However this contains 2 columns with images. A vertical thumbnail column and a middle column with large image.
Like this:
<div class="middle containerscroll">
<img src="" id="Mdrie" class="img-responsive ">
<img src="" id="Mvier" class="img-responsive ">
<img src="" id="Mvijf" class="img-responsive ">
</div>
div class="col-md-9 hidden-xs hidden-sm">
<img src="" id="drie" class="img-responsive single">
<img src="" id="vier" class="img-responsive single">
<img src="" id="vijf" class="img-responsive single">
</div>
I got this far with Jquery :
$(document).ready(function(){
"use strict";
$( ".single" ).hide();
$( "#Mdrie" ).on('click',function() {
$('#drie').toggle();
$(".single").not('#drie').hide();
});
How do I make the stuffedd.html open with the image I clicked on in the second div (all the images with class .single)
Do I declare a variable which I fill in as:
$( "var" ).show();
website is: www.damondebacker.com if you need to see it.
If I understand the question, the second page needs to be aware of what you clicked on the previous page, consider adding some identifier into the URL that identifies the image:
<img src="">
Then the second page has a spot to extract it from. If you don't want it in the URL you could set a cookie or use the LocalStorage object.
Try to transfer the ID of the picture on the first page with your URL. So you click on the Image and the link is something like /stuffed.html?id=drie. Later on your stuffed site, you get the parameter with jquery in a variable and show exactly this image. Here is a short tutorial for URL Parameters and jQuery
I like to know how to show a GiF file after clicking a JPG file just like in 9Gag.com
I'm using timthumb.php for JPG image.
https://code.google.com/p/timthumb/
Here is the code below
<div class="images">
<img alt="Image Title" src="timthumb.php?src=MyImage.jpg&w=500&q=100">
</div>
I want to show the original image after clicking this JPG. Can anyone point me out the way to do this using jQuery or JavaScripts.
Note: This is a image loop so there can be more then one image.
Really appropriate your help.
This can be done with the jQuery library.
HTML
<div class="images">
<img class="thumb" alt="Image Title" src="http://i.stack.imgur.com/ruR4z.png" gif="http://ourbunkers.0catch.com/grunt.gif"/>
<img class="thumb" alt="Image Title" src="http://i.stack.imgur.com/ruR4z.png" gif="http://ourbunkers.0catch.com/grunt.gif"/>
<img class="thumb" alt="Image Title" src="http://i.stack.imgur.com/ruR4z.png" gif="http://ourbunkers.0catch.com/grunt.gif"/>
</div>
Javascript
$(".thumb").click( function(){
$(this).attr("src", $(this).attr("gif"));
});
http://jsfiddle.net/PP42Q/8/
I'm having trouble using Fancybox on my website.
These are two (out of 9) of my divs, with different images in it. The thing is, whenever I click on any of the images, it shows the same image everytime. So when I click on the 2nd image, it shows the first image, just like all of the other divs.
<a id="single_3" href="Foto's/symposium1_groot.png" title="Test">
<div id="symposium1"> <img src="Foto's/symposium1.jpg" alt="" /></div></a>
</a>
<a id="single_3" href="Foto's/symposium2_groot.png" title="Test">
<div id="symposium2"> <img src="Foto's/symposium2.jpg" alt="" /></div></a>
You need to make ids unique. Also having 2 closing </a> tags for the first block probably isn't good for you.
Try:
<a id="single_3" href="Foto's/symposium1_groot.png" title="Test">
<div id="symposium1"> <img src="Foto's/symposium1.jpg" alt="" /></div>
</a>
<a id="single_4" href="Foto's/symposium2_groot.png" title="Test">
<div id="symposium2"> <img src="Foto's/symposium2.jpg" alt="" /></div>
</a>
I have this for changing the background image of div.fullscreen:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover="document.images['bigPic'].src='http://josefsipek.net/docs/s390- linux/hercules-s390/ssh-dasd1.png';"
width="72" height="54" alt="Item ksc1" />
</a>
</div>
However, is there a way to change the background image of a table on hover of another image link?
Sure, look at an example here.
This is done by giving the img an id and the table an id. Then we listen for when the mouse is over the img and when it does, change the background-image of the table.
Only want to use inline JavaScript? Use this:
<div id="swatches">
<a href="http://www-03.ibm.com/ibm/history/exhibits/storage/images/PH3380A.jpg">
<img src="http://www.wmagency.co.uk/wp-content/uploads/2011/04/test.jpg"
onmouseover='document.getElementById("table_id_here").style["background-image"]="url(\'http://www.gravatar.com/avatar/\');'
width="72" height="54" alt="Item ksc1" />
</a>
</div>