Member Avatar for urlrookie

Hi, okay total newbie at Uni learning HTML and CSS for starters...

trying to impliment rel element to a gallery - works fine for single images - but not for a gallery.

The sample code I found on the net is:

<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a> 
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a> 
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a> 
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>

So Ive put all the Java and CSS in fine - but the 'rel' section - trying to workout where to put it in these lines of code for my own gallery....

<div class="g-main"><a href="../images/gallery/placer/gallery_placer-L.jpg" title="Caption Copy Here" class="thickbox"><img src="../images/gallery/placer/gallery_placer-t.jpg" border="0" /></a></div>
    <div class="g-main"><a href="../images/gallery/placer/gallery_placer-L.jpg" title="Caption Copy Here" class="thickbox"><img src="../images/gallery/placer/gallery_placer-t.jpg" border="0" /></a></div>
    <div class="g-main"><a href="../images/gallery/placer/gallery_placer-L.jpg" title="Caption Copy Here" class="thickbox"><img src="../images/gallery/placer/gallery_placer-t.jpg" border="0" /></a></div>
    <div class="g-four"><a href="../images/gallery/placer/gallery_placer-L.jpg" title="Caption Copy Here" class="thickbox"><img src="../images/gallery/placer/gallery_placer-t.jpg" border="0" /></a></div>

Im scratching my head here... so any help for a rookie would be very grateful....


Thanks

  • 3 Contributors
  • 2 Replies
  • 107 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Biiim

Dani AI

Generated

Short version: the grouping attribute belongs on the anchor that opens the large image, all gallery items must share the same group name, and each anchor must point to its own large image file. As hinted and demonstrated, putting the group on the link is correct — the common causes for “gallery not working” are mismatched or missing group values, duplicate hrefs, or the plugin not being loaded/bound.

Checklist and quick fixes

  • Confirm each thumbnail link (a tag) points to a different large image file (if every href is the same you’ll always open the same image).
  • Use the grouping attribute your lightbox expects. Newer Lightbox2 uses data-lightbox="groupName" while older scripts may read rel="groupName". See the Lightbox docs for the exact attribute your version requires (Lightbox2 usage) and the HTML attribute reference for rel (MDN rel attribute).
  • Make sure jQuery is loaded before the gallery script and that any initialization runs after DOM ready. Check the browser console for JS errors if nothing happens.
  • Keep the group name identical for every item in the same gallery (case-sensitive).

Example (modern Lightbox2 style)

<a href="/images/large-01.jpg" data-lightbox="plants" data-title="Caption 1">
  <img src="/images/thumb-01.jpg" alt="Plant 1" />
</a>

<a href="/images/large-02.jpg" data-lightbox="plants" data-title="Caption 2">
  <img src="/images/thumb-02.jpg" alt="Plant 2" />
</a>

Extra notes: tidy, indented markup makes it easier to spot copy/paste mistakes (thanks ). If the gallery still fails after these checks, paste the exact script include order and any console errors so the problem can be diagnosed further.

Recommended Answers

All 2 Replies

Member Avatar for Matthew N.

Wouldn't you put the rel attribute on the a tag to open the image? (well, that's how it works with Lightbox anyway)

Member Avatar for Biiim

I've only ever seen the rel attribute used on a, link & style tags, never come across it being used in a gallery before. An attribute is just a variable passed along in some code so it won't matter what you attach it to, it just may do nothing cause the browser hasn't been told to do anything with it or even do something you might not of intended to happen.

eg. the title attribute tells the browser to put its contents into a floating caption box

<div class="g-main">
	<a href="../images/gallery/placer/gallery_placer-L.jpg" title="Caption Copy Here" class="thickbox" rel='gallery-plants'>
		<img src="../images/gallery/placer/gallery_placer-t.jpg" border="0"/>
	</a>
</div>
<div class="g-main">
	<a href="../images/gallery/placer/gallery_placer-L.jpg" title="Caption Copy Here" class="thickbox" rel='gallery-plants'>
		<img src="../images/gallery/placer/gallery_placer-t.jpg" border="0" />
	</a>
</div>
<div class="g-main">
	<a href="../images/gallery/placer/gallery_placer-L.jpg" title="Caption Copy Here" class="thickbox" rel='gallery-plants'>
		<img src="../images/gallery/placer/gallery_placer-t.jpg" border="0" />
	</a>
</div>
<div class="g-four">
	<a href="../images/gallery/placer/gallery_placer-L.jpg" title="Caption Copy Here" class="thickbox" rel='gallery-plants'>
		<img src="../images/gallery/placer/gallery_placer-t.jpg" border="0" />
	</a>
</div>

It's also nice to make your code read friendly for yourself to be able to pick up what's happening and for others to carry on where you left off!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.