Hello,
I was trying to apply 2 javascript effects on one image. First, I use this Jquery effect (http://www.tutorialhero.com/click-55...out_effect.php) on the image. It works like it should until I put in the light box effect (this is the one I am using http://www.huddletogether.com/projec...ox2/#download). The lightbox also works, it just depends on which order I put them in the code on which one will come through.
I am relatively new to javascript and I am learning as I go along. Below I inserted part of my code geared towards these two effects. I know I have everything else in the code correct (the body) because they work individually, just not put together (or maybe I have to put a line of code in the body to enable it to work?). Essentially, I want the image to be dulled out when the visitor opens the page, get brighter when they roll over it, then trigger the lightbox when they click on it.
The easy option would be to use an image swap for the dull/bright mouseOver effect; however, I like the way it is done by tutorialhero.
CODE
<script type=“text/javascript” src=“javascript/lightbox/prototype.js”></script>
<script type=“text/javascript” src=“javascript/lightbox/scriptaculous.js?load=effects,builder”></script>
<script type=“text/javascript” src=“javascript/lightbox/lightbox.js”></script>
<script type=“text/javascript” src=“javascript/js/jquery-1.3.2.min.js”></script>
<script type=“text/javascript” src=“javascript/js/custom.js”></script>
<link rel=“stylesheet” href=“css/lightbox.css” type=“text/css” media=“screen” />\
<link href=“css/aloft_about.css” rel=“stylesheet” type=“text/css” />
<link href=“css/styles.css” rel=“stylesheet” type=“text/css” />
The first three scripts are for the light box and the second two are for the rollover. The style sheets are as follows- lightbox, about page layout, rollover effect. Is it possible to have both these effects on the same image?
Rather than using the Prototype / Scriptaculous / Lightbox scripts for your lightbox (because this means you’ll be using the prototype, scriptaculous and jquery libraries, you can very easily get away with just using 1 library)
jQuery has a bunch of lightbox plugins that you could use.
To use a rollover effect on images in a particular div, consider the following code for the HTML
<div id="gallery">
<ul>
<li>
<a href="/path/to/image1.jpg">
<img src="images/image_thumb1.jpg" alt="Some image" width="100" height="100"/>
</a>
</li>
<li>
<a href="/path/to/image2.jpg">
<img src="images/image_thumb2.jpg" alt="Some image" width="100" height="100"/>
</a>
</li>
<li>
<a href="/path/to/image3.jpg">
<img src="images/image_thumb3.jpg" alt="Some image" width="100" height="100"/>
</a>
</li>
</ul>
</div>
And for the CSS we just have 2 simple rules, the first is to “dull” the images by setting their opacity, the second sets the opacity back to 100% to “brighten” them up once their are hovered. (You could of course use the jQuery effect from tutorialhero you spoke about, unfortunately I couldn’t see the page as the URL was truncated, so I just used some simple CSS to achieve something similar).
#gallery a img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
#gallery a:hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
As for the lightbox, you could use a simple one like http://leandrovieira.com/projects/jquery/lightbox/
Then your JavaScript would be nice and simple:
$(document).ready(function() {
$("#gallery a").lightbox();
});
Thanks for your response John.
Here is a the link for the rollover effecthttp://www.tutorialhero.com/click-55165-jquery_fade_in_fade_out_effect.php
I am going with one of the light boxes you posted http://leandrovieira.com/projects/jquery/lightbox/
I have a couple questions. I’m not really sure how to go about coding part 2.
First:
<a href=“image1.jpg”><img src=“thumb_image1.jpg” width=“72” height=“72” alt=“” /></a>
Do I fill in the parenthesis for alt?
Second:
I don’t know what it means when it says "After it, select the links and call the jQuery lightBox plugin. " Does that mean I put more code in the head?
Sorry, I know it sounds dumb, I am completely new to this.
You can put your own alt tag for those images in there if you like, though the plugin will use the title attribute for the description in the lightbox.
<a href="image1.jpg" title="This title will be show underneath the image in the lightbox"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
That just means that once you’ve put your HTML for the image gallery in, you can then write the code to apply the lightbox effect.
For example if you have the following HTML somewhere in your page:
<div id="gallery">
<a href="image1.jpg" title="this is image 1"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
<a href="image2.jpg" title="this is image 2"><img src="thumb_image2.jpg" width="72" height="72" alt="" /></a>
<a href="image3.jpg" title="this is image 3"><img src="thumb_image3.jpg" width="72" height="72" alt="" /></a>
</div>
Then you’ll want something like this in the head:
<script type="text/javascript">
$(document).ready(function() {
$("#gallery a img").css("opacity","0.5");
$("#gallery a img").hover(function () {
$(this).stop().animate({ opacity: 1.0 }, "slow");
},
function () {
$(this).stop().animate({ opacity: 0.5 }, "slow");
}
);
$('#gallery a').lightBox();
});
</script>
Thank you very much for your help! The effect works exactly how I wanted it to. I’ll post my site when I’m finished so you can take a look!