picture zoom / gallery

Good evening,

I was wondering how to do the following:

Please click on the main product picture
http://www.riverside-furniture.com/prodshell.aspx?d=01021008445400029

and up pops (what looks like scripty lightbox 2) with the smaller gallery pix that you can click on to zoom into details

How can this be achieved in FW - but with a caption underneath when the picture gets big.

Also, is it possible to do the “magnifying glass” concept when you mouse over a picture it zooms into the area your mouse is over>

thanks

Julie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you look at this page at the RBZoom example you will see what is appearing in a lightbox on the page you link to. http://www.deltadesign.co/fw_examples/jQuery/zoomify.html

Or a very similar setup.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I built these days a combination of a jQueryZoom Script and the Scripty Carousel Action. If both can be wrapped into a lightbox I personally doubt but honestly I do not see the big sense in it.

Caveat:

The example can be found on my page under freeway examples called jQZoom+Carousel. Due its content I can’t (and I won’t) share a direct link here unless I haven’t rebuilt it in a theme called food&beverage. It might actually offend somebody’s feelings what I do not want to do. I’ll furthermore try to share, if I find some time, a freeway file to investigate how it is done.

Caveat2:

All “Zoom-Scripts” I personally found in Web are jQuery based. The bigger concern is not the "conflict scenario (solvable in most of the cases) but the fact to load two nearly identical libraries. It is more a case of bandwidth and file-size.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Maybe take a look at http://www.magictoolbox.com/. Their support is top notch when trying to implement into third party applications such as Freeway. You will most likely hear from Jake. Say hi from me!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok, RBzoom looks like a winner to me…

I tried to google it and could not find it…

Thanks!

Julie

On May 15, 2012, at 3:42 AM, DeltaDave wrote:

If you look at this page at the RBZoom example you will see what is appearing in a lightbox on the page you link to. http://www.deltadesign.co/fw_examples/jQuery/zoomify.html

Or a very similar setup.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thomas - thank you!

I like that! (and being free helps LOL)

I would love to know more on how to do that on a FW site.

Julie

On May 15, 2012, at 4:51 AM, Thomas Kimmich wrote:

I built these days a combination of a jQueryZoom Script and the Scripty Carousel Action. If both can be wrapped into a lightbox I personally doubt but honestly I do not see the big sense in it.

Caveat:

The example can be found on my page under freeway examples called jQZoom+Carousel. Due its content I can’t (and I won’t) share a direct link here unless I haven’t rebuilt it in a theme called food&beverage. It might actually offend somebody’s feelings what I do not want to do. I’ll furthermore try to share, if I find some time, a freeway file to investigate how it is done.

Caveat2:

All “Zoom-Scripts” I personally found in Web are jQuery based. The bigger concern is not the "conflict scenario (solvable in most of the cases) but the fact to load two nearly identical libraries. It is more a case of bandwidth and file-size.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I tried to google it and could not find it…

Have a look at codecanyon.net http://codecanyon.net/item/my-products-zoomer/53356?WT.ac

There are quite a few on there.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Julie,

glad you like it. I have a simplified version (in total 2) but with client images yet that I have to substitute naturally. As far as I am ready with it I’ll shoot you via PM. It contains all the necessary file, the freeway-doc and the used images (some food&beverage). Meanwhile you could have a look on http://kimmich-dm.de/screencasts/screen3-mzoom.php where I tried to show the “general handling” of scripts like these.

MagicZoom or the codecanyon stuff is always a good recommend however a paid one. The script I use in the above meant example is a found on:

mind-projects.it - mind projects Resources and Information. (if you have a job in SanDiego for him please do :-))))). It is free (donate) and I picked it as alternative to the paid one.

So please be patient - I’ll hurry up (uffff).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK - here we go, a clean-air theme including a simplified version of Zoom+Carousel. Please visit:

http://kimmich-dm.de/testings/cpluszoom.html

Have fun - it’s just one of a couple possibilites as already figured out.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you!

I will look at that.

J
On May 15, 2012, at 7:47 PM, DeltaDave wrote:

I tried to google it and could not find it…

Have a look at codecanyon.net http://codecanyon.net/item/my-products-zoomer/53356?WT.ac

There are quite a few on there.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you!

for all I will post when I get my sample up…

J
On May 16, 2012, at 5:34 AM, Thomas Kimmich wrote:

OK - here we go, a clean-air theme including a simplified version of Zoom+Carousel. Please visit:

http://kimmich-dm.de/testings/cpluszoom.html

Have fun - it’s just one of a couple possibilites as already figured out.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Good evening,

Thank you for the screen casts THomas.

I am a bit stuck. If you or anyone else can answer this I would be appreciative.

here is my sample page:

http://grassrootsweb.net/sans2/untitled1.html

I watched the screen cast of the part 2 with mult selections. I want to click on the thumbnail and make it into the “bigger” area - so that the client can use the zoom tool

right now when you click on the thumbnail you get the bigger pix - in its own window. How do I fix this?

thank you

Julie
On May 16, 2012, at 10:56 AM, Julie Maxwell Allen wrote:

Thank you!

for all I will post when I get my sample up…

J
On May 16, 2012, at 5:34 AM, Thomas Kimmich wrote:

OK - here we go, a clean-air theme including a simplified version of Zoom+Carousel. Please visit:

http://kimmich-dm.de/testings/cpluszoom.html

Have fun - it’s just one of a couple possibilites as already figured out.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Julie,

whatever you have in the rel (click thumb, link, extended part) change this to (the value):

zoom-id:Zoomer

to substitute the current

zoom=id Zoomer

Hope this fixes it (you’re not far away - and I have to think about to review this screencast, so sorry more than my fault).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That worked!! the only thing… the images increase larger then the box and don’t know how to close (make them the same size as the original/… or go back to that .

Thank you so much!

J
On May 16, 2012, at 7:11 PM, Thomas Kimmich wrote:

zoom-id:Zoomer


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Julie,

having had a look into it and rebuilt a running version which I sent you via PM. Here are some important notes:

  1. Preparation of your images:

Basically you’ll need images, that have all the same aspect ratio. Your start should be a big, big image for example something like 1200px to 1200px. All other images to use should have the same so you probably need to trim them to match the basic ratio. Call these image-zoom-1.jpg (image-zoom-2.jpg …). Resize each to match the “screener-image”, in your case the div id=img97o so something like 300x300px. Call those image-thumb-1.jpg (image-thumb-2.jpg…)

To achieve this I use https://skitch.com/ which helps you to save so much time.

  1. The Freeway set-up

Using clear names for your images (thumb - zoom) should help you to make things a bit more logical:

Draw a graphic item with the size of 300 x 300 and call this screener. CMD-E and choose the image-thumb-1.jpg. Apply the Upload Extra Resources Action and choose (the pickers in Resources folder) the files:

magiczoom.js, magiczoom.css

Leave it selected or select it and “edit hyperlink” and point in the dialog to the “zoom-version” of this applied image so here:

Resources/image-zoom-1.jpg

Click on the extended and type in the following:

Now create the first thumbnail, let’s say 60x60 px. Apply the image-thumb-1.jpg (the same as for the screener) and resize it to match the thumb. Apply the Upload Extra Resources to it and choose the following to files:

image-thumb-1.jpg and image-zoom-1.jpg

Apply the following to this thumb:

Resources/image-thumb-2.jpg

Now this thumb still selected hit CMD-d and duplicate this. All you now have to do is to change all image version numbers 1 to two. Don’t forget to change the images in the Upload Extra Resources and pick there the number 2 versions.

Repeat this for all the other wanted thumbnails.

Finally apply the:

in the before end head tag of your page.

IMPORTANT NOTE:

All “paths” are pointing to the main root folder of your host. If you work in subfolders or have a host that needs some htdocs or stuff you need to adjust this in all the dialogs. Sometimes it is even necessary to have absolute links like

http://yourdomain

I have to rethink my so old screencasts to make it as in this way described a bit clearer and finally easier.

Hope this helps.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I had all working perfectly -

I uploaded - sent the proposal email to the client -
checked the link to proudly display to you guys
------ AND THE ZOOM IS NOT WORKING AT ALL NOW!!! HELP!!!

arggghhhh!!!

any assistance would be helpful

http://grassrootsweb.net/sans2/untitled1

On May 17, 2012, at 10:31 AM, Thomas Kimmich wrote:

Hi Julie,

having had a look into it and rebuilt a running version which I sent you via PM. Here are some important notes:

  1. Preparation of your images:

Basically you’ll need images, that have all the same aspect ratio. Your start should be a big, big image for example something like 1200px to 1200px. All other images to use should have the same so you probably need to trim them to match the basic ratio. Call these image-zoom-1.jpg (image-zoom-2.jpg …). Resize each to match the “screener-image”, in your case the div id=img97o so something like 300x300px. Call those image-thumb-1.jpg (image-thumb-2.jpg…)

To achieve this I use https://skitch.com/ which helps you to save so much time.

  1. The Freeway set-up

Using clear names for your images (thumb - zoom) should help you to make things a bit more logical:

Draw a graphic item with the size of 300 x 300 and call this screener. CMD-E and choose the image-thumb-1.jpg. Apply the Upload Extra Resources Action and choose (the pickers in Resources folder) the files:

magiczoom.js, magiczoom.css

Leave it selected or select it and “edit hyperlink” and point in the dialog to the “zoom-version” of this applied image so here:

Resources/image-zoom-1.jpg

Click on the extended and type in the following:

Skitch | Evernote

Now create the first thumbnail, let’s say 60x60 px. Apply the image-thumb-1.jpg (the same as for the screener) and resize it to match the thumb. Apply the Upload Extra Resources to it and choose the following to files:

image-thumb-1.jpg and image-zoom-1.jpg

Apply the following to this thumb:

Resources/image-thumb-2.jpg

Now this thumb still selected hit CMD-d and duplicate this. All you now have to do is to change all image version numbers 1 to two. Don’t forget to change the images in the Upload Extra Resources and pick there the number 2 versions.

Repeat this for all the other wanted thumbnails.

Finally apply the:

in the before end head tag of your page.

IMPORTANT NOTE:

All “paths” are pointing to the main root folder of your host. If you work in subfolders or have a host that needs some htdocs or stuff you need to adjust this in all the dialogs. Sometimes it is even necessary to have absolute links like

http://yourdomain

I have to rethink my so old screencasts to make it as in this way described a bit clearer and finally easier.

Hope this helps.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

ps It works “sometimes” in preview / view in browser" - which is I think the most frustrating part.

I have protaculous and Remove from RPL, CSS menu , upload, CSS corners, CSS shadow

THANK YOU
On May 17, 2012, at 10:09 PM, Julie Maxwell Allen wrote:

I had all working perfectly -

I uploaded - sent the proposal email to the client -
checked the link to proudly display to you guys
------ AND THE ZOOM IS NOT WORKING AT ALL NOW!!! HELP!!!

arggghhhh!!!

any assistance would be helpful

http://grassrootsweb.net/sans2/untitled1

On May 17, 2012, at 10:31 AM, Thomas Kimmich wrote:

Hi Julie,

having had a look into it and rebuilt a running version which I sent you via PM. Here are some important notes:

  1. Preparation of your images:

Basically you’ll need images, that have all the same aspect ratio. Your start should be a big, big image for example something like 1200px to 1200px. All other images to use should have the same so you probably need to trim them to match the basic ratio. Call these image-zoom-1.jpg (image-zoom-2.jpg …). Resize each to match the “screener-image”, in your case the div id=img97o so something like 300x300px. Call those image-thumb-1.jpg (image-thumb-2.jpg…)

To achieve this I use https://skitch.com/ which helps you to save so much time.

  1. The Freeway set-up

Using clear names for your images (thumb - zoom) should help you to make things a bit more logical:

Draw a graphic item with the size of 300 x 300 and call this screener. CMD-E and choose the image-thumb-1.jpg. Apply the Upload Extra Resources Action and choose (the pickers in Resources folder) the files:

magiczoom.js, magiczoom.css

Leave it selected or select it and “edit hyperlink” and point in the dialog to the “zoom-version” of this applied image so here:

Resources/image-zoom-1.jpg

Click on the extended and type in the following:

Skitch | Evernote

Now create the first thumbnail, let’s say 60x60 px. Apply the image-thumb-1.jpg (the same as for the screener) and resize it to match the thumb. Apply the Upload Extra Resources to it and choose the following to files:

image-thumb-1.jpg and image-zoom-1.jpg

Apply the following to this thumb:

Resources/image-thumb-2.jpg

Now this thumb still selected hit CMD-d and duplicate this. All you now have to do is to change all image version numbers 1 to two. Don’t forget to change the images in the Upload Extra Resources and pick there the number 2 versions.

Repeat this for all the other wanted thumbnails.

Finally apply the:

in the before end head tag of your page.

IMPORTANT NOTE:

All “paths” are pointing to the main root folder of your host. If you work in subfolders or have a host that needs some htdocs or stuff you need to adjust this in all the dialogs. Sometimes it is even necessary to have absolute links like

http://yourdomain

I have to rethink my so old screencasts to make it as in this way described a bit clearer and finally easier.

Hope this helps.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Julie,

change the before end head tag from:

to

(the R for Resources. I got a “not found 404” for both the .js and the .css.

Hope this fixes it. If not, try to run it (for testing purposes) with protaculous. If it works then we could have the classy jQuery conflict between both libraries (what I do not expect … uahhh).

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

arrgn:

meant “without protaculous for testing purposes”.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you… it was the first problem!! how such simple things cause such big issues…

you are wonderful TY…

when you have a chance I would love the second request for future use.
(not in panic mode now LOL )

Julie

On May 18, 2012, at 3:12 AM, Thomas Kimmich wrote:

arrgn:

meant “without protaculous for testing purposes”.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options