Lightbox Help in Dreamweaver

Dr. Bronner

New Member
Alright, maybe someone can help me with this.

I've got some thumbnails connected to the "Swap Image" behavior.
Basically a disjointed rollover.

Now I want to attach the LightBox script to the rolled over image.


The difficulty I'm having is locating where to attach and create the <a href link and rel="lightbox" attribute on my image "Greed.jpg"


HTML:
<img src="Images/Thumbnails/7D1.jpg" alt="" name="thumb_01" width="74" height="74" class="TNPositioning2" id="thumb_01" onclick="MM_showHideLayers('caption1','','hide','caption2','','show','caption3','','hide','caption4','','hide','caption5','','hide','caption6','','hide','caption7','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Greed.jpg',1)" />


For clarity you'll see in the beginning a thumbnail called "/7D1", a class, id, show-hide elements for captions, then towards the end the swapImages behavior connected to my image "Greed.jpg" That's the image I'm trying to attach the lightbox link to.





Thanks again.
 

v2Media

Member
Code:
<a href="Images/7D1.jpg" rel="lightbox"><img src="Images/Thumbnails/7D1.jpg" ... /></a>

If you have more than one image for the lightbox, change to this syntax:-

Code:
<a href="Images/7D1.jpg" rel="lightbox['gallery']"><img src="Images/Thumbnails/7D1.jpg" ... /></a>

All links with "lightbox['gallery']" in the rel attribute will display together in the lightbox.
 

Dr. Bronner

New Member
Alright sounds good.

I'm trying to setup a lightbox link
so people can see an enlarged photo when clicked on.

Problem is I can't figure out how to connect the lightbox code to the Greed.jpg

?
 

v2Media

Member
The lightbox script does that for you. Lightbox works on all links with the rel attribute set to "lightbox" and does its thing. All you have to do is link your thumbnails to the detail image files and make sure the rel attribute and value are in the <a> tag.
 

Dr. Bronner

New Member
Dreamweaver image swap with Lightbox

I think the problem is that with Dreamweaver's image swap coding I'm not dealing with a visible element on the page like images inside a div, but rather images in a file location that aren't on the page.

The <a href=""><img src="" width="" height="" rel="lightbox" /></a> tag does work however I'll just have to find another location to connect it.

It's confusing.

Thanks for the feedback.




HTML:
</head>

<body onload="MM_preloadImages('Images/Greed.jpg','Images/Lust.jpg','Images/Sloth.jpg','Images/Pride2.jpg','Images/Envy.jpg','Images/Wrath.jpg','Images/Glutny.jpg')">
<div id="Container">
  
  <div id="Main">
  
  
    <div id="Navigation">
    
     <div id="NavAbout"><img src="Images/about.jpg" width="50" height="11" alt="about" /></div>
      <div id="NavPortfolio"><img src="Images/portfolio.jpg" width="83" height="11" alt="portfolio" /></div>
       <div id="NavExhibits"><img src="Images/exhibits.jpg" width="68" height="11" alt="exhibits" /></div>
      <div id="NavContact"><img src="Images/contact.jpg" width="69" height="11" alt="contact" /></div>
    </div>
    
    <div id="SeriesSelection">
    
       <div id="SS"><span class = "ssleft"><a href="Portfolio.html"style="text-decoration:none">Les Femmes Series</a></span> 
                    <span class = "ssright"><a href="Vixen Series.html"style="text-decoration:none">Vixen Series</a></span> 
                    
      </div>
          
      <div><span class = "ssleft"><a href="7 Deadly Sins Series.html"style="text-decoration:none">7 Deadly Sins Series</a></span>
        <span class = "ssright"><a href="Postcard Series.html"style="text-decoration:none">Postcard Series</a></span>
        
      </div>
  
    </div>
    

<!-- Div That Triggers Behavior   -->




<div id="Thumbnails"><img src="Images/Thumbnails/7D1.jpg" alt="" name="thumb_01" width="74" height="74" class="TNPositioning2" id="thumb_01" onclick="MM_showHideLayers('caption1','','hide','caption2','','show','caption3','','hide','caption4','','hide','caption5','','hide','caption6','','hide','caption7','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Greed.jpg',1)" /><img src="Images/Thumbnails/7D2.jpg" alt="" name="thumb_02" width="74" height="74" class="TNPositioning" id="thumb_02" style="" onclick="MM_showHideLayers('caption1','','hide','caption2','','hide','caption3','','show','caption4','','hide','caption5','','hide','caption6','','hide','caption7','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Lust.jpg',1)" /><img src="Images/Thumbnails/7D3.jpg" alt="" name="thumb_03" width="74" height="74" class="TNPositioning2" id="thumb_03" onclick="MM_showHideLayers('caption1','','show','caption2','','hide','caption3','','hide','caption4','','hide','caption5','','hide','caption6','','hide','caption7','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Sloth.jpg',1)"  /><img src="Images/Thumbnails/7D4.jpg" alt="" name="thumb_04" width="74" height="74" class="TNPositioning2" id="thumb_04" onclick="MM_showHideLayers('caption1','','hide','caption2','','hide','caption3','','hide','caption4','','show','caption5','','hide','caption6','','hide','caption7','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Pride2.jpg',1)" /><img src="Images/Thumbnails/7D5.jpg" alt="" name="thumb_05" width="74" height="74" class="TNPositioning" id="thumb_05" style="" onclick="MM_showHideLayers('caption1','','hide','caption2','','hide','caption3','','hide','caption4','','hide','caption5','','show','caption6','','hide','caption7','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Envy.jpg',1)" /><img src="Images/Thumbnails/7D6.jpg" alt="" name="thumb_06" width="74" height="74" class="TNPositioning2" id="thumb_06" onclick="MM_showHideLayers('caption1','','hide','caption2','','hide','caption3','','hide','caption4','','hide','caption5','','hide','caption6','','show','caption7','','hide')" onmousedown="MM_swapImage('photo_large','','Images/Wrath.jpg',1)" /><img src="Images/Thumbnails/empty.jpg" alt="" name="" width="74" height="74" class="TNPositioning2" /><img src="Images/Thumbnails/empty.jpg" alt="" name="" width="74" height="74" class="TNPositioning" /><img src="Images/Thumbnails/7D7.jpg" alt="" name="thumb_07" width="74" height="74" class="TNPositioning2" id="thumb_07" onclick="MM_showHideLayers('caption1','','hide','caption2','','hide','caption3','','hide','caption4','','hide','caption5','','hide','caption6','','hide','caption7','','show')" onmousedown="MM_swapImage('photo_large','','Images/Glutny.jpg',1)" /></div>
    

<!-- End of Image Swap Code -->



    
    
    <div id="Artwork"><img src="Images/Sloth.jpg" alt="Sloth" name="photo_large" width="428" height="534" id="photo_large" /></div>

    <div id="Copywrite">©2010</div>
    
    
     <div id="Captionholder">
  <p class="captionstyle" id="caption1">Sloth<br>24 x 30<br />Acrylic on canvas<br>Private collectors<br />Limited run of giclees available</p>
  <p class="captionstyle" id="caption2">Greed<br>24 x 30<br />Acrylic on canvas<br>Limited run of giclees available<br /></p>
  <p class="captionstyle" id="caption3">Lust<br>24 x 30 <br />Acrylic on canvas<br>Limited run of giclees available<br /></p>
  <p class="captionstyle" id="caption4">Pride<br>24 x 30 <br />Acrylic on canvas<br>Private collectors<br />Limited run of giclees available</p>
  <p class="captionstyle" id="caption5">Envy<br>24 x 30 <br />Mixed media on canvas<br>Limited run of giclees available<br /></p>
  <p class="captionstyle" id="caption6">Wrath<br>24 x 30 <br />Acrylic on canvas<br>Limited run of giclees available<br /></p>
  <p class="captionstyle" id="caption7">Gluttony<br>24 x 30 <br />Charcoal on Arches Paper<br>Limited run of giclees available<br /></p>


    </div>
    
    
    
    
  </div>
</div>
</body>
</html>
 

v2Media

Member
Yep, well lightbox isn't compatible with that. You'd have to loose the DW swap image behaviour, or try and get your head around jQuery.thickbox.

Dump the DW swap image stuff and just have thumbnails linked to the detail jpg file. Add the rel attribute to all links with the lightbox value.
 
Top