www.webdeveloper.com
Results 1 to 3 of 3

Thread: Need help with Javascript code to open picture in new window

  1. #1
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17

    Need help with Javascript code to open picture in new window

    Ok, bear with me I'm not very well educated with Javascript and jquery is pretty new to me.

    So, on my HTML5 home page I have a series of thumbnail images which already have a css code in place which I would like to keep (roll over hover effect).

    Right off the bat I'm not even sure if the hover effect will work with the javascript I need.

    Below is the image code I have in place to display the thumbnail and create the hover when the mouse is rolled over:

    <td><a class="thumbnail" href="#thumb"><img src="Images/ECommerceThumb.gif" width="103" height="94" alt="" border="0"><span><img src="Images/ECommerceExpand.gif"/><br /></span></a>
    </br><a href="services.html">Ecommerce</a>
    </table>

    What I'm so desperately needing is the javascript or jquery code for my clients to click on the thumbnail image and an image that is a different size (this is the HTML code for it: <img src="Images/ECommerceLarge.gif" width="760" height="871" alt="" border="0">) will open in a new window with a possible "close" button.

    I managed to figure out the "new window" using a text link, however I fear future customers will not know to click on the link.

    Any help with this will be very much appreciated.

    Thank you!

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    You should check out the JQuery Lightbox plugin. Is that pretty much what you're trying to do?

    http://leandrovieira.com/projects/jquery/lightbox/

  3. #3
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17
    Somewhat, the site you provided me is a heck of a lot nicer looking then my CSS hover coding. My biggest challenge..I'm not to sure what I'm looking at. I'm not good with Javascript. Right now, I'm just trying to find a simple way that when someone clicks on a thumbnail image not only will the hover effect take place, but the person is able to click on the thumbnail to view the image in a separate window.

    In the meantime I'm going to attempt to figure out what you sent me, I'd like to add it to my site..just not to sure how. Most of it is self explanatory. As foolish as this will make me look, I'm currently stumped on this part:

    <script type="text/javascript">
    $(function() {
    // Use this example, or...
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
    // This, or...
    $('#gallery a').lightBox(); // Select all links in object with gallery ID
    // This, or...
    $('a.lightbox').lightBox(); // Select all links with lightbox class
    // This, or...
    $('a').lightBox(); // Select all links in the page
    // ... The possibility are many. Use your creative or choose one in the examples above
    });
    </script>

    Any advice?

    Thank you again for your assistance!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles