FW 4 Expression engine and ebay style photos

This is a bit of can I do it?

First of all can I create an ebay style photo listing where there is one large image and smaller thumbnails that you can roll over to show a larger version.
If I can, can I then use EE tags to populate the image files in the html?

Thanks for any help

regards

Adam


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

maybe I need to explain this a little better as I think it should be doable.

I would like three thumbnails and ! large image on show. When clicking on a thumbnail its corresponding image shows up. I think show/hide layer but…

I want to be able to add the code for the images by hand as I am editing a page in Expression Engine and this draws the images (and resizes them) from a database.

Any help.

please

Adam


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

Have a look at this page http://www.deltadzine.net/zoomify.html

Uses a script called RB Zoom - no idea how to use with EE though!

David


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

Thanks David
Nice but a bit more than I wanted really although I will go and have a look at the code in a bit more detail. I literally want some white space back on my page at the moment I show three largish images and would like to go to one large image and three thumbnails so I can turn commenting on in Expression Engine so viewers can leave memories of their earliest digital watches.

kind regards

Adam


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

You could try something like this:

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

The only thing tricky here is getting the CSS right and making your
image boxes have no dimensions (and I’m not even sure if that last
part is even critical). The images are all really the same size, but
they are styled to appear as if they are preview or full-size versions
of themselves. The whole thing is super-quick because no additional
images have to load or anything.

Here’s the script:

$('photos').observe('click',function(evt){
	var elm = evt.findElement('div.preview');
	if(elm){
		var main = $('main').down('p');
		$('main').update(elm.down('p'));
		elm.update(main);
	}
});

You would paste this into one of the Function Body buttons in the
Protaculous Action, and you would only need the prototype-packed
library to make it run.

Walking through it line-by-line:

  1. Observe all clicks on the main parent container, in this case the
    DIV with the ID ‘photos’
  2. From the click event, find out if the click was made on one of the
    photos with the class ‘preview’
  3. If that was the case…
  4. Get a Prototype object reference to the image in the large display
    DIV, which has the ID ‘main’ and which contains an image wrapped in a
    P. Because this is declared with the var keyword, the reference is
    updated each time, rather than being a sort of alias to whatever is
    there at the moment.
  5. Update the large display with the contents of the clicked element.
  6. Update the clicked element with the former contents of the large
    display, as stashed in line 4

That’s all there is to it.

Walter

On Mar 2, 2010, at 3:11 AM, ummedia wrote:

Thanks David
Nice but a bit more than I wanted really although I will go and have
a look at the code in a bit more detail. I literally want some white
space back on my page at the moment I show three largish images and
would like to go to one large image and three thumbnails so I can
turn commenting on in Expression Engine so viewers can leave
memories of their earliest digital watches.

http://www.digitalwatchlibrary.com/DWL/1work/casio_aa-85/

kind regards

Adam


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


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

Walter thats exactly what I want, I am running Freeway 4 so I am not sure I have the Protaculus action. Can you let me know if I can do it in 4.

many thanks

Adam


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

Sure, the Protaculous Action works fine in 4. You’d probably want to
use Freeway to lay this out, then do a little hand-coding when you
move it into EE. I haven’t tested to see if having the sizes in the
HTML makes it difficult to override those dimensions from the CSS, so
if that is the case, you would have to remove them manually.

Also, if you lay this out in Freeway, you’ll need to substitute the
full-size pictures for the small optimized previews that Freeway will
make for you. I’m not entirely sure how you will do that without some
manual text editing.

Walter

On Mar 2, 2010, at 9:07 AM, ummedia wrote:

Walter thats exactly what I want, I am running Freeway 4 so I am not
sure I have the Protaculus action. Can you let me know if I can do
it in 4.

many thanks

Adam


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


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

Thanks Walter im a little lost but ill play around with it. I am used to editing with mark up so I should be able to add the EE tags for the images. I looked at your code. Is this all that is needed or is there something else in the background that I cant see?

thanks as usual for your time

Adam


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

The code depends heavily on the structure of the HTML it’s associated
with. You should spend a little time trying to visualize the internal
structure of the page. I hand-coded the whole thing, so it should be
very minimal and the hierarchy easy to see. I am pretty sure you can
get most of the way there with Freeway, although you might need a
couple of markup items to do some of the finer strokes.

There’s an outer div, which is used to contain the elements and to be
the trigger element that you click. Within that are four child DIVs.
The first one is floated right, and is the large “main” image. The
other three are not positioned, so they just find their own way.

Inside each of the four inner DIVs is a P containing an IMG. (This is
just the way Freeway would code it, too.) Experiment with making these
images pass-through but stuffing a larger image into them than would
actually fit. If you then override Freeway’s automatic image sizes by
using Extended on the image (not the container DIV) to set the images
to 100% height and width, then they will conform to their container
DIV regardless of their original resolution (which is more or less how
my hand-coded page works).

You should try printing this page in various browsers. I would expect
it to be an unholy mess unless browsers have gotten a lot better about
print formatting in the past few years.

Walter

On Mar 2, 2010, at 11:11 AM, ummedia wrote:

Thanks Walter im a little lost but ill play around with it. I am
used to editing with mark up so I should be able to add the EE tags
for the images. I looked at your code. Is this all that is needed or
is there something else in the background that I cant see?

thanks as usual for your time

Adam


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


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

Walter
If use your code source, fill in the appropriate image src then insertmarkup item into the page would that work? I just need to get it to work then I can fiddle around with it.

regards

Adam


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

Hi Walter I added it to a test page and then used expression engine to fill in the img src. It kind of works, but not as yours did. I know some bits have been changed. The page is here

If you have a chance could you have a look and tell me what I need to do with the main image and whether the one, two and three were important

many thanks

Adam


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

Use the Protaculous Action to put the script into the page. That will
automatically put it in an unobtrusive “listener” function for you.
Watch the box names and add the classname to the smaller boxes where
needed (use Item / Extended for this part) and you should be good. You
will need to also change the dimensions of the images themselves using
the Extended dialog so that they are height:100% and width:100%. This
will get them to snap to the size of their container.

Walter

On Mar 3, 2010, at 12:32 PM, ummedia wrote:

Walter
If use your code source, fill in the appropriate image src then
insertmarkup item into the page would that work? I just need to get
it to work then I can fiddle around with it.

regards

Adam


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


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

Hmmm. Well first, you have three preview image containers with the
same ID, not sure how you managed that part. All IDs on a page must be
unique. Second, the image path in the main image is set as image/
filename, not images/filename (plural). So that’s why the main image
isn’t showing up.

The only other thing I can see here is you need to fiddle with your
image proportions, and try to make your preview and main containers
the same rough proportions as the photos they’re meant to contain.
They’re getting some serious anamorphic scaling, which doesn’t look
all that nice.

Walter

On Mar 3, 2010, at 12:49 PM, ummedia wrote:

Hi Walter I added it to a test page and then used expression engine
to fill in the img src. It kind of works, but not as yours did. I
know some bits have been changed. The page is here

Digital-Watch

If you have a chance could you have a look and tell me what I need
to do with the main image and whether the one, two and three were
important

many thanks

Adam


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


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

I can force the size of the thumbnails with the EE command but does this then effect the larger image? Can I not just have the thumbnails run along the bottom unsized? sorry for being a pain Walter I still havent worked out what is happening here. What I would like is three thumbnails along the bottom that when clicked on change the larger image above. Images can be different sizes.

Adam


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

Does it matter what name the ids are as long as they are unique? What should the initial main image be? images/???

many thanks

Adam


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

Yes, the preview image IDs are not significant in this case. They just
need to be page-unique.

It looks like you just made a typo in the image path for the large
image. All the others are coming from images/ (plural) and the large
one is coming from image/ (singular).

Walter

On Mar 3, 2010, at 1:39 PM, ummedia wrote:

Does it matter what name the ids are as long as they are unique?
What should the initial main image be? images/???

many thanks

Adam


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


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

You could use a different technique altogether, more akin to the
normal Target Show/Hide Layer system in vanilla Freeway pages, but to
use the trick I showed you, you need to do things a certain way.
That’s because this uses only four large images, but then squeezes
them into different-sized boxes to give the illusion of zooming and
swapping.

If you wanted them to stay put, say like the image preview on eBay,
then you could modify my original code to be something like this:

$('photos').observe('click',function(evt){
	var elm = evt.findElement('div.preview');
	if(elm){
		$$('div.preview').invoke('setStyle','border:none');
		$('main').update(elm.down('p'));
		elm.setStyle('border:1px solid red');
	}
});

Add a new preview image with the same picture as the default large
picture, and you should be all set. You can use the following
additional line of JavaScript to set the starting red border on that
first image:

$$('div.preview').first().setStyle('border: 1px solid red');

Walter

On Mar 3, 2010, at 1:34 PM, ummedia wrote:

I can force the size of the thumbnails with the EE command but does
this then effect the larger image? Can I not just have the
thumbnails run along the bottom unsized? sorry for being a pain
Walter I still havent worked out what is happening here. What I
would like is three thumbnails along the bottom that when clicked on
change the larger image above. Images can be different sizes.

Adam


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


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

Sorry Walter, im trying to stay with you but im failing quite dismally. I dont really understand the divs or the code.

Heres the code I have at present

G8d20385

{exp:gallery_extended:entries gallery_name=“watchlibrary” type=“weblog” dynamic=“on” related_id=“{entry_id}” orderby=“entry_date” sort=“asc” }

{exp:imgsizer:size {maker}-{modelnumber}}

{count} {/exp:gallery_extended:entries}

can you make head or tail of it?

hopefully Adam


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

sorry, how do I add code tags my didnt seem to work.

Adam


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

Add a line with four or more tildes in a row before and after the code.

some code

Walter

On Mar 3, 2010, at 2:19 PM, ummedia wrote:

sorry, how do I add code tags my didnt seem to work.

Adam


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


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