Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rollover Swap on Image Seen Through Lightbox

    I am only a few months into learning code. Here's my dilemma.

    SITUATION:

    I am using lightbox so when you click on an image (col1.jpg), it takes you into lightbox, opening another image (color1.jpg), and when you click next it takes you to the next image (color2.jpg). I want to make it so that when you rollover the image (color1.jpg) while in "lightbox mode" it will show another image.

    Underneath col1.jpg is a word link (color), which takes you to the same series.

    PROBLEM:

    I think HTML rollovers won't work, because of the javascript already present in the file.

    CODE:

    <div class="image">
    <a href="color1.jpg" rel="lightbox[colorsequence]"><img id="col1" class="all-four-rounded-corners" src="col1.jpg" alt="col1"/></a>
    <a class="hidden" href="color2.jpg" rel="lightbox[colorsequence]">image #2</a>
    <p><a href="color1.jpg" rel="lightbox[colorsequence2]">color</a></p>
    <a class="hidden" href="color2.jpg" rel="lightbox[typesequence2]">image #2</a>
    </div>

    I KNOW THAT:

    Mouseovers can work like this (and other ways, too):

    <img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'">

    BUT:

    Should I use javascript instead?
    What code do I want to use, and where do I put it?
    Should I edit some of the javascript in my lightbox files?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by bennett View Post
    I think HTML rollovers won't work, because of the javascript already present in the file.
    There is no such thing as “HTML rollovers”. This can only be achieved with CSS or JavaScript.
    Quote Originally Posted by bennett View Post
    Mouseovers can work like this (and other ways, too):

    <img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'">

    BUT:

    Should I use javascript instead?
    This is JavaScript. It’s written in the HTML code (i. e. “inline”) but it’s still JS.

    Quote Originally Posted by bennett View Post
    Should I edit some of the javascript in my lightbox files?
    Yes, since you are invoking the functionality with the lightbox plugin you also need to modify it by modifying the lightbox script. However, the standard lightbox functionality wasn’t actually meant to be used that way. I think it would be better to create something from scratch (or look for a script that was exactly programmed for what you want) rather than trying to modify a pre-made plugin.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please Help With Javascript Modifications

    Alright, thank you for your input; if I chose to attempt to modify my lightbox script, can anyone help me with what precise code to use and where to put it? I only really understand HTML and CSS; I've never actually written javascript.


  •  

    Tags for this Thread

    Posting Permissions

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