jquery zoom in and zoom out on clicking an image - javascript

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.

Related

How to get "onclick" after click on div in link?

How to get "onclick" after click on div in link on jquery?
<a href="#">
<img src="some.jpg" />
<div class="cont" onclick="showDiv()"></div>
</a>
img {
position: relative;
}
.cont {
position: absolute;
top: 0px;
right: 0px;
}
I want that when you click on region ".cont"occurred an event that I can handle. I tried this:
$(document).ready(function() {
function showDiv() {
alert("test");
}
});
my js
$('#tmp').justifiedGallery({
rowHeight: 350,
maxRowHeight: '100%'
}).on('jg.complete', function () {
$(this).find('a').colorbox({
maxWidth : '90%',
maxHeight : '90%',
opacity : 0.2,
transition : 'elastic',
current : ''
});
});
You defined the showDiv() function within the the document.ready handler, so it is out of scope of the onclick attribute. You need to define the function at the lower level:
<head>
<script type="text/javascript">
function showDiv() {
alert("test");
}
$(document).ready(function() {
// jquery code here...
});
</script>
</head>
A better solution entirely would be to use Javascript to attach your events, as it is a better separation of concerns and removes the outdated onclick attribute:
<a href="#">
<img src="some.jpg" />
<div class="cont"></div>
</a>
$(document).ready(function() {
$('.cont').click(function() {
alert('test');
});
});
You cant write a function like this in $(document).ready(function()
try this
$(document).ready(function(){
$(".cont").click(function(){
alert("test");
});
});
or
$(document).ready(function(){
showDiv();
});
function showDiv() {
alert("test");
}
There are two ways to do this.
The way I'd do this:
$('.cont').on('click', function(){
alert('qwerty');
});
That way you wouldn't need the onclick="showDiv()" in your HTML which would make your HTML cleaner.
The way that uses you onclick of the element:
function showDiv(){
alert('zxcvb');
}
Sample at CodePen

Can't set display:none to iFrame, why?

I'm trying to create function which fades in a div and an iframe on click. The iframe is nested in the div. It works. Unfortunately when I want to make them both fade out it doesn't work. The div fades out having display:none property on it and iframe stays display:inline despite jQuery initiating fade out command. Could someone help me to sort it out, please?
My HTML:
<div id="icontent">
<div id="frame">
<input type="button" id="hide" value=""/>
<iframe src="" scrolling="no" frameborder="0" id="mainFrame" name="mainFrame"></iframe>
</div>
</div>
My jQuery:
jQuery(document).ready(function($) {
$('.gallery').on('click', 'a', function(event) {
event.preventDefault();
var link = $(this).prop('href');
$("#icontent").fadeIn(200).width($(window).width());
$("#mainFrame").attr("src", link).load(function(){
$("#mainFrame").contents().find('body').css("background-image", "none").css("background-color", "transparent");
$("#mainFrame").fadeIn(300);
})
});
$("#hide").click(function () {
$("#icontent").fadeOut(200);
setTimeout(function(){
$("#mainFrame").attr("src", "about:blank").fadeOut(10);
}, 250);
});
$("#icontent").click(function () {
$("#icontent").fadeOut(200);
setTimeout(function(){
$("#mainFrame").attr("src", "about:blank").fadeOut(10);
}, 250);
});
$(document).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$("#icontent").fadeOut(200);
setTimeout(function(){
$("#mainFrame").attr("src", "about:blank").fadeOut(10);
}, 250);
}
});
});
My CSS:
#frame{width:53.125em;margin:3.125em auto;position:relative;}
#mainFrame{width:53.125em;height:40.625em;overflow:hidden;background:none transparent;display:none;}
#icontent{position:fixed;top:0;left:0;width:100%;height:100%;background:transparent url(images/tlogaleria.jpg);background-size:cover;text-align:center;display:none;z-index:10000;}
#loader{position:absolute;top:60%;left:20%;padding:0.375em;height:1em;width:1em;background:white url(images/ajax-loader.gif) no-repeat 50%;display:none;border-radius:1.563em;opacity:0.8;z-index:100;}
#hide{top:-1.438em;right:1.563em;position:absolute;width:1.25em;height:1.25em;border:0 none;padding:0;margin:0;}
.svg #hide{background:transparent url(images/close.svg) no-repeat;background-size:100% 100%;}
.no-svg #hide{background:transparent url(images/fallback/close.png) no-repeat;background-size:100% 100%;}
#hide:hover{opacity:0.5;}
#hide:hover{cursor:pointer;}
You can see it working here, by cklicking on the first carousel item on the left (the one with EF-2000 image ;))
Thanks in advance for all hints, cheers, Dan.

Return to Main Image

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');
}

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 pulsate changing color or image

I'm trying to have a div change colors using the jquery pulsate code but i want it to change from red to black, but i heard to do this you have to download a certain plug in. so instead i want it to pulsate to a picture. so far i have these two codes:
<img id="book" src="36.gif" alt="" width="105" height="105"
style="position: absolute; top: 585px;
left:585px;" />
and
<script>
$(document).ready(function() {
$("#white36").click(function () {
$('#book').animate({
$(this).effect("pulsate", { times:3000 }, 500);
});
you got it wrong, you are not supposed to use the .animate() method.
also for .pulsate() to work you need to include jquery UI in your html file.
I haven't tested it but it should work:
$(document).ready(function() {
$('#white36').click(function () {
$('#book').effect("pulsate", { times:3000 }, 500);
});
});
http://docs.jquery.com/UI/Effects/Pulsate

Categories