/    Sign up×
Community /Pin to ProfileBookmark

how to resize image onclick?

Copy linkTweet thisAlerts:
Nov 06.2006

i have a image gallery. where the thumbnails are set like this:

[code=html]
<div class=”thumbnail”>
<a href=”#”><img src=”img/img0001.pg” width=”200″ border=”0″ /></a>
</div>
<div class=”thumbnail”>
<a href=”#”><img src=”img/img0002.pg” width=”200″ border=”0″ /></a>
</div>
<div class=”thumbnail”>
<a href=”#”><img src=”img/img0003.pg” width=”200″ border=”0″ /></a>
</div>
etc…….
[/code]

i am not sure what is the best sollution…
i want to click an image and instead of loading a new page or window i want just the width of both the thumbnail class and the img tag to change to 600.

can this be done with javascript??

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisNov 06.2006 — &lt;div class="thumbnail"&gt;
&lt;a href="#"[color=red] onclick="return false"[/color]&gt;&lt;img src="img/img0001.pg" width="200" border="0" [color=red]onclick="this.width=600;this.parentElement.parentElement.style.width=600"[/color]/&gt;&lt;/a&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@demiurgenauthorNov 06.2006 — check it out here:

http://www.morganwaage.com/gallery/gallery.php

it doesn't look like it is changing the div, just the img...

or there may be something wrong with my html...

is there a just as easy way of resizing them back to 200 again??
Copy linkTweet thisAlerts:
@gil_davisNov 07.2006 — it doesn't look like it is changing the div, just the img[/quote]
<i>
</i>&lt;script type="text/javascript"&gt;
function toggle(it) {
if (it.width == 200)
{it.width = 600;}
else
{it.width = 200;}
}
&lt;/script&gt;
...
&lt;div class="thumbnail"&gt;
&lt;img src="img/img0001.pg" width="200" border="0" onclick="toggle(this)"&gt;
&lt;/div&gt;
It works for me. You'll have to show me what the CSS is for "thumbnail".
Copy linkTweet thisAlerts:
@MaximGordiyenkoFeb 13.2019 — gli_davis can you help me to understand how to realize an approach with two consistently click on image and resize first time by x1 (400px), second time by x2 (600px) and third time by default (200px).

Many thanks for solution.
Copy linkTweet thisAlerts:
@cootheadFeb 13.2019 — Hi there MaximGordiyenko,

you have been a very naughty boy to resurrect a 12 year old thread.

The correct procedure is to start a new thread with your question

and then link to an old thread if really necessary.

Nevertheless, here is a javascript solution...

``<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;untitled document&lt;/title&gt;

&lt;!--&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;--&gt;

&lt;style media="screen"&gt;

body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}

#image {
display: block;
height: auto;
margin: auto;
border: 1px solid #000;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
transition: 1s ease-in-out;
cursor: pointer;
}

.setting1 {
width: 12.5em;
}

.setting2 {
width: 25em;
}

.setting3 {
width: 37.5em;
}

&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;img id="image" class="setting1" src="http://placehold.it/600x372" width="600" height="372" alt=""&gt;

&lt;script&gt;
( function( d ) {
'use strict';
var count = 0;
var pic = d.getElementById( 'image' );
pic.addEventListener( 'click',
function() {
count ++;
if ( count === 3 ) {
pic.classList.remove( 'setting' + count )
count = 0;
}

pic.classList.remove( 'setting' + count );
pic.classList.add( 'setting' + ( count + 1 ) );

}, false );
}( document ));
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;<i>
</i>``

_coothead_
Copy linkTweet thisAlerts:
@sagarchavadaMay 06.2019 — If you use Jquery this one is work it.

Code:

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

Success!

Help @demiurgen spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...