Reclick image to shrink - javascript

I have a series of images that expand when click but I would like for them to return back to their original size on re-click. I gave the images an initial class (.images) and then added a class "selected".
HTML:
<div class='images'>
<img src="file:///F|/Desktop/testing new site/sdfs/img/work/Yama/yama1.jpg" width="200" height="150" />
<img src="file:///F|/Desktop/testing new site/sdfs/img/work/Yama/yama2.jpg" width="200" height="150" />
<img src="file:///F|/Desktop/testing new site/sdfs/img/work/Yama/yama3.jpg" width="200" height="150" />
</div>
Javascript:
$(".images img").click(function () {
$(".images img").removeClass('images')
$(this).addClass('selected');
$(this).animate({
width: '50%',
height: '50%'
}, 50).css('z-index', 999);
});
So right now the images will expand correctly. I was thinking to just remove the added selected class so that it goes back to the default .images images with
$(".images img").removeClass('active');
but it doesn't seem to work. I'm still very new to this so hopefully this explanation is detailed enough. Thanks!

2 options:
keep a flag or check the current class to know the image is grown or shrunk. then run your animation accordingly.
Use a class which would change the size. then toggleClass on click to grow or shrink on alternate clicks.
To show animation, you could define a transition css property. So, whenever your class is toggled, the width property will not change abruptly but show an animation effect.
javascript for the 2nd option.
$("img").on("click", function(){
$(this).toggleClass("selected");
});
See this sample.

if you can do css transitions, than all you need is just
.click(function() {
$(this).toggleClass('active)
})
if you want to stick with jquery to animate
$(img).click(function(){
if ( $(this).hasClass('active') {
// shrink it
// remove clas
} else {
// expand it
// add class
}
})

how about that. use animation method and event delegation
// n
$(".images").on('click','img',function() {
var $self = $(this);
$self.toggleClass('selected');
var width = ($self.hasClass('selected')) ? $self.width() * 2 : $self.width() /2 ;
var height = ($self.hasClass('selected')) ? $self.height() * 2 : $self.height() /2 ;
$self.animate ({
width : width+'px' ,
height : height+'px'
}, 50 );
});
other

Related

Fadein() effect to a function: how to?

I have this function that works well for lazy loading.
panel.find('img[data-src]').each(function(){
element = $(this);
element.attr('src', element.data('src'));
element.removeAttr('data-src');
How can I give a fadeIn() effect to that removeAttr function?
I tried:
element.removeAttr('data-src').fadeIn();
but it doesn't work. The img code looks like this and I simply want the dot.png to fadeOut and the original.jpg to fade in.
<img src="dot.png" data-src="original.jpg">
http://jsfiddle.net/7s1yb1un/6/
Thanks in advance
You cannot fade a src change on an img element. To acheive this you'll need two img elements. The second one will have a the src "original.jpg" and will have a higher z-index and start with display: none for a style. Then you can fade it in and it will fade in over the dot.
EDIT Given your new question, you could do the following:
Add an onload listener for the image
Just before changing the "src", fade the image out
Then change the "src" to "original.jpg"
In your onload function, do a fadeIn
Here is what I have done.
Added a fadeOut(5000), the img with original src will fadeout after 5 sec.
Called a function with timeout of 6sec, which changes the src with data-src and fadeIn(5000) in 5 sec, I hope this solves your problem.
JS code is below
var myVar;
function myFunction() {
myVar = setTimeout(function(){
var src = $("img.hide").attr("data-src");
$("img.hide").attr("src",src);
$("img.hide").fadeIn(5000);
}, 6000);
}
function myStopFunction() {
clearTimeout(myVar);
}
$(document).ready(function() {
$(".hide").fadeOut(5000);
myFunction();
});
The following code would fade out, change the src, then fade in.
JSFiddle
HTML
<div id="fullpage">
<div class="section">
<img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>
JS
$(function() {
$('img[data-src]').each(function(i, e) {
// cache element
original_img = $(e);
original_img
.fadeOut(function(){
original_img.attr('src', original_img.attr('data-src'))
})
.fadeIn();
})
});
Thanks guys. I found this script working (somehow), the images just blink sometimes. I don't know if semantically correct.
$(function() {
$('img').one("load", function() {
var e = $(this);
e.data('src', e.attr('data-src'));
e.animate({"opacity": 0}, 400);
e.data('src');
e.animate({"opacity": 1}, 400);
})
});
The following code would clone the images that have the data-src attribute, then hide the clone, update the clone src, position it over the original image, and fade in. Would this work for you?
JSFiddle
HTML
<div id="fullpage">
<div class="section">
<img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>
JS
$(function() {
$('img[data-src]').each(function(i, e) {
// cache element
original_img = $(e);
// get position of original image
offset_left = original_img.offset().left;
offset_top = original_img.offset().top;
// get data-src of
data_src = original_img.attr('data-src');
// clone original image
original_img.clone()
.hide()
// put it directly in the body, so it can be positioned
.appendTo('body')
// set the new src
.attr('src', data_src)
// place it over the original image
.css({
"left": offset_left,
"top": offset_top,
"position": "absolute"
})
.fadeIn(function(){
original_img.attr('src', data_src);
$(this).remove();
});
})
});

Jquery toggle img attribute

I am trying to toggle images from the thumbnail to the feature image when the thumb nail is clicked. Currently when its clicked the images will swap but I cant get them to swap back with the thumb nail is clicked on again. I've tried using toggle but when the thumb nail is clicked on it would remove the image completely and I couldnt get any image to return. Currently this will switch the images but not switch or toggle them back on click.
$(".browseTable").on('click', 'td', function () {
var thumbNail = $(this).parent('tr').find('img').attr('src');
var feature = $('#featureImg img').attr('src');
$('#featureImg img').fadeOut(400, function () {
$(this).fadeIn(400)[0].src = thumbNail;
});
});
You can use data for store source string and toggling images
preview on : https://jsfiddle.net/5kxf65Lx/
<img src="source1.jpg" data-srcfirst="source1.jpg" data-srcsecond="source2.jpg" />
<script type="text/javascript">
$('img').click(function(){
var loaded = $(this).attr('src')
var first = $(this).data('srcfirst')
var second = $(this).data('srcsecond')
if(loaded == first){
$(this).attr('src' , second)
} else {
$(this).attr('src' , first)
}
})
Try this. When the parent is clicked we toggle both children. The large version starts off hidden.
<div class="toggle js-toggle">
<img src="http://www.placehold.it/100x100" alt="" class="toggle__thumb js-toggle-image"/>
<img src="http://www.placehold.it/500x500" alt="" class="toggle__active js-toggle-image" style="display: none" />
</div>
The jQuery
$('.js-toggle').on('click', function() {
$(this).find('.js-toggle-image').toggle();
});
https://jsfiddle.net/uoLv2nkh/1/
Or an only CSS way if you only care about when the user is clicking.
https://jsfiddle.net/uoLv2nkh/
You can achieve your target via setting src of image in css.
.imageOne{
content:url(YOUR SOURCE);
}
.imageTwo{
content:url(YOUR SOURCE);
}
add class to your image element in start
check if element exist by either class if exist toggle() to another, this will change the image back to another.
And use toggle() like following example
$(".browseTable").on('click', 'td', function () {
//var thumbNail = $(this).parent('tr').find('img').attr('src');
//var feature = $('#featureImg img').attr('src');
//$('#featureImg img').fadeOut(400, function () {
// $(this).fadeIn(400)[0].src = thumbNail;
//});
$('#featureImg img').find('.imageOne, .imageTwo').toggle();
});
I am able to use toggle simply to change one element to another. etc. hope it will help you.
Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Give multiple divs the same function

I want to create multiple thumbnails with the same .class. The thumbnail div contains 3 other divs. The first on is an image, the second one is a description which appear on mouseenter and the third one is a bar which change the opacity.
When the mouse hovers above the .thumbnail both elements should execute their function.
My Problem is that now every thumbnail executes the function, so every thumbnail is now highlighted. How can I change this so only one Thumbnail highlights while hovering above it?
HTML:
<div class="thumbnail">
<div class="thumbnail_image">
<img src="img/Picture.png">
</div>
<div class="thumbnail_describe">
<p>Description</p>
</div>
<div class="thumbnail_footer">
<p>Text</p>
</div>
</div>
jQuery:
$(document) .ready(function() {
var $thumb = $('.thumbnail')
var $thumb_des = $('.thumbnail_describe')
var $thumb_ft = $('.thumbnail_footer')
//mouseover thumbnail_describe
$thumb.mouseenter(function() {
$thumb_des.fadeTo(300, 0.8);
});
$thumb.mouseleave(function() {
$thumb_des.fadeTo(300, 0);
});
//mouseover thumbnail_footer
$thumb.mouseenter(function() {
$thumb_ft.fadeTo(300, 1);
});
$thumb.mouseleave(function() {
$thumb_ft.fadeTo(300, 0.8);
});
});
You code behave like this because you apply the fadeTo function to the $thumb_des and $thumb_ft selectors which contain respectively all the descriptions and footers of the page.
Instead, you should select the description and footer of the thumbnail triggering the mouse event, inside the mousenter or mouseleave functions.
Another thing you could change to optimize your code is to use only once the event listening functions, and perform both actions on the description and on the footer at the same time:
$thumb.mouseenter(function() {
var $this = $(this)
$this.find('.thumbnail_describe').fadeTo(300, 0.8);
$this.find('.thumbnail_footer').fadeTo(300, 1);
});
full working jsfiddle: http://jsfiddle.net/Yaz8H/
When you do:
$thumb_des.fadeTo(300, 0.8);
it fades all nodes in $thumb_des. What you want is to fade only the one that corresponds to the correct node in $thumb.
Try this:
for (i = 0; i < $thumb.length; i++)
{
$thumb[i].mouseenter(function (des) {
return function() {
des.fadeTo(300, 0.8);
};
}($thumb_des[i]));
});
}
You'll want to access the child objects of that particular thumbnail, something like this would work:
$(this).children('.thumbnail_describe').fadeTo(300, 0.8);
Here is a fiddle example.

jquery, click to enlarge image, then click agian make it go back to previous width

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="https://i0.wp.com/www.thekitchenwhisperer.net/wp-content/uploads/2014/04/BelgianWaffles8.jpg" width="100" class="image" />
<script>
$(document).ready(function() {
$('.image').click(function() {
$(this).css('width', '100%'); // original width is 500px
});
});
</script>
How do add some codes so that i click it again, it goes back to the previous width(100px)?
Like this?
$(document).ready(function(){
$('.image').click(function(){
$(this).css('width', function(_ , cur){
return cur === '100px' ? '100%' : '100px'
});
});
});
Fiddle
First of all I would replace the width attribute for your img with CSS. Next up you can just remove the assigned inline-css (which is what jQuery adds) by calling
$(this).css('width', '');

jQuery Multiple Panel Toggle

I'm working on a portfolio site for an iPhone developer. In this site the iPhone app icons will act as a toggle buttons for panels that describe the application. The panels animate over the main page content. To add to this, if a panel is open and another app icon is clicked the open panels will need to close and the next app will open. Currently the script I have works great for toggling a single panel, see here: http://cncpts.me/dev/
So how can change the current script so it accepts multiple ids or classes, without creating duplicate code?
Here is the jQuery that is driving the functionality for a single toggle action.
$(document).ready(function() {
$("li.panel_button").click(function(){
$("div#panel").animate({
height: "700px"
})
.animate({
height: "600px"
}, "slower");
$("div.panel_button").toggle('zoom'); return false
});
$("div#hide_button").click(function(){
$("div#panel").animate({
height: "0px"
}, "slower"); return false
});
});
Here is the HTML:
<div id="panel">
<div id="panel_contents"></div>
<img src="images/iphone.png" border="0" alt="iPhone Development">
<div class="panel_button" id="hide_button" style="display: none;">
<img src="images/collapse.png" alt="collapse" />
</div>
</div>
give the list items a rel attribute that points to the div you are trying to show/hide.
<li rel='#panel_1' class='panel_button'>
give all the div's a common class such as 'flyaway', do a hide on any div with the same class that is not currently hidden
$('.flyaway').not(':hidden').animate({ height: "0px"}, "slower");
and show the one you want
$("li.panel_button").click(function(){
$($(this).attr('rel')).animate({
height: "700px"
})
.animate({
height: "600px"
}, "slower");
$($(this).attr('rel')+" div.panel_button").toggle('zoom'); return false
});
Here is my solution:
// Plugtrade.com - jQuery Plugin :: Bounce //
// answer for http://stackoverflow.com/questions/5234732/jquery-multiple-panel-toggle
jQuery.fn.bounce = function (el, bounceheight) {
var thisdiv = this;
var owidth = thisdiv.width();
var oheight = thisdiv.height();
var trigger = $(el);
// what we want is to make a parent div and then
// get the child div's dimensions and copy it's position
// display, width and height //
// child then becomes an absolute element nested within the
// parent div.
thisdiv.wrap('<div class="bounceparent"></div>');
// let's make a hidden button
thisdiv.append('<input type=text class="bouncehide" style="display:none" />');
var thishidebtn = thisdiv.last();
var thisparent = thisdiv.parent();
thisparent.width(owidth);
thisparent.height(oheight+bounceheight);
thisparent.css('border', '1px solid #ccc');
thisparent.css('position', thisdiv.css('position'));
thisparent.css('overflow', 'hidden');
thisdiv.css('position', 'relative');
thisdiv.css('top', oheight+bounceheight);
thisdiv.css('height', '0');
var toggle = false;
thishidebtn.click(function() {
if(toggle)
{
toggle = false;
thisdiv.animate({ top: 0, height:oheight+bounceheight }).animate({ top: oheight+bounceheight, height:0 });
}
});
trigger.click(function() {
// some code //
if(!toggle)
{
// show
$('.bouncehide').click();
toggle = true;
thisdiv.animate({ top: 0, height:oheight+bounceheight }).animate({ top: bounceheight, height:oheight });
}
else
{
// hide
toggle = false;
thisdiv.animate({ top: 0, height:oheight+bounceheight }).animate({ top: oheight+bounceheight, height:0 });
}
});
// return original object so it can be chained
return thisdiv;
}; // END -> plugin :: bounce
... and here is how you use it:
$(function(){
$('#boinky').bounce('#toggle', 50);
$('#boinkyb').bounce('#toggleb', 50);
});
jsFiddle example:
http://jsfiddle.net/523NH/14/
hope this helps you.

Categories