PDA

View Full Version : Lightbox Image Viewer 2 (wants to discard thumbnails and have one main photo)



jeanine
12-11-2009, 10:23 PM
1) Script Title: lightbox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

3) Describe problem: I don't want ALL thumbnails displayed, just ONE main photo that users can click on to open lightbox slideshow. :confused:

jscheuer1
12-12-2009, 05:50 AM
The script linked to in your post will not make anything like a slide show regardless of whether or not there are one or more thumbnails.

I think you might mean:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

There are better scripts for this. But a slide show of sorts (it would be manually driven by the user) can be made using this script's gallery syntax (from the demo page):



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

If you want thumbnails, replace image #1, image #2, image #3 with image tags. If you want only one thumbnail, do it like so:


<a href="images/image-1.jpg" rel="lightbox[roadtrip]"><img src="images/image-1-small.jpg" alt=""></a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]"></a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]"></a>

jeanine
12-12-2009, 03:04 PM
okay so I have this code:

<link media=screen href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/engine/css/lightbox.css" type=text/css rel=stylesheet>
<script src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/engine/js/prototype.js" type=text/javascript></script>

<script src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/engine/js/scriptaculous.js?load=effects,builder" type=text/javascript></script>

<script src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/engine/js/lightbox.js" type=text/javascript></script>

<div class=gallery>


<a title="Member Holiday Celebration" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/holiday1.jpg" rel=lightbox[sample]><img src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/holiday1.jpg" width="90" height="60" border="0"></a>

...and it goes on with more photos included in the info between <a and </a>


where would I add the one you gave me:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]"><img src="images/image-1-small.jpg" alt=""></a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]"></a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]"></a>

jscheuer1
12-12-2009, 03:21 PM
You don't add it anywhere, it was just an example. What you should do is remove all of the other image tags so that all that remains is:


<a title="Member Holiday Celebration" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/holiday1.jpg" rel=lightbox[sample]><img src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/holiday1.jpg" width="90" height="60" border="0"></a>

followed by all of the other link tags. You didn't show what they look like, but I imagine the next one looks something like so:


<a title="Member Holiday Celebration" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/holiday2.jpg" rel=lightbox[sample]><img src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/holiday2.jpg" width="90" height="60" border="0"></a>

It should now look like:


<a title="Member Holiday Celebration" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/holiday2.jpg" rel=lightbox[sample]></a>

and so on for the rest of them. Only the first one in the rel="lightbox[sample]" series should have a thumbnail, the rest will be unseen 'empty' links.

jeanine
12-12-2009, 03:38 PM
Okay I'm trying to get it to work... I'll be on here all day until this is fixed

jscheuer1
12-12-2009, 03:42 PM
If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

jeanine
12-12-2009, 04:01 PM
Thank you so much by the way I appreciate every bit of your help!

The site is www.Marshlandingcc.com

It's a member login only, so use this name Clubhouse and password MLCC86, so you can at least look at the pages I'm having trouble with.

Lightbox is being used on these pages:
membership, golf operations, weddings & banquets, swim and the Member Holiday Celebration photo page (link on home)

If worst comes to worst, I just need a code that will be a slideshow or a gallery type (like http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm ) demo #1


Below is the standard code I'm using, of course changing the image file names to correlate with what page it's on. As I said before I want to make just one photo appear and once the member clicks on that photo, the lightbox controllable slideshow will show all images.


<link rel=stylesheet type=text/css href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/engine/css/lightbox.css" media=screen>
<script type=text/javascript src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/engine/js/prototype.js"></script>

<script type=text/javascript src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/engine/js/scriptaculous.js?load=effects,builder"></script>

<script type=text/javascript src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/engine/js/lightbox.js"></script>

<div class=gallery><a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddingset014.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddingset014.jpg" width=120 height=90></a> <a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding099.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding099.jpg" width=120 height=90></a> <a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding007.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding007.jpg" width=120 height=90></a> <a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding008.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding008.jpg" width=120 height=90></a> <a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding022.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding022.jpg" width=120 height=90></a> <a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding100.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding100.jpg" width=120 height=90></a> <a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding102.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding102.jpg" width=120 height=90></a> <a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/vase.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/vase.jpg" width=120 height=90></a> <a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/banquet.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/banquet.jpg" width=120 height=90></a> <a title="Marsh Landing Country Club Wedding" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding80.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/wedding80.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings12.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings12.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings11.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings11.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings5.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings5.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings9.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings9.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings8.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings8.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings7.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings7.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings6.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings6.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings10.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings10.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings4.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings4.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings3.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings3.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings2.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings2.jpg" width=120 height=90></a> <a title=" Marsh Landing Country Club Wedding " href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings1.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/imageviewer/weddings1.jpg" width=120 height=90></a> </div></font></font></font></font></td></tr></tbody>
<p></p>

jscheuer1
12-12-2009, 04:58 PM
Well, for example, on /tour/tours.cfm replace:


<a title="Marsh Landing Country Club Golf" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1st9andwine.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1st9andwine.jpg" width=120 height=90></a> <a title="1st Flight Low Net Winners" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1stflight.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1stflight.jpg" width=120 height=90></a> <a title="Frank Jurney, Low Gross Champion, Super Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/Frankjurney.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/Frankjurney.jpg" width=120 height=90></a> <a title="George Erickson, Low Gross Champion, Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/georgeerickson.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/georgeerickson.jpg" width=120 height=90></a> <a title="Overall Low Gross Champions" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/overall.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/overall.jpg" width=120 height=90></a> <a title="Rick Catlett, Low Net Champion, Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/rickcatlet.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/rickcatlet.jpg" width=120 height=90></a> <a title="Chester Stokes, Low Net Champion, Super Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/stokessrdiv.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/stokessrdiv.jpg" width=120 height=90></a> <a title="Team USA Ryder Cup Champions" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/teamusachampions.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/teamusachampions.jpg" width=120 height=90></a>

with:


<a title="Marsh Landing Country Club Golf" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1st9andwine.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1st9andwine.jpg" width=120 height=90></a><a title="1st Flight Low Net Winners" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1stflight.jpg" rel=lightbox[sample]></a><a title="Frank Jurney, Low Gross Champion, Super Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/Frankjurney.jpg" rel=lightbox[sample]></a><a title="George Erickson, Low Gross Champion, Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/georgeerickson.jpg" rel=lightbox[sample]></a><a title="Overall Low Gross Champions" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/overall.jpg" rel=lightbox[sample]></a><a title="Rick Catlett, Low Net Champion, Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/rickcatlet.jpg" rel=lightbox[sample]></a><a title="Chester Stokes, Low Net Champion, Super Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/stokessrdiv.jpg" rel=lightbox[sample]></a><a title="Team USA Ryder Cup Champions" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/teamusachampions.jpg" rel=lightbox[sample]></a>

jeanine
12-12-2009, 08:55 PM
I thought it worked a minute ago, but now when the picture is clicked on the slideshow doesn't start it only shows the image in the window. eeshk! here's the code verbatim:


<a title="Marsh Landing Country Club Golf" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1st9andwine.jpg" rel=lightbox[sample]><img border=0 src="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1st9andwine.jpg" width=120 height=90></a><a title="1st Flight Low Net Winners" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/1stflight.jpg" rel=lightbox[sample]></a><a title="Frank Jurney, Low Gross Champion, Super Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/Frankjurney.jpg" rel=lightbox[sample]></a><a title="George Erickson, Low Gross Champion, Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/georgeerickson.jpg" rel=lightbox[sample]></a><a title="Overall Low Gross Champions" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/overall.jpg" rel=lightbox[sample]></a><a title="Rick Catlett, Low Net Champion, Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/rickcatlet.jpg" rel=lightbox[sample]></a><a title="Chester Stokes, Low Net Champion, Super Senior Division" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/stokessrdiv.jpg" rel=lightbox[sample]></a><a title="Team USA Ryder Cup Champions" href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/golftourney/teamusachampions.jpg" rel=lightbox[sample]></a>

jscheuer1
12-12-2009, 09:03 PM
The code from your post is correct and works here. Did you change anything else about the page? What browser are you using?

jeanine
12-12-2009, 09:22 PM
I am using internet explorer. Maybe I have to reload it?

jeanine
12-12-2009, 09:25 PM
I reloaded the page, but that didn't help. I'm using Internet Explorer.

jscheuer1
12-12-2009, 09:37 PM
You took the scripts and lightbox style off or somehow the scripts and lightbox style got taken off of the page.

jeanine
12-12-2009, 10:11 PM
okay I got it to work finally!

If I have questions in the future, can I contact you directly via e-mail or message you on here?

:) :) :)

jeanine
12-12-2009, 10:26 PM
Also, when you click on the photo to prompt the slideshow, is there a simple way to make the faded translucent color darker instead of white?

Thank you for everything!

jscheuer1
12-13-2009, 12:05 AM
Contact me here, I usually look here first anyway.

As for the background, that's called the overly in the lightbox.css file:


#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #FFF;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

It's color is controlled by the highlighted line. If you want it the darkest it can be, set it to #000.

jeanine
12-16-2009, 05:21 PM
I guess I'm not sure how to find this lightbox.css file. When I find it and want to adjust the color to a medium grey, do I just make the numbers 001, 002 to decrease theamount of darkness?

jscheuer1
12-16-2009, 06:17 PM
Your lightbox.css file is in the location indicated by:


<link rel=stylesheet type=text/css href="/Clubs/MarshLandingCC_FL/Uploaded/FacilityPics/engine/css/lightbox.css" media=screen>

In your page's source code, that is unless you've changed it since you posted that. You need to edit your local copy in a plain text editor like NotePad and then upload it to the location on the server of the current lightbox.css file.

I'd go with #000 for now, it will still be pretty light, as the overlay is only partially opaque anyway. This should appear as a light gray.