Return to Main Image - javascript

So I have a little javascript code that swaps my main image on hover of the thumbnails that works perfectly well! is their a way to return to main on hover out I am sure there is a little if statement but i cannot figure it out!
<div class="product"><img id="main" src="mainImage.jpg" width="550"/></div>
<div class="products">
<img src="img.jpg" width="200"/>
<img src="img1.jpg" width="200"/>
<img src="img2.jpg" width="200"/>
</div>
and the javascript is
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.products img').mouseover(function() {
var url = $(this).attr('src');
$('#main').attr('src', url);
});
});
</script>

<script type="text/javascript">
$(document).ready(function(){
var def_url = $('#main').attr('src');
$('.products img').hover(function() {
var url = $(this).attr('src');
$('#main').attr('src', url);
}, function() {
$('#main').attr('src', def_url);
});
});
</script>

Try this...
$('.products img').mouseover(function() {
//do some action...
},function (){
//undo the action..
});

You can achieve this by using hover(). when you move mouse out of it , it restores original state and hovered gives you the required functionality.
So, it is a combination of two functions mouserover() and mouseout()
hope this helps..

You can make it in two ways:
1) use jQuery hover hover documentation
$(selector).hover(
function(){ alert("Hover in"); },
function(){ alert("Hover out); }
);
2) use <div> with background image and change it on hover with css
#selector{
background: url('image1.png');
}
#selector:hover{
background: url('image2.png');
}

Related

Hide image when the src is unknown

I'm trying to hide images without the src in WordPress.
Following is the image code displaying on the front end
<img src="[custom-gallery-image-01]" class="galimage" height="300" width="580"/>
JS used to hide the image
<script type="text/javascript">
$(document).ready(function() {
$(".galimage").each(function() {
var atr = $(this).attr("src");
if(atr == "") {
$(this).addClass("hidegalimage");
} else {
$(this).removeClass("hidegalimage");
}
});
});
</script>
CSS
.hidegalimage {
display:none;
}
But I can still see the broken image icon & an image border. View JSFiddle. Can someone fix my issue or give me a suggestion how to hide the image?
Many thanks
Much more elegant to use CSS instead, no Javascript required, assuming the bad srcs start with [ as in your HTML: are empty strings:
.galimage[src=""] {
display:none;
}
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
<img src="" class="galimage" height="300" width="580"/>
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
Using jquery
$("img").error(function(){
$(this).hide();
});
Or
$("img").error(function (){
$(this).hide();
// or $(this).css({'display','none'});
});
no need for CSS alternative
You can use this but this is not hidding its removing from the page at all (DOM):
<img id='any' src="https://invalid.com" onerror="document.getElementById(this.id).remove()" >

Gif wont animate on hover

I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});

How to make change the height of all images inside a div?

How to make change the height of all images inside a div?
I have
$('.images img').each(function() {
$('img').attr('height', element.parent().attr('imgheight'));
});
<div imgheight="300px" class="images">
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>
It does not seem to do anything - see https://jsfiddle.net/yu51a5/527gn64n/4/. How to make it work?
I cannot use "height=100%" because normally these images come with captions, so the image should be shorter that the div.
You haven't defined element. Access the node from inside the each function.
$('.images img').each(function(i, node) {
$('img').attr('height', $(node).parent().attr('imgheight'));
});
Working fiddle.
I suggest you to use HTML5 data- attribute with your custom attribute imgheight
<div data-imgheight="300px" class="images">
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>
And JS can be as easy as this:
$('.images > img').css('height', $('.images').data('imgheight'));
Check fiddle
But, if you have multiple .images div, you would do like this
$('.images img').each(function() {
$(this).css('height', $(this).closest('.images').data('imgheight'));
});
or better
$('.images').each(function() {
$(this).find('img').css('height', $(this).data('imgheight'));
});
Change element to $(this) and you're good.
https://jsfiddle.net/wh85afq7/
Change the 2 references within the each function to the images to $(this)...
$('.images img').each(function() {
$(this).css('height', $(this).parent().attr('imgheight'));
});
You can use data-height attribute and get value by element.data("height")
here is the working example below
$( document ).ready(function() {
$('.images img').each(function() {
$(this).attr('height',$('.images').data("height"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-height="300px" class="images">
<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg" />
<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" />
</div>

Jquery image rollover - slide transition

How can I use Jquery to change image on hover with slide up transition? I've searched on the internet but I can't found a working code. All codes that I've found use fadeIn or fadeOut. Thank you very much!
This is the code that I found, but it uses fade in and out:
<script>
$(function() {
$('.change').mouseenter(function(){
$(this).slideUp('fast', function(){
$(this).attr('src', $(this).data('on'));
$(this).fadeIn();
});
});
$('.change').mouseleave(function(){
$(this).slideUp('fast', function(){
$(this).attr('src', $(this).data('off'));
$(this).fadeIn();
});
});
});</script>
AND html:
<img class="change" src="images/portofoliu/next.gif" data-on="images/portofoliu/prev.gif" data-off="images/portofoliu/next.gif">
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
$('#clickme').hover(function() {
$('#book').slideUp('slow', function() {
// Animation complete.
});
});
http://jsfiddle.net/GFdW5/3/
http://api.jquery.com/slideUp/
EDIT: Final Solution: http://jsfiddle.net/hellomynameisluc/frTFw

jquery zoom in and zoom out on clicking an image

I have an image which has to behave the following way:
When a user clicks on it the first time it the image should zoom-in and when clicked on the image again it should zoom-out.
Please help in figuring out how the two actions be performed by clicking on the image using jquery? Below is the code I have written for zooming in the image.
$('.tab1').click(function()
{
$(".GraphHolder").hide("slow");
$("#top-button-container").hide("slow");
$(".print").append('<button type="button">PRINT</button>');
$(this).animate({width: "70%"}, 'slow');
});
HTML:
<img id="pic" src="https://www.google.com//images/icons/product/chrome-48.png">
Jquery:
$(function(){
$('#pic').toggle(
function() { $(this).animate({width: "100%"}, 500)},
function() { $(this).animate({width: "50px"}, 500); }
);
});
Example at: http://jsfiddle.net/K9ASw/32/
Have you tried using toggleClass? You can use the optional [duration] parameter to specify how long you want the transition to take.
If really old or crappy browsers are'nt an issue, I'd go for CSS transitions, easier and smoother.
FIDDLE
**here is the script**
<script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Img1, #Img2, #Img3').mouseover(function () {
$(this).animate({ width: "122px", height: "110px" }, 100);
});
$('#Img1, #Img2, #Img3').mouseout(function () {
$(this).animate({ width: "118px", height: "106px" }, 100);
});
});
</script>
**Aspx code**
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">
$(function () {
$('.tab1').on('click', function()
{
if($(this).hasClass('zoomed')) {
$(this).removeClass('zoomed')
$(this).children('img').animate({width: "10%"}, 'slow');
}
$(this).addClass('zoomed')
$(this).children('img').animate({width: "70%"}, 'slow');
}
});
});
I removed all the code not pertaining to the image resize.
Also, if you're dealing with an image, you have to target the image tag, not the outer div.
If the image is applied to the .tab1 class as a background image then you're sol.

Categories