SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image mouseover effect

    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?

    http://demo.joomshaper.com/extension...e-gallery.html

    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!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    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:

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

    Code JavaScript:
    $('#content img').hover(
       function() {
         $(this).fadeTo('slow',1);
       },
       function() {
         $(this).fadeTo('slow', 0.5);
      }
    );

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Just to be complete, here's the same thing in jQuery:

    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>
        <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>

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

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    No problem.
    Staying with the jQuery solution, I have added LightBox functionality for you.

    Here's the code:

    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>
    Here's a demo

    You can download all of the files involved here.

    HTH

  6. #6
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code JavaScript:
    var hideImageCount = true;

    If you do not set the variable, then the "Image # of #" will display as normal.

    Here's an updated demo and here's a link to download the files.

    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".

  8. #8
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, you've been such a great help!

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    177 Post(s)
    Tagged
    8 Thread(s)
    No probs


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
  •