SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Multiple Javascript effects on one image

    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?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    Code HTML4Strict:
    <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).
    Code CSS:
    #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:
    Code JavaScript:
    $(document).ready(function() {
      $("#gallery a").lightbox();
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your response John.

    Here is a the link for the rollover effecthttp://www.tutorialhero.com/click-55...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.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by e.mckenna730 View Post
    <a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

    Do I fill in the parenthesis for alt?
    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.

    Code HTML4Strict:
    <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>

    Quote Originally Posted by e.mckenna730 View Post
    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?
    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:

    Code HTML4Strict:
    <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:

    Code JavaScript:
    <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>
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •