Lightbox Help in Dreamweaver

Dr. Bronner · 10-19-2010, 10:00 PM

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 Code:

<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 · 10-19-2010, 11:07 PM

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 · 10-19-2010, 11:50 PM

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 · 10-20-2010, 01:39 AM

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 · 10-20-2010, 04:06 AM

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 Code:

</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 · 10-20-2010, 07:41 AM

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.

10-19-2010, 10:00 PM	#1
Dr. Bronner New Member Join Date: Oct 2010 Posts: 3	Lightbox Help in Dreamweaver 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 Code: <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.

10-19-2010, 11:07 PM	#2
v2Media Silver Member Join Date: Jul 2010 Location: Queensland, Australia Posts: 119	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. __________________ I do Web Design, Brisbane - Gold Coast based. Spend a lot of time in PHP/MySQL Web Development. And Search Engine Optimisation chews up the rest.

10-20-2010, 01:39 AM	#4
v2Media Silver Member Join Date: Jul 2010 Location: Queensland, Australia Posts: 119	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. __________________ I do Web Design, Brisbane - Gold Coast based. Spend a lot of time in PHP/MySQL Web Development. And Search Engine Optimisation chews up the rest.

10-20-2010, 07:41 AM	#6
v2Media Silver Member Join Date: Jul 2010 Location: Queensland, Australia Posts: 119	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. __________________ I do Web Design, Brisbane - Gold Coast based. Spend a lot of time in PHP/MySQL Web Development. And Search Engine Optimisation chews up the rest.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

10-19-2010, 11:50 PM	#3
Dr. Bronner New Member Join Date: Oct 2010 Posts: 3	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 ?