SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS only thumbnail viewer?

    I am trying to duplicate a image viewer for a client and am having a very difficult time of it. Not even sure this can be done without Javascript. It must be embedded inside of my index page, rather than creating a new gallery page.

    The example I'm trying to duplicate can be seen here: http://tuscany-villa.luxuryvillasint...-29-1-1717.htm

    What I have so far in my CSS is:
    #slideshow {
    background-color: #FFFFFF;
    height: 289px;
    width: 632px;
    position: relative;
    left: 0px;
    top: 0px;
    }
    #scroll {
    background-color: #CCCCCC;
    float: left;
    height: 289px;
    width: 140px;
    margin-left: 40px;
    overflow: auto;
    position: relative;
    }
    #bigimage {
    background-color: #FFFFFF;
    float: left;
    height: 289px;
    width: 452px;
    position: relative;
    background-image: url(images/house-back1-lg.jpg);
    background-repeat: no-repeat;
    }

    What I want to make happen is to create a link in the .html for each thumbnail image to show its counterpart (larger image) in the #bigimage DIV.

    So far all I have is the #scroll populated with the thumbnails and properly scrolling like the example, but can't make the larger image appear inside the DIV. (large images are already created in same images file)

    Is this possible, or does anyone know of a script that exists to do this exactly? I've searched for a long time now to no avail!!

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't think it's possible to make a slideshow in CSS alone.

    What you need is some JS code that changes the big image when you click at a thumbnail.

    The thumbnails could be something like this:
    HTML Code:
    <a href="javascript:changeBigImage(0);"><img src="......"></a>
    <a href="javascript:changeBigImage(1);"><img src="......"></a>
    <a href="javascript:changeBigImage(2);"><img src="......"></a>
    ...

    The big image could be something like this:
    HTML Code:
    <img id="bigImage" scr="imageno0.jpg">
    The JS function:
    Code:
    function changeBigImage(imageno){
    	document.getElementById("bigImage").src = "imagename"+imageno+".jgp";
    }
    This is typed fast and dirty without any testing, but I hope you see how this could be done.

    MEH

  3. #3
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!!!

    I'll be away from my computer for the day, but I will definitely give this a try and let you know. I've managed some other stuff, but still not exact. This could just do it.

    Again, thanks a lot!!

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just been doing a little research on the net and in my "code archive".

    The modern way to change the source attribute in the image tag is using elementname.setAttribute("attributename", "new attribute value").

    The function should then be like this:
    Code:
    function changeBigImage(imageno){
      var image = document.getElementById("bigImage");
      image.setAttribute("src", "imageno"+imageno+".jpg");
    }
    You could also write:
    Code:
    document.getElementById("bigImage").setAttribute("src", "imageno"+imageno+".jpg");
    but it's looked upon as better coding to declare the element as a variable, especially if you're going to use the element several times.

    I've tested it in IE7, IE6, FF2, Safari (Windows beta) 3, and Opera 7.25, and it works.

    MEH

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Visit www.cssplay.co.uk - under demos there are a few dozen to experiment with.

  6. #6
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi hegelund,
    I have ben playing with this for a while now and am having a hrd time figuring a couple of things out.

    I hate to be a pest, but my newbieness is showing. I'm sure I did the thumbnail part correctly creating the links inside the "scroll" div. I'm not sure where I am supposed to include the name of the large image that will appear in the "bigimage" div when the thumbnail is clicked.

    Plus, where exactly in the html is the code supposed to go?

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The HTML code for the big image should be placed where you want your big image, in plain HTML. Remember to give it a unique id, I used "bigImage" in my example. The image in the initial code should be the first image to show.

    Place the javascript in a separate js-file, like this
    HTML Code:
    <script type="text/javascript" src="meh1.js"></script>
    place it in the header of the site.

    Hope this will help you through. Feel free to ask again.

    MEH

  8. #8
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again!

    I really appreciate your willingness to help. I'll give it a try.

  9. #9
    SitePoint Zealot Websiteguy's Avatar
    Join Date
    Nov 2007
    Location
    Oshkosh, Wisconsin
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry it took a while to let you know how this turned out.

    I was unable to get it to work. I did find another older javascript snippet and made the project work. Problem is it only works in IE and not in FireFox because of W3C compliance issues.

    I have posted that one in the Javascript forum.


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
  •