8 replies [Last post]
tobi
tobi's picture
Offline
Regular
Last seen: 12 years 43 weeks ago
Timezone: GMT+2
Joined: 2007-03-22
Posts: 38
Points: 4

Hello
I have finally got the lightbox to work: http://www.tobiasstrollo.se/lightbox/test2.html

But I want to have about 10 images in the slideshow, but only one (or two) images displayed on the html-page - is that possible? How do I do it?

Hope to find some wise person out there!
Kindly
/Tobias

purewebdesigner
purewebdesigner's picture
Offline
Enthusiast
Washington DC
Last seen: 3 years 37 weeks ago
Washington DC
Timezone: GMT-5
Joined: 2007-04-22
Posts: 234
Points: 95

I have been looking into

I have been looking into doing the same thing I don't think it's possible, but I'll check back to see if anyone else explains how to do it. Hopefully we can find out!

CSSExpression EngineHTMLWordpressCoffee

Personal Website: curtisscott.com
Follow Me on Twitter: twitter.com/curtisscott_com

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

This seems to work OK (make

This seems to work OK (make sure you have a complete doctype on your page):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
	<script type="text/javascript" src="http://www.tobiasstrollo.se/lightbox/js/prototype.js"></script>
	<script type="text/javascript" src="http://www.tobiasstrollo.se/lightbox/js/scriptaculous.js?load=effects,builder"></script>
	<script type="text/javascript" src="http://www.tobiasstrollo.se/lightbox/js/lightbox.js"></script>
 
	<link rel="stylesheet" href="http://www.tobiasstrollo.se/lightbox/css/lightbox.css" type="text/css" media="screen" />
	<style type="text/css">
		ul { margin: 0; padding: 0; list-style: none }
		li { float: left; margin-right: 5px }
		.no-show { text-indent: -999em }
	</style>
 
</head>
<body>
<ul>
  <li><a href="http://www.tobiasstrollo.se/lightbox/images/image-1.jpg" rel="lightbox[roadtrip]" title="Hela truppen samlad">image #1</a></li>
  <li><a href="http://www.tobiasstrollo.se/lightbox/images/image-2.jpg" rel="lightbox[roadtrip]" title="Hela truppen samlad">image #2</a></li>
  <li class="no-show"><a href="http://www.tobiasstrollo.se/lightbox/images/image-3.jpg" rel="lightbox[roadtrip]" title="Hela truppen samlad">image #3</a></li>
  <li class="no-show"><a href="http://www.tobiasstrollo.se/lightbox/images/image-4.jpg" rel="lightbox[roadtrip]" title="Hela truppen samlad">image #4</a></li>
  <li class="no-show"><a href="http://www.tobiasstrollo.se/lightbox/images/image-5.jpg" rel="lightbox[roadtrip]" title="Hela truppen samlad">image #5</a></li>
</ul>
</body>
</html>

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tobi
tobi's picture
Offline
Regular
Last seen: 12 years 43 weeks ago
Timezone: GMT+2
Joined: 2007-03-22
Posts: 38
Points: 4

Doh - I feel so stupid! The

Doh - I feel so stupid!
The very moment I lifted my head from the pillow, the answer hit me! For anybody else who had the same problem - just ad the a href, without any linking text or image - like this:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="Hela truppen samlad">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]" title="Hela truppen samlad"></a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]" title="Hela truppen samlad"></a>

See - the first a href have linking text, the other two only have the a href.. This is the result:

http://www.tobiasstrollo.se/lightbox/test2.html

And now the doctype is right as well - thank you Tyssen!
Cheers
/Tobias

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your method has two

Your method has two problems:
1. people with js turned off won't be able to see all the images
2. it fails accessibility tests for having empty anchors

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tobi
tobi's picture
Offline
Regular
Last seen: 12 years 43 weeks ago
Timezone: GMT+2
Joined: 2007-03-22
Posts: 38
Points: 4

Tyssen Thanx a million for

Tyssen
Thanx a million for your reply! I defenetely donĀ“t want any of the two to happen, espessially not fail the accesibilty tests.. What should I do to solve these problems?

kindly
/Tobias

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I've given you a workable

I've given you a workable solution already.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

tobi
tobi's picture
Offline
Regular
Last seen: 12 years 43 weeks ago
Timezone: GMT+2
Joined: 2007-03-22
Posts: 38
Points: 4

oh SORRY!! Yes you have -

oh SORRY!!
Yes you have - and a brilliant solution too! Exquse my ignorance, I was reading the thread too fast!

Thanx a million for a good solution!
Cheers!
All the best
/Tobias

pstortz
Offline
newbie
Home
Last seen: 13 years 41 weeks ago
Home
Timezone: GMT-4
Joined: 2008-10-22
Posts: 1
Points: 0

Lightbox

Thank you so much!!!! Helped my issue!