Discontinued/Classic Products: Listings Manager Add-ons: Tutorial : Dynamic Image Gallery : Interactivetools.com Forum

Home: Discontinued/Classic Products: Listings Manager Add-ons:
Tutorial : Dynamic Image Gallery

1 2 3

View All

ross
Staff / Moderator

May 11, 2005, 3:42 PM

Post #1 of 64 (64220 views)
Shortcut

Tutorial : Dynamic Image Gallery	Can't Post

Hi everyone.

I've got something that's very cool, and I wanted to share it with the rest of you. Cool

.

I've come up with a template that will give your site visitors the ability to dynamically view a listing's thumbnail image in full size. All they need to do is simply mouse over a thumbnail and a full size version is displayed above. I combined this with the XHTML templates that Copious created and I think the effect is pretty awesome, and you can see it in action here:

http://www.interactivetools.com/staff/ross/dynamic_images/listings/l0001.html

If you prefer you can keep your images the way that they are, you can set this up as an alternate image gallery template. Just upload the attached _images.html file to the templates directory on your server. The HTML included is fairly basic, so feel free to change it to suit your site, and take care to leave the JavaScript intact so that the image gallery works. Wink

After you have uploaded the alternate template to the server, just add a link onto your _publish_listing.html template so that you can view the images through the alternate template. The code is really simple, and you can copy it from below:

Code

<a href="$search_url$?view=$listing_num$&template=_images.html" target="_blank">Click here to see image gallery</a>

Once you have this setup, add a new listing and upload some images for it. When you click on the link it will open up a new window with smaller versions of all the images that you have uploaded. The image that you roll your mouse over will appear full size at the top of the page. And that’s all there is to it.

Give this a shot and let me know what you think!
-----------------------------------------------------------
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/

(This post was edited by Cliff on Jul 6, 2005, 10:27 AM)

Attachments:

_images.html (2.55 KB)

_publish_listing.html (3.92 KB)

subedar
User

May 17, 2005, 1:38 AM

Post #2 of 64 (64081 views)
Shortcut

Re: [ross] Dynamic Image Gallery [In reply to]	Can't Post

Hi Ross

I'm really interested in this but when I tried your link the images didn't load or expand???????????

Frown

Neville

Maurice
User

May 17, 2005, 3:41 AM

Post #3 of 64 (64062 views)
Shortcut

Re: [subedar] Dynamic Image Gallery [In reply to]	Can't Post

Hi ross,

I got the same thing in both ie and firefox

can u fix the demo?????

thanx
-------------------------------------------
www.intraserve.nl

Soon! cmsBy.intraserve

MayDay
User

May 17, 2005, 8:44 AM

Post #4 of 64 (63997 views)
Shortcut

Re: [ross] Dynamic Image Gallery [In reply to]	Can't Post

Interesting idea, but I can not even see the images, let alone any pop up, on my Mac both in Firefox and IE5.2

Robert

Robert

Cliff
Staff

May 17, 2005, 10:55 AM

Post #5 of 64 (63983 views)
Shortcut

Re: [ross] Dynamic Image Gallery [In reply to]	Can't Post

Hi Everyone!

Just a quick note to apologize, and to let you know that the images on the example page are working again if you want to check this out.

Sorry for any confusion this may have caused Blush

Regards,
Cliff Stefanuk - Customer Service Manager
[email]support@interactivetools.com[/email]

dedbob
User

May 17, 2005, 5:00 PM

Post #6 of 64 (63948 views)
Shortcut

Re: [ross] Dynamic Image Gallery [In reply to]	Can't Post

Ross... this is cool.

The only thing is... your templates still limit you to 10 photos. The template that Copious made, allows you to do more than 10 photos and it's allowed me to break out of at least ONE of the limitations of listings manager.

Check this:
http://www.trinityheightshomes.com/listings/l0001.php (12 photos)

I could do 16, 20 or even more photos with his javascript Smile

... not that yours isn't just as good.

Great add on though Smile

Need ImageMagick? GD.pm? You need to [url "http://www.getstacked.com"]GetStacked[/url]!
Listings Manager friendly [url "http://www.getstacked.com"]Cheap Web Hosting[/url] only $5.95 a month!

subedar
User

May 18, 2005, 2:31 AM

Post #7 of 64 (63902 views)
Shortcut

Re: [subedar] Dynamic Image Gallery [In reply to]	Can't Post

Hi Ross

It's great and I want it! But..............

Presently I have the images down one side as per your standard configuration. However, I've customised the _publish_listing template to our requirements and do not want to alter it. See....

http://www.homeforsale.org.uk/listman/listings/l0008.html

I don't like the idea of an extra click through so can I just insert the part of the code that will enable this feature with my present template configuration & how do I do it as I'm still a novice?

Neville

ross
Staff / Moderator

May 18, 2005, 1:58 PM

Post #8 of 64 (63872 views)
Shortcut

Re: [dedbob] Dynamic Image Gallery [In reply to]	Can't Post

Hi dedbob.

Thanks for the feedback!

Copious page definitely looks really cool and I am not quite sure how he got that set up. I image that his as used some extra coding to get this going as Listings Manager is setup to handle 10 images per listing.

Maybe Copious could post up a few details on his script for us Wink

.

I’d be very interested to see what is going on in his template 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/

dedbob
User

May 18, 2005, 2:54 PM

Post #9 of 64 (63868 views)
Shortcut

Re: [ross] Dynamic Image Gallery [In reply to]	Can't Post

I'll pm you the template that I'm using after this post Smile

.

The only thing with his template, is that it's a hard coded template... so if you don't have 12 or 16 (or however many) images, then a broken image will appear.

This is easily resolved by replacing broken images on the site with something like a default spacer (transparant gif) using: onError=src="/path/to/images/spacer.gif" for each of the image blocks.

All in all... I think it's a really nice look imho Smile

Scott

Need ImageMagick? GD.pm? You need to [url "http://www.getstacked.com"]GetStacked[/url]!
Listings Manager friendly [url "http://www.getstacked.com"]Cheap Web Hosting[/url] only $5.95 a month!

matrix
User

May 19, 2005, 2:56 PM

Post #10 of 64 (63832 views)
Shortcut

Re: [ross] Dynamic Image Gallery [In reply to]	Can't Post

I love it! But it doesn't work in Firefox for me...does in IE. Is this browser-specific?

Thanks!
Happy Interactive Tools product user since 1999

dedbob
User

May 20, 2005, 10:09 AM

Post #11 of 64 (63799 views)
Shortcut

Re: [matrix] Dynamic Image Gallery [In reply to]	Can't Post

Both work on firefox and IE for me... I've tried 4 different machines.

What version of FF are you running?

Need ImageMagick? GD.pm? You need to [url "http://www.getstacked.com"]GetStacked[/url]!
Listings Manager friendly [url "http://www.getstacked.com"]Cheap Web Hosting[/url] only $5.95 a month!

matrix
User

May 20, 2005, 10:27 AM

Post #12 of 64 (63794 views)
Shortcut

Re: [dedbob] Dynamic Image Gallery [In reply to]	Can't Post

Firefox/1.0.3 (Upgraded after the security flaw announcement a couple of weeks ago.)

Thanks to your response, db, I checked it out on another machine, same browser and it works fine. Finally found a setting to change to make it work on mine: Advanced Javascript, Allow change images.

Sounds like a no-brainer setting, but it wasn't the default when I upgraded Firefox (essentially a new install). Hope everyone else has no problem with it because I'm ready to use this script. It's great! And Firefox is definitely my browser of choice and growing in popularity, so I hear.

dedbob rides to the rescue! Cool

Thanks so much, man!
Happy Interactive Tools product user since 1999

MikeB
Staff / Moderator

May 20, 2005, 2:21 PM

Post #13 of 64 (63778 views)
Shortcut

Re: [matrix] Dynamic Image Gallery [In reply to]	Can't Post

Hi matrix,

Thanks for the post! Smile

I'm glad you managed to get this up and running on your site now. Thanks to dedbob for testing this out on a few different browsers and computers.

Also, I'm sure other users will find this post helpful if they run into a similar problem getting this up and running.

If either you have any other questions or comments 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]

croydon
User

May 21, 2005, 6:11 PM

Post #14 of 64 (63735 views)
Shortcut

Re: [MikeB] Dynamic Image Gallery [In reply to]	Can't Post

In one word - BRILLIANT -

Been trying to figure out how to do this for the last month.

Thanks heaps Ross and all

Croydon

jdisbro
User

May 23, 2005, 10:00 AM

Post #15 of 64 (63639 views)
Shortcut

Re: [dedbob] Dynamic Image Gallery [In reply to]	Can't Post

Does this template work with earlier versions 2.30? Can you send or attach template?

ross
Staff / Moderator

May 23, 2005, 10:57 AM

Post #16 of 64 (63636 views)
Shortcut

Re: [jdisbro] Dynamic Image Gallery [In reply to]	Can't Post

Hi there.

Thanks for posting!

My template should work the same in just about all of the different versions. Both of the templates used on the page are actually attached to my initial post so feel free to grab them and try it out.

I’d be interested to see how you are getting along so keep me up to date Smile

dedbob
User

May 23, 2005, 6:10 PM

Post #17 of 64 (63617 views)
Shortcut

Re: [jdisbro] Dynamic Image Gallery [In reply to]	Can't Post

Here's the template that I'm using... (since some have asked for it).

If you want more photos... just add another row and change the numbers to reflect the additional image numbers.

If you use this image layout, when you're modifying your ad, only select 1 photo in the image manager. Leave the other ones blank. This one selection will show all of the images. If you select all 10 photos, you'll have all photos displayed 10 times... which you don't want.

Hope this helps some people too.

There is a javascript error that I haven't figured out, so I just used the "clear error" javascript that Copious is using. Works like a charm.

Thanks to Copious and all who contributed.
Scott

***EDIT***: I fixed the javascript error and I've uploaded the fixed template now, so all should be good.

Need ImageMagick? GD.pm? You need to [url "http://www.getstacked.com"]GetStacked[/url]!
Listings Manager friendly [url "http://www.getstacked.com"]Cheap Web Hosting[/url] only $5.95 a month!

(This post was edited by dedbob on May 23, 2005, 7:09 PM)

Attachments:

_publish_listing.html (5.43 KB)

ross
Staff / Moderator

May 24, 2005, 12:19 PM

Post #18 of 64 (63585 views)
Shortcut

Re: [dedbob] Dynamic Image Gallery [In reply to]	Can't Post

Hi Dedbob

Thanks for posting up that template!

Now there are two great solutions to image galleries. While my solution will let you select the order of the images, dedbob’s solution will let you have limitless images

I am sure this should cover just about everyone looking for a dynamic image gallery.

Thanks for putting in the effort for us all!
-----------------------------------------------------------
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/

subedar
User

May 25, 2005, 10:21 AM

Post #19 of 64 (63551 views)
Shortcut

Re: [ross] Dynamic Image Gallery [In reply to]	Can't Post

Hi Ross

Am I missing something? I haven't had a reply to my previous post.

Sorry to trouble you.

I think the idea is great!

Neville

ross
Staff / Moderator

May 26, 2005, 10:39 AM

Post #20 of 64 (63533 views)
Shortcut

Re: [subedar] Dynamic Image Gallery [In reply to]	Can't Post

Hi Neville.

Thanks for following up on that one Smile

.

I had originally started making the gallery vertical; however, what I kept running into was that if the images didn’t have a fixed width, they would actually move the whole page around; the vertical list of thumbnail images would be pushed left and right.

I can get that going again for you though, but you might want to double check your images are all the same width Wink

.

Also, were you looking to have the standalone gallery using _images.html as the template? Or were you looking to have it on the listing page itself _publish_listing.html?

I would recommend the standalone gallery because that will give you a lot more room to play with.

I look forward to hearing from you Smile

Steve Simonson
New User

May 27, 2005, 12:25 AM

Post #21 of 64 (63515 views)
Shortcut

Re: [dedbob] Dynamic Image Gallery [In reply to]	Can't Post

dedbob, Ross' image gallery is great but yours was just what I was looking for in my latest project. Buddy, you saved me a LOT of time and hassle since I'm nothing but a javascript cut-and-paster. Owe you, big guy.

For my purposes, I stripped the rows down to one, so I'm just using four images. The properties my clients will be posting are just not that premium.

One thing I did notice in your template was that your main image was 412 X 309 so that your thumbnails of 100 X 75 fit dead-on below it (those thumbnail borders do add up, don't they).

I changed the main image size on my page to 400 x 300. I'm requiring all uploaded images to be 400 x 300 so they don't have to be re-sized (and look a bit better IMHO). I think 400 x 300 is a good dimension clients can more easily remember, too.

But hey, I wanted that killer dedbob look you had with the thumbnails fitting precisely underneath the main image, not sticking out anywhere. I got that same great result by changing the thumbnail dimensions from 100 X 75 to 97 X 73.

Again, thanks. What a delight to frequent a forum that actually yields results! Amazing. . . . Smile

Oh, yeah, one more thing -- as an added dedbob bonus I hadn't expected or remember seeing mentioned, my visitors can click on the main image and it takes'em to Yahoo Maps! wow

(This post was edited by Steve Simonson on May 27, 2005, 12:30 AM)

Si
User

Jun 10, 2005, 2:51 AM

Post #22 of 64 (63336 views)
Shortcut

Re: [ross] Dynamic Image Gallery [In reply to]	Can't Post

Hi

I just want to check one thing and could not find reference to it in the thread, but I may have missed a bit Crazy

.... Am I right in saying that this can only be used if all the pictures in the system have the same aspect ratio? Currently this is landscape, but I assume (that with some work) they could be portrait too.

I have nearly 1000 listings with images that are all different sizes (landscape and portrait) and I am assuming that this will not be one that I can move to without editing 8000 odd images.

I think it looks great by the way! Cool

Just may have to save using it for my next project.

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

dedbob
User

Jun 10, 2005, 10:03 AM

Post #23 of 64 (63328 views)
Shortcut

Re: [Si] Dynamic Image Gallery [In reply to]	Can't Post

Well, these can both be used with either... but it will look funny with a combination of landscape/portrait pics. Listings Manager doesn't have a way of distinguising between these layouts in order to resize them per layout.

You're going to run into this any time you do a combination of both. Even ebay has this problem.

Thanks
Scott

Need ImageMagick? GD.pm? You need to [url "http://www.getstacked.com"]GetStacked[/url]!
Listings Manager friendly [url "http://www.getstacked.com"]Cheap Web Hosting[/url] only $5.95 a month!

jbetohl
New User

Jun 12, 2005, 7:43 PM

Post #24 of 64 (63278 views)
Shortcut

Re: [ross] Dynamic Image Gallery [In reply to]	Can't Post

Hi ross

Im new in the interactivetools family

can you send me detail how to work with this scrip

elsolkc@yahoo.com

thank you

ross
Staff / Moderator

Jun 13, 2005, 11:42 AM

Post #25 of 64 (63264 views)
Shortcut

Re: [jbetohl] Dynamic Image Gallery [In reply to]	Can't Post

Hi there.

Thanks for posting and welcome to the board!

I would be more than happy to go into more detail for you on how to get this going on your site. Was there something in particular that was giving you trouble? Perhaps you could post a link to an example of how far you got in setting this up.

If you were interested, you can take a look at the example site linked in my original thread to see the script in action and get ideas of how you want to get it setup on your site.

I look forward to hearing from you Smile

1 2 3

View All

interactivetools.com

Company Info

Contact Us

Newsletter

interactivetools.com

Company Info

Contact Us