Discontinued/Classic Products: Listings Manager Add-ons: Tutorial: Overlay large image on current page. : Interactivetools.com Forum

Home: Discontinued/Classic Products: Listings Manager Add-ons:
Tutorial: Overlay large image on current page.

Damon
Staff / Moderator

Mar 14, 2006, 11:42 AM

Post #1 of 23 (78796 views)
Shortcut

Tutorial: Overlay large image on current page.	Can't Post

I came across a very handy script (Lightbox JS) that can be used to overlay images on the current page. What does this mean?

Instead of clicking a thumbnail image and opening a larger image in the browser window (or a popup window), you can have the image open as another layer on the current page. See my Listings page example link below to see it in action.

Here are the steps to set it up for Listings Manager:
1. Upload Lightbox JS
Upload the lightbox folder and files to your Listings Manager images directory. The zipped file is attached.
example: http://www.sitename.com/listman/images/lightbox/*

2. Edit your _publish_listing.html template
Open your _publish_listing.html template, make a backup making any changes, and add the following in between the head tags:

<script type="text/javascript" src="$image_url$/lightbox/lightbox.js"></script>
<style type="text/css">@import "$image_url$/lightbox/lightbox.css";</style>

Next, add rel="lightbox" to the image link tag to enable this link.
example: <a href="$listing_url$/images/$file$" rel="lightbox" title="$desc$" target="_blank">

3. Upload and Re-Publish
Upload the modifed _publish_listing.html template to your server in the /listman/templates/_[industry]/ folder, then login to Listings Manager and in the Setup Options under the General Tab, Re-publish all listings.

4. View the Published Listings
Clicking a thumbnail image will now overlay the larger image on the current page. Click the image or press "x" to close the image.

Listings page example:
http://interactivetools.com/staff/damon/listings/listing_page_example.html

Here is a link for more details about the Lightbox JS script:
http://www.huddletogether.com/projects/lightbox/

---------------------------------------------------
Cheers
Damon Edis
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

(This post was edited by Damon on Mar 14, 2006, 12:36 PM)

Attachments:

Lightbox_JS.zip (6.31 KB)

slysop
User

Apr 10, 2006, 2:00 PM

Post #2 of 23 (78089 views)
Shortcut

Re: [Damon] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hey i am going to try this out and I will let you know how it goes. Looks like what I have been looking for. Just to let you know your link is broken/non existant on the very first one.

Thanks for the post!

slysop
User

Apr 10, 2006, 2:03 PM

Post #3 of 23 (78088 views)
Shortcut

Re: [slysop] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

hahah never mind about the broken/non existant link.
Yea stupid sometimes

slysop
User

Apr 10, 2006, 2:32 PM

Post #4 of 23 (78087 views)
Shortcut

Re: [slysop] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Works like a charm!

Thanks for the post.

MikeB
Staff / Moderator

Apr 11, 2006, 11:24 AM

Post #5 of 23 (78026 views)
Shortcut

Re: [slysop] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi slysop,

Thanks for posting! Smile

I'm glad to hear that you've been able to get this up and running.

If you have any other questions or comments about this you can feel free to let me know! Smile

Cheers,
Mike Briggs - Product Specialist
support@interactivetools.com

[hr][i][url "http://www.interactivetools.com/consulting/"][b]Hire me![/b][/url]
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with [url "http://www.interactivetools.com/consulting/"][b]Priority Consulting[/b][/url].[/i]

Trixmd
User

Apr 11, 2006, 7:42 PM

Post #6 of 23 (77963 views)
Shortcut

Re: [Damon] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

I really love this. It looks so much nicer than the clunky blank windows I was using. Thank you!! :)

mbodamer
User

Apr 11, 2006, 9:46 PM

Post #7 of 23 (77921 views)
Shortcut

Re: [Trixmd] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Guess I need to monitor these forums a little more... I just came here to post that I found the same thing. I just finished installing tia nd was so happy I got it to work, I was going to come here and tell you how I did it...

Why is it I always try to reinvent the wheel :-)

would have saved me an hour or two seeig this post earlier.

works great by the way....

Si
User

May 12, 2006, 2:54 AM

Post #8 of 23 (77520 views)
Shortcut

Re: [Damon] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi there

I am liking the look of this big time, it seems to get around pop up blocker problems too and would be keen to install it.

However... (why do I always have one of those? Unsure

) I was playing with the demo and found one small problem with it in both Firefox (1.5) and IE (6). If you click on an image whilst the page is still loading, then it opens it in a new browser window and not using lightbox as it is supposed to, which was confusing me for a while (until I figured out that was what was happening. As soon as the page has loaded it all kicks in fine.

I will look into it an see if I can implement anything to work around this , anyone got any ideas how it could be ironed out? Or is it something I just need to accept if I am going to implement it... Smile

Cheers
Simon
[url "http://www.turkish-homes.com"]Turkish Homes[/url]

Donna
Staff / Moderator

May 12, 2006, 10:11 AM

Post #9 of 23 (77511 views)
Shortcut

Re: [Si] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi Simon,

You're right -- if the JavaScript hasn't fully loaded, the lightbox functionality can't take place.

This is usual behaviour for any JavaScript -- until the JavaScript has fully loaded, it won't process normally. However, it does "degrade" nicely so that nothing actually breaks, and it simply opens the image in a new window, rather than doing something weird or breaking the page. However, the JavaScript usually loads pretty quickly -- in my tests, I found that I had to hit the image in under a second to "break" the script like that.

I hope this helps. :)

Donna

--
support@interactivetools.com

Si
User

May 12, 2006, 10:49 AM

Post #10 of 23 (77510 views)
Shortcut

Re: [Donna] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

That does help, thanks. Like you say it does degrade, just wondered. Smile

Simon
[url "http://www.turkish-homes.com"]Turkish Homes[/url]

mw5cents
User

May 14, 2006, 3:50 PM

Post #11 of 23 (77436 views)
Shortcut

Re: [Damon] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Just a FYI for those having problems implementing this GREAT addon, if you have the onload attribute in your body tag you need to add initLightbox().

I was beating my head against the wall trying to get this to work & couldn't figure out why it would work on my printer friendly template but not on my publish listing template.

I checked out the project site (http://www.huddletogether.com/projects/lightbox/) and found the answer that saved this handy little addon from getting the boot. Before:

Code

 <body onLoad="MM_preloadImages('../images/nav_home-over.jpg','../images/nav_about-over.jpg')">

Code

 <body onLoad="MM_preloadImages('../images/nav_home-over.jpg','../images/nav_about-over.jpg')initLightbox()">

Thank you Damon for this excellent addon & thank you Mike for all your help over the phone!

Si
User

May 15, 2006, 10:07 AM

Post #12 of 23 (77419 views)
Shortcut

Re: [Damon] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Damon

Thanks for this tip, I implented it and it worked a dream. I then followed your link to the Lightbox website and found that there is now a version 2, which I had not seen mentioned here.

It enables the images to be displayed as sets, so you can mouse over the image and click to see the next and previous image etc... I think it looks great and seems to get around pop-up blockers too.

Anyhow, just wanted to post a link to a page to show it to you all and to thank Damon for the tip. Also if anyone notices any anomalies would be great to hear from you.... It is as easy to implement into listings manager as outlined above and only needed an extension to the tag from rel="lightbox" to rel="lightbox[roadtrip]".

Here is a link to my site: http://www.turkish-homes.com/rm/listings/l0622.shtml

This is to the Version 2 Lightbox site: http://www.huddletogether.com/projects/lightbox2/

Hope that some of you find this useful. Now all I have to do is stop my agents uploading images 1000 pixels wide!!!

Cheers
Si
[url "http://www.turkish-homes.com"]Turkish Homes[/url]

ross
Staff / Moderator

May 15, 2006, 10:50 AM

Post #13 of 23 (77413 views)
Shortcut

Re: [Si] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi Si.

Thanks for posting those links!

I believe Mike may have already been looking into this but it�s still great to see that you are working on it too. I really like version 2 of lightbox. It�s so fast and powerfull. Will make an excellent addition to anyone�s site.

Let me know if there is anything I can do to help Smile

.
-----------------------------------------------------------
Cheers,
Ross Fairbairn - Product Specialist
support@interactivetools.com

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/

singleframe
User

Jul 27, 2006, 6:54 AM

Post #14 of 23 (76484 views)
Shortcut

Re: [ross] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi, I have followed the install instructions perfectly including adding initLightbox and it works which is nice but the "close.gif" does not display. Anyone know how I can fix this?

tonycook
User

Jul 27, 2006, 8:18 AM

Post #15 of 23 (76477 views)
Shortcut

Re: [Damon] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

In the current Jul 26, 2006 newsletter, you mention that Litebox is now available.

Do you think you could post the correct code for this, for those JS-challenged mortals such as myself?

I attempted to set up the new version, to no avail. Fortunately, I didn't mess up the existing pages!
Tony Cook
Searoom Communications, Toronto, Canada
www.searoom.com
www.boatsell.com
www.boatsell.ca

ChetW
Staff

Jul 28, 2006, 10:45 AM

Post #16 of 23 (76448 views)
Shortcut

Re: [singleframe] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi,

Thanks for the post!

It is a little hard to tell why your "close.gif" isn't being displayed without taking a closer look at your site. What you may want to do is fill out a support request with ftp information, you can fill out a request using the link below:

https://www.interactivetools.com/support/email_support.cgi
Cheers,
Chet Woodside - Product Specialist
support@interactivetools.com

[hr][i][url "http://www.interactivetools.com/consulting/"][b]Hire me![/b][/url]
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with [url "http://www.interactivetools.com/consulting/"][b]Priority Consulting[/b][/url].[/i]

MikeB
Staff / Moderator

Jul 28, 2006, 12:41 PM

Post #17 of 23 (76442 views)
Shortcut

Re: [tonycook] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi Tony,

Thanks for the post! Smile

I've looked over the tutorial for integrating Litebox and it looks like it's actually reverse compatible with just one or two minor changes.

What I'd recommend is getting Damon's tutorial up and running on your site and from there you should be able to just replace the JavaScript as outlined in the Litebox tutorial.

If you do have any questions while you're running through this, just let me know! Smile

BigSea
Novice

Nov 28, 2006, 12:01 PM

Post #18 of 23 (74831 views)
Shortcut

Re: [Damon] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Why can't I get this to work? I've followed the instructions to a "T" . . . I've tried loading both versions and neither work, using a number of different methods and locations for the files. Nothing seems to be working!!

http://www.davidpricerealtor.com/listman/listings

Argh . . .I really really want to use this . . .
Big Sea Design
Graphic & Web Design for Little Fish
:: [url "http://www.davidpricerealtor.com]St. Pete, Florida Real Estate[/url]

Donna
Staff / Moderator

Nov 29, 2006, 3:15 PM

Post #19 of 23 (74811 views)
Shortcut

Re: [BigSea] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi there,

It looks like you've currently got the "mouseover" script working -- when I mouse over the smaller images on this page:

http://www.davidpricerealtor.com/listman/listings/l0004.html

...they're reflected on the larger one above. Is that what you were hoping to have? :)

Donna

--
support@interactivetools.com

BigSea
Novice

Nov 30, 2006, 7:49 AM

Post #20 of 23 (74787 views)
Shortcut

Re: [Donna] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

I do . . . because I gave up on the lightbox stuff. . . I'd rather have it, though . . .
Big Sea Design
Graphic & Web Design for Little Fish
:: [url "http://www.davidpricerealtor.com]St. Pete, Florida Real Estate[/url]

Donna
Staff / Moderator

Dec 1, 2006, 8:47 AM

Post #21 of 23 (74770 views)
Shortcut

Re: [BigSea] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi there,

I'd be happy to give you a hand with it -- can you upload the template you've used to try to get it working? You can use the search engine to specify a different template like this:

http://www.davidpricerealtor.com/listman/exec/search.cgi?view=4&template=_publish_listing.html

...but replace "_publish_listing.html" with any other template. This will only be visible to those who know the address, so your regular users won't see it. But, we can also use it for troubleshooting. :)

Donna

--
support@interactivetools.com

Dbro
New User

Feb 7, 2009, 2:40 PM

Post #22 of 23 (62284 views)
Shortcut

Re: [Damon] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Have you also implemented the lightbox 2 version as well. I don't see how it calls all of the pictures with the code?

1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

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

I know this part of your script calls the code, correct?



<p><a href="$listing_url$/images/$file$" rel="lightbox" title="$desc$" target="_blank"> <img src="$listing_url$/images/$thumbnail$" width="$thumbnail_width$"
border="0" alt="Photo"></a><br>

Donna
Staff / Moderator

Feb 10, 2009, 4:49 PM

Post #23 of 23 (62107 views)
Shortcut

Re: [Dbro] Tutorial: Overlay large image on current page. [In reply to]	Can't Post

Hi there,

Yep -- the instructions are virtually the same, there's just an extra javascript file to include. :)

Donna

--
support@interactivetools.com

interactivetools.com

Company Info

Contact Us

Newsletter

interactivetools.com

Company Info

Contact Us