[Pro] Creating Rollovers to display Higher Resolution Image

I have 9 images of products on my page. I want to be able to mouse over an image and have a larger image appear so that people can see the detail. I don’t want to create a new pic in window because I want the person to be able to quickly view the images as they mouse over them. Do I have to add the large, higher resolution to the page and hide it or is there a way to just link to that higher resolution file, saving me soooo much time?


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

If you want to use the Actions that ship with Freeway, then yes, you will need to add all of the high-rest images to your page, set them to their desired “reveal” location, and set them to be initially hidden. This does mean that your layout will become like the classic game “Battleship” when you try to manipulate things layered lower on the page without being able to see them. (In the left column of the Freeway interface, either toggle the disclosure triangle left of the page name down, or click on the word Site at the top of the column so it toggles to Page, and you will see a hierarchical list of all the elements on your page. You did remember to give each one a meaningful name, right? Click on the name of an element, and it will be highlighted in the design view. Press the Return key after you highlight it, and it will “vault” to the top of the stack momentarily so you can manipulate its content. Note that this doesn’t work uniformly for all content types. You may have to juggle the stack order with Bring to Front and Send to Back instead, or drag items up and down the list in the left hand column. Counter-intuitively, down in the list brings it “up” in the page stacking order.)

If you want to do some sleight of hand with CSS, you can use the CSS3 Transform argument to do this without additional images or markup, but since this is just zooming up the image that is in the page, you will need to place your high-res images directly and then scale them to fit the box. There’s no free lunch here.

http://scripty.walterdavisstudio.com/zoom.html

Walter

On Oct 9, 2013, at 12:10 AM, SDinSD wrote:

I have 9 images of products on my page. I want to be able to mouse over an image and have a larger image appear so that people can see the detail. I don’t want to create a new pic in window because I want the person to be able to quickly view the images as they mouse over them. Do I have to add the large, higher resolution to the page and hide it or is there a way to just link to that higher resolution file, saving me soooo much time?


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 want to be able to mouse over an image and have a larger image appear so that people can see the detail

There are plenty of canned scripts out there for this if you want to go down that route

Heres an example of one http://www.deltadesign.co/fw_examples/jQuery/rbzoom.html

David


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

This is perfect but what do I do with this? Where would I put this code and how would I direct it to certain pics. Sorry for being a novice.


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

As I said - this is a canned script.

It may not be suitable for a novice if you have no experience in added extra code/scripts to a FW page.

Have a look at a site like CodeCanyon for something suitable http://codecanyon.net/search?page=2&term=zoom&utf8=✓

Once you have found something you like then someone here will probably be able to help you integrate it into a FW page.

Caveat - FW native actions primarily use Script/Protaculous so if you want to use native FW effects/actions on the same page than a script that is compatible would be best.

This is the one used in my demo

D


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

To spell it out for a first-timer: if you see the word jQuery anywhere in the code, run screaming.

You absolutely can use jQuery if you also don’t use any of the FX Actions or my Scripty Actions, or many other Actions that include Prototype in the page.

When you add Prototype and jQuery to the same page, three things happen. 1. Most of the non-framework JavaScript on the page will stop working. 2. Neither Prototype or jQuery or effects built on top of them will work. 3. Your visitors and/or clients will have to wade through a twice-as-large-as-necessary page download to discover that the ‘scripty’ bits don’t work.

Walter

On Oct 9, 2013, at 7:11 PM, DeltaDave wrote:

if you want to use native FW effects/actions on the same page than a script that is compatible would be best.


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