Hi, can anyone suggest a script or let me know what sort of code should be used to achieve the same effect as this demo?
I do know how to use opacity in CSS to make an image darker or lighter on mouseover, but this looks like it’s using javascript and it looks much slicker. I’d really like to have darkened images that light up on mouseover, but with that fade effect instead of just instantly changing like the opacity setting does. Any sugestions? Thanks!
Hi,
The effect in is being created with the MooTools library.
Here is a stand alone example that you can have a look at and which is hopefully a little easier to understand:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<base href="http://demo.joomshaper.com/extensions/free-extensions/image-gallery.html" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JoomShaper Image Gallery</title>
<style type="text/css">
img.sp_simple_gallery {
background:#222222;
border:1px solid #444444;
margin:5px 10px 5px 0;
padding:5px;
}
</style>
<script type="text/javascript" src="/extensions/media/system/js/mootools.js"></script>
</head>
<body class="bg">
<div id="sp-sig86" class="sp-sig">
<a href="/extensions/images/stories/demo/brazil1.jpg" rel="lightbox-atomium" title="brazil1">
<img class="sp_simple_gallery" src="/extensions/images/stories/demo/thumbs/brazil1.jpg" alt="brazil1" />
</a>
</div>
<script type="text/javascript">
window.addEvent("domready",function(){
$$('div#sp-sig86 img').each(function(e){
var fade = new Fx.Style(e, 'opacity', {wait:false});
fade.set(0.5);
e.addEvent('mouseover', function(){
fade.start(1);
});
e.addEvent('mouseout', function(){
fade.start(0.5);
});
});
});
</script>
</body>
</html>
The important parts are the CSS inside the <head> section of the document, as well as the JavaScript include (MooTools library) and the JavaScript before the closing body tag (responsible for the fade in / out effect).
You could also achieve such an effect using jQuery, something like this:
$('#content img').hover(
function() {
$(this).fadeTo('slow',1);
},
function() {
$(this).fadeTo('slow', 0.5);
}
);
Just to be complete, here’s the same thing in jQuery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image fade example</title>
<style type="text/css">
img.fade {
background:#222222;
border:1px solid #444444;
margin:5px 10px 5px 0;
padding:5px;
opacity:0.5;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<img class="fade" src="http://demo.joomshaper.com/extensions/images/stories/demo/thumbs/brazil1.jpg" />
<script type="text/javascript">
$(document).ready(function() {
$('img.fade').hover(
function() {
$(this).fadeTo('slow', 1);
},
function() {
$(this).fadeTo('slow', 0.5);
}
);
});
</script>
</body>
</html>
First of all, thanks so much for the detailed response! Now…for the code itself, I tried out the jquery code you gave and it works perfectly! Unfortunately, now the gallery thumbnails, when clicked, are jumping straight to filename.jpg instead of popping up in the lightbox format. I’m assuming that’s because of some conflict with the js code, but I’m not experienced enough with javascript to figure out exactly what.
Hi,
No problem.
Staying with the jQuery solution, I have added LightBox functionality for you.
Here’s the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image fade example</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
img.fade {
background:#222222;
border:1px solid #444444;
margin:5px 10px 5px 0;
padding:5px;
opacity:0.5;
}
</style>
</head>
<body>
<a href="images/funny_cats_lol_cats_drugs.jpg" rel="lightbox[plants]">
<img class="fade" src="images/funny_cats_lol_cats_drugs_small.jpg" />
</a>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img.fade').hover(
function() {
$(this).fadeTo('slow', 1);
},
function() {
$(this).fadeTo('slow', 0.5);
}
);
});
</script>
</body>
</html>
You can download all of the files involved here.
HTH
You are absolutely amazing. Everything is working perfectly now. I can’t thank you enough for your help with this! The lightbox looks beautiful and the thumbnails are exactly as I wanted them to be. I have just one last question and then I promise I’m done…is there an easy way to hide/remove the image counter? I like that the title shows when the lightbox pops up but I was hoping to remove the “Image # of #” line. Any quick fixes for that? If not, never mind, it’s not that important. I really appreciate all of your help with getting this set up.
Hi,
The only way to remove the “Image # of #” line (that I am aware of), is to hack the plugin code.
It would be possible to just comment out the lines responsible, but that seemed a little hacky.
Therefore, I modified things a little, so that if you set the following global variable in your JavaScript code, before lightbox.js is included, the offending line will not display:
var hideImageCount = true;
If you do not set the variable, then the “Image # of #” will display as normal.
Oh, and BTW, in my previous example I had rel="lightbox[plants]" on the <a> tag.
This is what LightBox uses to group images together.
If you turn this into rel="lightbox", then the images will all display individually without the “Image # of #” text, but you will not be able to navigate between them.
In my latest example I changed “plants” to “cats”.
Thanks, you’ve been such a great help!
No probs 