SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hoverbox image gallery with fixed position preview

    I've searched and played around with the code but I can't seem to have the larger images go to the same position on a page. I'm using http://sonspring.com/journal/hoverbox-image-gallery to create an image gallery. In his example, http://host.sonspring.com/hoverbox/, the large image appears directly over the thumbnail. I'd like all the large images to appear in the same place like this website I did a long time ago with javascripthttp://www.donlytton.com. The gallery I'm working on is here: http://www.truethairestaurant.com/gallery.htm. Thanks much if you can help me figure this out.

    Code:
    .hoverbox
    {
    	cursor: default;
    	list-style: none;
    	width:700px;
    	margin:auto;
    }
    
    .hoverbox a
    {
    	cursor: default;
    }
    
    .hoverbox a .preview
    {
    	display: none;
    }
    
    /*.hoverbox a:hover .preview
    {
    	display: block;
    	position: absolute;
    	top: -33px;
    	left: -45px;
    	z-index: 1;
    }*/
    
    .hoverbox a:hover .preview
    {
    	display: block;
    	position: absolute;
    	top: -33px;
    	left: -45px;
    	z-index: 1;
    }
    .hoverbox img
    {
    	background: #E7E086;
    	border-color: #aaa #ccc #ddd #bbb;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	padding: 2px;
    	vertical-align: top;
    	width: 100px;
    	height: 75px;
    }
    
    .hoverbox li
    {
    	border-color: #FFFFFF;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	display: inline;
    	float: left;
    	margin: 20px;
    	padding: 5px;
    	position: relative;
    	background-color: #FFBE00;
    }
    
    .hoverbox .preview
    {
    	border-color: #000;
    	width: 200px;
    	height: 150px;
    }
    
    .caption{
    width:100px;
    font-size:10px;
    height:50px;
    
    }
    HTML Code:
    <div id="content">
    <h2>Photo Gallery<br />Hover over photo for larger image</h2></div>
    <ul class="hoverbox">
    <li>
    <a href="#"><img src="hoverbox/hoverbox/img/photo01.jpg" alt="description" />
    <img src="hoverbox/hoverbox/img/photo01.jpg" alt="description" class="preview" /></a>
    <div class="caption">1. Golden Wheel of Shrimp &amp; Ham Delight</div>
    </li>
    
    
    <li>
    <a href="#"><img src="hoverbox/hoverbox/img/photo02.jpg" alt="description" /><img src="hoverbox/hoverbox/img/photo02.jpg" alt="description" class="preview" /></a>
    <div class="caption">25. Southern Thai Bean-Thread Rice Vermicelli Salad</div>
    </li>
    
    
    <li>
    <a href="#"><img src="hoverbox/hoverbox/img/photo03.jpg" alt="description" /><img src="hoverbox/hoverbox/img/photo03.jpg" alt="description" class="preview" /></a>
    <div class="caption">8. Fried Cashews</div>
    </li>
    
    
    <li>
    <a href="#"><img src="hoverbox/hoverbox/img/photo04.jpg" alt="description" /><img src="hoverbox/hoverbox/img/photo04.jpg" alt="description" class="preview" /></a>
    <div class="caption">44. Wok-fried Crunchy Baby Corn & Snow Peas Supreme</div>
    </li>
    
    
    
    <li>
    <a href="#"><img src="hoverbox/hoverbox/img/photo05.jpg" alt="description" /><img src="hoverbox/hoverbox/img/photo06.jpg" alt="description" class="preview" /></a>
    <div class="caption">46. Wok-fried Early Green Asparagus</div>
    </li>
    
    
    
    <li>
    <a href="#"><img src="hoverbox/hoverbox/img/photo06.jpg" alt="description" /><img src="hoverbox/hoverbox/img/photo06.jpg" alt="description" class="preview" /></a>
    <div class="caption">36. Grilled Seafood Curry</div>
    </li>
    
    
    
    
    <li>
    <a href="#"><img src="hoverbox/hoverbox/img/photo07.jpg" alt="description" /><img src="hoverbox/hoverbox/img/photo07.jpg" alt="description" class="preview" /></a>
    <div class="caption">32. Panang Curry</div>
    </li>
    
    
    <li>
    <a href="#"><img src="hoverbox/hoverbox/img/photo08.jpg" alt="description" /><img src="hoverbox/hoverbox/img/photo08.jpg" alt="description" class="preview" /></a>
    <div class="caption">31. Magnificent Masaman Curry</div>
    </li>
    
    
    
    </ul>
    
    </div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The position:relative in the anchor is creating the stacking context for the image so you need to remove it to a parent element such as .hoverbox and in that way you can place all images in relation to .hoverbox rather than in relation to each individual anchor.

    Code:
    .hoverbox
    {
        cursor: default;
        list-style: none;
        width:700px;
        margin:auto;
        position: relative;
    }
    .hoverbox a
    {
    }
    Of course you will need to make room for the image and place it where you want.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2005
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I've had a delay because I couldn't get the darn preview to budge and I decided to use a different way to display the restaurant menu items. I went back to it today because I still want to use it. The problem was that I was still linking to the IE fix style sheet which wouldn't let the photos budge no matter what I did. Now it works just like you described it should.


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
  •