 | | |
|
ross
Staff
/ Moderator
May 11, 2005, 3:42 PM
Post #1 of 62
(39439 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.  .
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. 
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:
<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.
(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 62
(39300 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???????????
Neville
|
|
| |
|
Maurice
User
May 17, 2005, 3:41 AM
Post #3 of 62
(39281 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
we buildt:
http://www.buitenhuis.nl
http://www.squerist.nl
http://www.movb.nl
http://www.lvsvo.aimfor.nl/
http://www.vanstraten.net
http://www.beukenrode.nl
http://www.kydonk.nl
http://www.geneeskundigevereniging.nl
http://www.nvzd.nl
http://www.geneeskundigevereniging.nl
http://www.vhmz.nl
http://www.generate-it.nl
http://www.florint.nl
|
|
| |
|
MayDay
User
May 17, 2005, 8:44 AM
Post #4 of 62
(39216 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 62
(39202 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 
Regards,
Cliff Stefanuk - Customer Service Manager
support@interactivetools.com
|
|
| |
|
dedbob
User
May 17, 2005, 5:00 PM
Post #6 of 62
(39167 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  ... not that yours isn't just as good.
Great add on though
Need ImageMagick? GD.pm? You need to GetStacked!
Listings Manager friendly Cheap Web Hosting only $5.95 a month!
|
|
| |
|
subedar
User
May 18, 2005, 2:31 AM
Post #7 of 62
(39121 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 62
(39091 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 .
I’d be very interested to see what is going on in his template .
-----------------------------------------------------------
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.
|
|
| |
|
dedbob
User
May 18, 2005, 2:54 PM
Post #9 of 62
(39087 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 .
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
Scott
Need ImageMagick? GD.pm? You need to GetStacked!
Listings Manager friendly Cheap Web Hosting only $5.95 a month!
|
|
| |
|
matrix
User
May 19, 2005, 2:56 PM
Post #10 of 62
(39051 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 62
(39018 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 GetStacked!
Listings Manager friendly Cheap Web Hosting only $5.95 a month!
|
|
| |
|
matrix
User
May 20, 2005, 10:27 AM
Post #12 of 62
(39013 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! Thanks so much, man!
Happy Interactive Tools product user since 1999
|
|
| |
|
MikeB
Staff
/ Moderator
May 20, 2005, 2:21 PM
Post #13 of 62
(38997 views)
Shortcut
|
|
Re: [matrix] Dynamic Image Gallery
[In reply to]
|
Can't Post
|
|
Hi matrix,
Thanks for the post!
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!
Cheers,
Mike Briggs - 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.
|
|
| |
|
croydon
User
May 21, 2005, 6:11 PM
Post #14 of 62
(38954 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 62
(38858 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 62
(38855 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 .
-----------------------------------------------------------
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.
|
|
| |
|
dedbob
User
May 23, 2005, 6:10 PM
Post #17 of 62
(38836 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 GetStacked!
Listings Manager friendly Cheap Web Hosting 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 62
(38804 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.
|
|
| |
|
subedar
User
May 25, 2005, 10:21 AM
Post #19 of 62
(38770 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 62
(38752 views)
Shortcut
|
|
Re: [subedar] Dynamic Image Gallery
[In reply to]
|
Can't Post
|
|
Hi Neville.
Thanks for following up on that one .
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 .
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 .
-----------------------------------------------------------
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.
|
|
| |
|
Steve Simonson
New User
May 27, 2005, 12:25 AM
Post #21 of 62
(38734 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. . . .
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 62
(38555 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  .... 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! Just may have to save using it for my next project.
Cheers
Si
Turkish Homes
|
|
| |
|
dedbob
User
Jun 10, 2005, 10:03 AM
Post #23 of 62
(38547 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 GetStacked!
Listings Manager friendly Cheap Web Hosting only $5.95 a month!
|
|
| |
|
jbetohl
New User
Jun 12, 2005, 7:43 PM
Post #24 of 62
(38497 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 62
(38483 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 .
-----------------------------------------------------------
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.
|
|
| |
| | |
|
1
