how to resize an image on "onClick" using jquery? - javascript

how do i resize an image using jquery?
<td align="center"><img width="150px" src="{{=URL(r=request, f='download', args=Product.image)}}" AlT="no picture provided"/></td>
the images are loaded directly from the database using a forloop and are displayed on the screen.
all i want to achieve is the increase the size of an image when you click on it. something like this http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1_relative
but it shouldn't keep on increasing the image.

Here's my fiddle. It is simple. The trick to not increase many times is this condition:
if (img.width() < 200)
Fiddle's code:
<!-- Html -->
<img id="mrbean" src="http://2.bp.blogspot.com/-C6KY8tsc8Fw/T-SVFnncxjI/AAAAAAAAANw/FMiNzA8Zecw/s640/mr.bean.jpg" width="50" height="50" />
<input type="button" value="Increase image size" />
// JavaScript
$("input").click(function() {
var img = $("#mrbean");
if (img.width() < 200)
{
img.animate({width: "200px", height: "200px"}, 1000);
}
else
{
img.animate({width: img.attr("width"), height: img.attr("height")}, 1000);
}
});
Updated fiddle to resize image back to it's original size on second click.

Very simple JSFiddle for you: Fiddle.
Simply set a click event on the image using jQuery, then modify the height and width directly.
$('.myImg').click(function() {
$(this).height(400);
$(this).width(400);
$(this).off(); //removes the handler so that it only resizes once...
})

Related

How to change image when I hover then return to original image only when I hover again

I have two images, what I want to happen is that when I hover on the image, the image will change to the second image, and then when I hover on the image again, the image will change to the first image.
How do I do that using JavaScript?
This is a Javascript solution. I highly suggest you look into Jquery once you understand the below. In your case you don't seems to need the onmouseout.
HTML
<img src="urImg.png" onmouseover="chgImg(this)" onmouseout="normalImg(this)">
Javascript
function chgImg(x) {
x.src = "newImg.png";
}
function normalImg(x) {
x.src = "urImg.png";
}
HTML
<div class="image_container">
<img src="foo.png" class="first"/>
<img src="bar.png" class="last"/>
</div>
jQuery
$(".image_container").hover(function(){
$(this).toggleClass("switch");
});
CSS
.image_container .last{display:none;}
.image_container.switch .last{display:block;}
.image_container.switch .first{display:none;}
You can do this!
<a href="#" id="name">
<img title="Hello" src="images/view2.jpg>
</a>
$('#name img').hover(function() {
$(this).attr('src', 'images/view1.jpg');
}, function() {
$(this).attr('src', 'images/view2.jpg');
});
For anyone who do not want to use Javascript, just HTML, CSS.
You just need create second image with position: absolute; and put it with original image into a div (with position: relative;)
After that, you can use CSS to control opacity of second image when you hover it.
Below is my sample code using TailwindCSS
<div className="relative">
<img
src="/image1.png"
className="w-[100px] h-[100px]"/>
<img
src="/image1.png"
className="w-[100px] h-[100px] absolute opacity-[0] hover:opacity-[1]"/>
</div>

JQUERY 1.7.1 toggle li id not working

I'm using the code presented here: http://trevordavis.net/blog/simple-jquery-text-resizer so that my visitors can re-size the page texts. I like this method except for the fact that it uses 3 buttons to change text size. I've got the re-size buttonS working but what I'm trying to accomplish now is to get it looping my buttons (display:block - display:none). ei: if text size small, show medium button, if text size medium show large button, if text large, show small button, as opposed to having the 3 buttons show all the time.
I'm using jquery-1.7.1.min.js (toggle was not yet retired).
My text resize part of the code works, but not the toggling buttons. There could be hope in doing the toggling on an ID instead of class but, not being fluent in js, I have not figured out how to do target the id instead of the class, and I don't know that that is what is wrong with code in the first place.
Here is my code:
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<script type="text/javascript">
/*set resizer cookie*/
$(document).ready(function() {
if($.cookie('TEXT_SIZE')) {
$('body').addClass($.cookie('TEXT_SIZE'));
} else {
$('body').addClass("small");
}
/*set resizer class to body*/
$('.resizer a').click(function() {
var textSize = $(this).parent().attr('class');
$('body').removeClass('small medium large').addClass(textSize);
$.cookie('TEXT_SIZE',textSize, { path: '/', expires: 10000 });
return false;
/*show the proper button (for looping sizes, from small to large, back to small ---NOT WORKING*/
$('.toggle').hide();
if (textSize = 'small') {elem = "medium" };
if (textSize = 'medium') {elem = "large" } ;
if (textSize = 'large') {elem = "small" };
$('.toggle').not(elem).hide();
elem.toggle();
});
});
</script>
<ul class="resizer" id="link">
<li class="small" id="small" style="display: block;"> <img alt="larger" width="22" height="16" src="../Images/BaseFiles/glyphicons_115_text_smaller.png"/></li>
<li class="medium" id="medium" style="display: none;"><img alt="larger" width="22" height="16" src="../Images/BaseFiles/glyphicons_116_text_bigger.png"/></li>
<li class="large" id="large" style="display: none;"> <img alt="smaller" width="22" height="16" src="../Images/BaseFiles/glyphicons_116_text_bigger.png"/></li>
</ul>
Thank you for any help!
working example
in your code looping sizes block goes after the "return false" expression, which ends any futher execution of the script in the "click" function.
there are also some mistakes with manipulating classes in jquery
like this:
if (textSize == 'small') {elem = ".medium" };

Unable to re-change the value of a Javascript attribute

I have two images which I'm toggling and a zoom on those images is supposed to be displayed according to the selected image. On the first page load everything works fine (image appears, zoom appears). After I click the image, the image swaps and the zoom works fine as well. However, if I click again, I'm getting the image toggled correctly, but the zoom image does not refresh even for further clicks (keep displaying the zoom for the 2nd loaded image).
I'm trying to change the attributes of data-zoom-image but no luck. Any suggestions?
function pageLoad(sender, args) {
zooming();
}
function chngimg(x) {
if ($("#zoom_mw").attr("src") == x) {
var rimage;
rimage = $("#zoom_mw").attr('rearimage');
$("#zoom_mw").attr("src", rimage);
$("#zoom_mw").removeAttr("data-zoom-image");
$("#zoom_mw").attr("data-zoom-image", rimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
} else {
var fimage;
fimage = $("#zoom_mw").attr('frontimage');
$("#zoom_mw").attr("src", fimage);
$("#zoom_mw").attr("data-zoom-image", fimage);
$("#zoom_mw").elevateZoom({ scrollZoom: true });
}
}
<img style="border:1px solid #e8e8e6;" id="zoom_mw"
onclick="chngimg('<%= Session("ImagePathFront")%>')"
frontimage='<%= Session("ImagePathFront")%>'
rearimage='<%= Session("ImagePathRear")%>'
src='<%= Session("ImagePathFront")%>'
width="500" height="250" />
I assume that you are using this library. Is this the case?
In my demo i copied your code and currently
it toggles the images.
Your function pageLoad() calls a function zooming() but the code you provided does not execute pageLoad and the function zooming() is missing.
The call to elevateZoom is not working for me. Are you missing a reference?
If you are using elevateZoom than you have to provide the URL for the larger Image
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
Their exsample Gallery & Lightbox seems to me that it comes close what you are looking for:
<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>
<div id="gal1">
<a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
<img id="img_01" src="thumb/image1.jpg" />
</a>
<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img id="img_01" src="thumb/image2.jpg" />
</a>
</div>
And the matching javascript
//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01',
cursor: 'pointer', galleryActiveClass: 'active'
, imageCrossfade: true
, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});
//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
Please ask additional questions or comment if i misunderstood you.

Trouble getting height to scale to width on responsive website

Im trying to have a div re-size so that the height stays the same width as the height.
The divs are constantly changing size,
The width changes size because of percentages, however the height is changed using Jquery.
Html
<div id="inner_container">
<div id="Sbox1" class="select_tile" > </div>
<div id="Sbox2" class="select_tile" > </div>
<div id="Sbox3" class="select_tile" > </div>
<div id="Sbox4" class="select_tile" > </div>
<div id="Sbox5" class="select_tile" > </div>
<div id="Sbox6" class="select_tile" > </div>
<div id="Sbox7" class="select_tile" > </div>
<div id="Sbox8" class="select_tile" > </div>
<div class="clr"> </div>
Css
#inner_container
{ width:98%; min-width:50%; max-width:1600px;
margin:auto; padding:1% 1%; text-align:center; background:;}
.select_tile
{ width:23%; min-width:50px; min-height:50px;
background:green; margin:1%; float:left;}
Jquery
$(window).resize(function() {
var ccW = $('.select_tile').width();
$('.select_tile').css("height", ccW);
});
This works fine for when the browser window is re-sized but the #inner_content div re-sizes when a button is pressed, so the height of the div.select_tile
stays the same as it was before the button press but the width changes.
I was wondering if there was an event that waits for a change in the width or for something to change.
basically I want the width and height at 1:1 ratio to stay the same but scale to the size of the browser window on any change on either property.
Any assistance on this would be much appreciated, Thanks
edit: added html
you could create your own event :)
$(function() {
// moved this out of the event so it doesn't
// do a DOM traversal every 300ms!!! :)
var $tiles = $('.select_tile');
// this is your own custom function, which can be triggered
// as you see below
$(window).on("resizeBoxes" , function(e,$selector) {
//set your box resize code here.
var ccW = $selector.width();
$selector.css("height", ccW);
});
// using 300 ms as it's not too short to kill a device,
// and not too long to show noticable lag.
// importantly though you want the resize event to
// be succinct and easy on cpu.
var resizeTimer = setInterval( function() {
$(window).trigger("resizeBoxes",$tiles);
}, 300);
$(window).on("resize", function(e) { $(window).trigger("resizeBoxes",$tiles); });
$("#button").on("click", function(e) { $(window).trigger("resizeBoxes",$tiles); });
// this next one might be best for you :)
$(window).on("mousemove", function(e) { $(window).trigger("resizeBoxes",$tiles); });
});
You have one solution here jquery-how-to-determine-if-a-div-changes-its-height-or-any-css-attribute with the setTimeOut() function but I would make the button trigger that change...

css3/Jquery animation/transition/: How to make image move vertically and back?

I want to do this effect in my image (button)
http://osc4.template-help.com/wt_32608/index.html#
I want to make this animation whatever the method CSS3, HTML5 canvas , JS
If I will use Hover property , how can I make the image slide and back when roolout
First, make a < div > that will contain the animation.
<div id="image_holder"></div>
Then, place the < img > inside.
<div id="image_holder_1" class="image_holder">
<img id="image_1" class="image" ..... />
</div>
Next, add some CSS styling to the < div > like so:
.image_holder {
overflow: hidden;
}
And also some CSS to the < img >:
.image {
position: relative;
}
Now, animate the image with jQuery. Specifically, you will be animating the "top" CSS attribute for the image:
$('#image_holder_1').hover( function() {
$('#image_1').animate({
top: '-' + $(this).height() + 'px'
});
}, function() {
$('#image_1').animate({
top: '0px'
});
});
See it in action here: http://jsfiddle.net/trusktr/7hTDu/
Alternatively, you can do it with CSS3 animations. Do a search for "CSS3 transitions" on google: http://www.google.com/search?btnG=1&pws=0&q=CSS3+transitions
something like this.
$(".items").each(function() {
$(this).mouseover(function(){
$(this).find(".inner").slideDown();
});
$(this).mouseout(function(){
$(this).find("inner").slideUp();
});
});
but it would be better if you give us some code of your html struct, and something aboute your idea.
The easiest way is probably to position the images absolutely and then manipulate the top, something like this:
<img id="myimage" style="position: absolute" src="whatever"/>
<script>
$('#myimage').animate({top: '<whatever>px' },someDuration);
</script>
Read the jQuery animate docs here: http://www.google.dk/search?sourceid=chrome&ie=UTF-8&q=jquery+animate
It should not be that hard to figure out :)
If just an animated background to a button you want, why not use background-image and animate the background-position with jQuery?

Categories

Resources