I find a jQuery image swap script and I use it this way:
Html:
<a href="#" class="product-catalog-thumb">
<img class="img-responsive" src="005.jpg" data-alt-src="005-2.jpg" >
<h2>Sterling Silver Pendants</h2>
</a>
js:
//Image Swap on hoover
var sourceSwap = function () {
var $this = $(this).find("img");
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$('img[data-alt-src]').each(function() {
new Image().src = $(this).data('alt-src');
});
$(".product-catalog-thumb").hover(sourceSwap, sourceSwap);
and it works fine.
Can anyone help me to add fade effect to this code, I want to fade images into another in swap process.
Related
I've been reading articles online, watching YouTube videos - I am lost. This is the last bit of code I have tried, which as probably changed by now as you read this. It looks so simple, I don't understand what I am doing wrong? My mind just will not grasp this. Any help? I am trying to replace the image (src) with the image in (id) when the mouse is over it. Right now I am really just trying to get an alert when I mouse over the image. Anything!
**** UPDATED CODE ****
THIS JUST IN! I'm an idiot. Javascript file wasn't directed properly, missing the sub folder. Still struggling, but now at least my rollover is working. palm to forehead
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Rollovers</title>
<link rel="stylesheet" href="styles/main.css">
<script src="js/rollover.js"></script>
</head>
<body>
<h1>Rollover Test</h1>
<ul id="rollover_test">
<li>
<img src="images/h1.jpg" alt="img1" id="images/h4.jpg" onmouseover="MouseOver('img1');" onmouseout="MouseOut('img1')">
</li>
<li>
<img src="images/h2.jpg" alt="img2" id="images/h5.jpg">
</li>
<li>
<img src="images/h3.jpg" alt="img3" id="images/h6.jpg">
</li>
</ul>
</body>
</html>
The Javascript:
var $ = function (id) {
return document.getElementById(id);
};
function MouseOver(id){
// I'm trying to figure out the syntax in here to swap the id and src tags
alert($("id").src);
};
function MouseOut(id){
alert("out");
}
window.onload = function () {
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
links = links[i];
image = new Image();
};
};
Actually, these simple three lines of code are enough to make it work.
$("img").on('mouseenter', function() {
$(this).attr("src", $(this).attr('id'));
});
img {
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rollover Test</h1>
<ul id="rollover_test">
<li>
<img src="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg" alt="Img1" id="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg">
</li>
<li>
<img src="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg" alt="Img2" id="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg">
</li>
<li>
<img src="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg" alt="Img3" id="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg">
</li>
</ul>
In your HTML the id attribute has been changed to data-id just because it's best to keep the id attribute for css identification.
by using mouseenter and mouseleave in cooperation the following snippet looks at each image as encountered and swaps its src attribute into a temporary data-temp attribute attached to that image.
Hopefully the snippet comments are self explanatory.
$("li").find('img').on({
mouseenter: function() {
$this = $(this); // get the current img object
var src = $this.attr('src'), // get the current src
id = $this.attr('data-id'); //get the alternative src
$this.data('temp', src); // store in a new temporary data attribute
$this.attr('src', id);
},
mouseleave: function() {
var temp = $(this).data('temp'); // lookup temp
$(this).attr('src', temp); // swap image back
}
})
/*
var $ = function(id) {
return document.getElementById(id);
};
function MouseRollover(img) {
alert("made it");
var oldIMG = $(this).attr("src");
var newIMG = $(this).attr("id");
};
window.onload = function() {
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i = 0; i < links.length; i++) {
links = links[i];
image = new Image();
}
//rollover
$("li").on('mouseenter', function() {
alert("yep");
});
}
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rollover Test</h1>
<ul id="rollover_test">
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSm2etjS8VnJRwuZA8ormtAyPrIt8x0twLr-APiGwrkcX8NXe3P" alt="Img1" data-id="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ-W40Oxb_QCTaGT9MVgTuXaDxacAKgChfvATaS9KffbHfGc16n">
</li>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTp6eZg_pJb0_NFxdaFYSnqMzPMJc-R_iwp2x8HarvdKzoNaCXv" alt="Img2" data-id="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwvO67upMvk1q3MicNCujQ67D2EgJf8HyVA36FqM9qrv2B4Mue">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREN8xal0JlNdcPcz-94kQqZ8t3uBWEfm3T4LWpPY5PhX7qndGp" alt="Img3" data-id="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT07dVJl5ghqji58Su7Gs9RuSuCgleBDUITx2Dngh3ibVWzLfde">
</li>
</ul>
* SOLVED *
Once I figured out that my javascript wasn't linked right, it was just a matter of playing with syntax. Super easy. I am an idiot.
HTML
<ul id="image_rollovers">
<li>
<img src="images/h1.jpg" alt="images/h4.jpg" id="img1" onmouseenter="MouseEnter('img1');" onmouseout="MouseOut('img1')">
</li>
<li>
<img src="images/h2.jpg" alt="images/h5.jpg" id="img2" onmouseenter="MouseEnter('img2');" onmouseout="MouseOut('img2')">
</li>
<li>
<img src="images/h3.jpg" alt="images/h6.jpg" id="img3" onmouseenter="MouseEnter('img3');" onmouseout="MouseOut('img3')">
</li>
</ul>
JAVASCRIPT
var $ = function (id) {
return document.getElementById(id);
};
function MouseEnter(id){
var img = $(id);
originalURL = img.src;
var newURL = img.alt;
img.src = newURL;
};
function MouseOut(id){
var img = $(id);
img.src = originalURL;
}
window.onload = function () {
var originalURL;
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
links = links[i];
image = new Image();
};
};
Works like a charm.
Thanks, all, for the tips and advice.
Is it possible to change the image source from the containing div? The images are dynamic and pulled from the database.
v = $"<div onmouseover=\"document.navIcon.src='/Images/White/{reader[2]}';\"
onmouseout=\"document.navIcon.src='/Images/{reader[2]}';\">
<img name=\"navIcon\" src=\"Images/{reader[2]}\"><br>{reader[1]}</div>";
That was my thoughts on how to do it but it doesn't appear to work as expected. I was able to get it to work when I put the onmouseover portion in the < img > however, I want it to change anywhere in the div, like over the reader[1] text, not just directly over the image.
Thoughts?
I just grabbed some images off google images. You can use this to refer to the current element.
<img
src='https://osu.ppy.sh/forum/images/smilies/50.gif'
onmouseover='this.src="http://4.bp.blogspot.com/-YrmTHhfMtFU/VJNbpDMHzgI/AAAAAAAAH8c/g3dJ1Q-QTrc/s1600/smile.png"'
onmouseout='this.src="https://osu.ppy.sh/forum/images/smilies/50.gif"'
/>
Edit..
This will change the image when you hover on anything with a "hoverme" class name.
(function() {
var img1 = "https://osu.ppy.sh/forum/images/smilies/50.gif";
var img2 = "http://4.bp.blogspot.com/-YrmTHhfMtFU/VJNbpDMHzgI/AAAAAAAAH8c/g3dJ1Q-QTrc/s1600/smile.png";
var myimg = document.getElementById('myimg');
myimg.src = img1;
var hoverables = document.getElementsByClassName('hoverme');
for (var i = hoverables.length; i--;) {
hoverables[i].addEventListener("mouseover", hoverMe, false);
hoverables[i].addEventListener("mouseout", unhoverMe, false);
}
function hoverMe() {
myimg.src = img2;
}
function unhoverMe() {
myimg.src = img1;
}
})();
<img class='hoverme' id='myimg' />
<p class='hoverme'>poooooooop</p>
<div class='hoverme'>This si a diiiiivvvvv</div>
The best way to accomplish that is to use CSS.
HTML
<img id="NavIcon">
CSS
#Navicon {
background-image: url(image1.jpg);
}
#NavIcon:hover {
background-image: url(image2.jpg);
}
I want a gif to play when clicked, and to stop when clicked again. I'm following this method: http://www.hongkiat.com/blog/on-click-animated-gif/
So far, I have:
HTML
<figure>
<img src="test.png" alt="Static Image" data-alt="test.gif"/>
</figure>
<script src="playGif.js" type="text/javascript"></script>
playGif.js
(function($) {
// retrieve gif
var getGif = function() {
var gif = [];
$('img').each(function() {
var data = $(this).data('alt');
gif.push(data);
});
return gif;
}
var gif = getGif();
// pre-load gif
var image = [];
$.each(gif, function(index) {
image[index] = new Image();
image[index].src = gif[index];
});
// swap on click
$('figure').on('click', function() {
var $this = $(this),
$index = $this.index(),
$img = $this.children('img'),
$imgSrc = $img.attr('src'),
$imgAlt = $img.attr('data-alt'),
$imgExt = $imgAlt.split('.');
if($imgExt[1] === 'gif') {
$img.attr('src', $img.data('alt')).attr('data-alt', $imgSrc);
} else {
$img.attr('src', $imgAlt).attr('data-alt', $img.data('alt'));
}
});
})(jQuery);
Instead of swapping the content of src and data-alt, this only puts data-alt into src, and data-alt remains the same.
The gif does play on click, but if clicked again it reloads the gif instead of reverting to the png (at least in Chrome and Firefox. IE just does nothing on further clicks).
So here is the finished jsfiddle: https://jsfiddle.net/2060cm1c/
It is a simple variable swapping problem:
a=1;b=2;
a=b;// now a=2
b=a;// a=2, b=a=2
To solve it, you need a temporary variable:
a=1;b=2;
temp=a;a=b;
b=temp;
Now solve the OP's problem:
var temp=$img.attr('src');
$img.attr('src', $imgAlt).attr('data-alt', temp);
So, the problem is as easy as swapping 2 variables. You don't need the if to check the extension.
I wrote some JS that lets me replace the main image on a product page with that a different image. This part is working great. However, I need the original image to return once the mouse leaves. I cannot get this to work.
Also, I would like to add a delay to this so that when I remove the mouse there is like a 1/4 second delay before changing back to the original image. This is all being done on the product page of OC 2.3.
this.imagePreview = function(){
$("a.preview").mouseleave(function(e){
$("#image").attr("src",default_image);
});
$("a.preview").hover(function(e){
$("#image").attr("src",this.rel);
});
$(document).ready(function(){
default_image = $("#image").attr("src");
imagePreview();
});
Can someone help me write this little bit of extra code? Everything else I've tried doesnt work.
You can get the desired result using JavaScript.
(function() {
var img, defaultImage, preview, i, hnd;
img = document.getElementById("image"); // Gets the image element.
defaultImage = img.src; // Sets the image src attribute to the defaultImage variable.
preview = document.querySelectorAll(".preview"); // Gets the elements with css selector is «.preview».
for (i = 0; i < preview.length; i++) {
/* Adds the mouseover event to the preview element. */
preview[i].addEventListener("mouseover", function() {
img.src = this.rel;
clearTimeout(hnd); // Reset the timeout handler.
});
/* Adds the mouseleave event to the preview element. */
preview[i].addEventListener("mouseleave", function() {
hnd = setTimeout(function() {
img.src = defaultImage;
}, 250); // 1/4 second delay.
});
}
})();
#list li {
margin: 10px;
}
<img id="image" src="https://cdn1.iconfinder.com/data/icons/technology-and-hardware-2/200/vector_66_08-32.png" />
<ul id="list">
<li>
<a class="preview" href="#" rel="https://cdn3.iconfinder.com/data/icons/device-icons-2/512/BT_computer-32.png">Computer</a>
</li>
<li>
<a class="preview" href="#" rel="https://cdn4.iconfinder.com/data/icons/48-bubbles/48/29.Mac-32.png">Mac</a>
</li>
<li>
<a class="preview" href="#" rel="https://cdn2.iconfinder.com/data/icons/crystalproject/32x32/devices/laptop.png">Laptop</a>
</li>
</ul>
Try this code:
$("a.preview").mouseleave(function(){
setTimeout(function () {
var default_image = $("#defaultImage").attr("src");
$("#image").attr("src",default_image);
}, 3000);
});
I'm using this code to build a gallery:
window.onload=function(){
var image = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
var mainImage = document.getElementById('rr_lrg_img');
[].forEach.call(image,function(x){
x.onmouseover = function(){
mainImage.src = x.src;
};
});
}
The code loads different thumbnails on the big image when "onmouseover". Now I would like to "preload" the first image from that gallery of thumbnails. I tried using onload with
rr_lrg_img.src=document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img')[0].src
but then it conflicts with the onmouseover. Any ideas? I can only use javascript, no jquery.
Since your var image is actually a collection of images, you need to use the [0] index pointer to target the first one:
window.onload=function(){
var image = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
var mainImage = document.getElementById('rr_lrg_img');
mainImage.src = image[0].src; // Add this line (preload first image into main one)
function toMainImage() {
mainImage.src = this.src;
}
[].forEach.call(image,function(x){
x.addEventListener("mouseenter", toMainImage, false);
});
}
.thumbnails img{height:50px;}
<img src="//placehold.it/200x200&text=default" id="rr_lrg_img">
<div class="thumbnails">
<img src="//placehold.it/200x200/cf5&text=1">
<img src="//placehold.it/200x200/f0f&text=2">
<img src="//placehold.it/200x200/444&text=3">
</div>