HI Jeremie (sorry about the lack of accent characters, I'm feeling lazy
right now)
Would the imgFull class have the full image as a background image? and then
maybe an imgThumb with a background image of the thumbnail?
If so, that's as easy as doing something like this:
$("#someID").click(function(){
if($(this).hasClass("imgFull")){
//switch to the imgThumb
$(this).removeClass("imgFull").addClass("imgThumb");
}
else{
//do the opposite
$(this).removeClass("imgThumb").addClass("imgFull");
}
});
so the html for that code would look something like this:
<div id="someID" class="imgThumb"></div>
If the class wouldn't contain the image as a background image, then you
could do something like this:
<html>
<head>
// include the jquery core of course...
<script>
// this $(function... syntax is a shortcut for the normal jQuery
document ready stuff
$(function(){
$("#theImageLink").bind("click",function(){
var imgTag = $(this).children("img");
if( imgTag.attr("src") == "path/to/my/thumbImage.gif"){
imgTag.attr("src", "path/to/my/largImage.gif");
}
else{
imgTag.attr("src", "path/to/my/thumbImage.gif");
}
});
});
</script>
</head>
<body>
<span id="theImageLink" class="imgThumb"><img
src="path/to/my/thumbImage.gif"></span>
</body>
</html>
None of this code is tested, so I could have made some mistakes. Also, some
other guru might have different techniques, or would perhaps use different
selectors. Without seeing how you'd really want your html to look it's a bit
hard, so I've made some assumptions.
Cheers, and I hope this helps!
Chris
On 10/7/07, Jérémie <[EMAIL PROTECTED]> wrote:
>
>
> HI,
>
> I'm trying to do something with jQuery, and each time I think I have
> it right, it all falls apart. Yep, it's quite obvious me and
> javascript aren't the best buddies... maybe someone can give me a
> hand?
>
> In a web page, I would like to display an image, let's call it imgFull
> (that would be it's class).
>
> When the page is loaded with a javascript-capable UA, this image is
> immediately hidden (as soon as possible to avoid strange visual effect
> for slow connections), and another one is displayed at its place,
> let's call it imgThumb
>
> When either of these two images are clicked (they could be inside a
> <a> tag), the one displayed is hidden (I'll add some effect), and
> after that the other one (hidden) is displayed.
>
> Basically it's a thumbnail/full image toggle on click, that would
> degrade gracefully without javascript or inside XML (like Atom).
>
> It's über simple, and yet I'm banging my head at it... :-(
>
> Please please please, anyone got an idea ?
>
>
--
http://cjordan.us
