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

quote

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

quote

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

quote

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

quote

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

quote

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

quote

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

quote

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

quote

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

quote

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

quote

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

http://www.digitalwatchlibrary.com/DWL/entry/casio-h108/

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

quote

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

quote

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

http://www.digitalwatchlibrary.com/DWL/entry/casio-h108/

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

quote

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

quote

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

quote

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

quote

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

quote

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

<div id="PageDiv"> <div id="photos">

<div id="main" class="main">
<p><img src="images/g8d20385.jpg" alt="G8d20385"/></p>

<script type="text/javascript" charset="utf-8">
// <![CDATA[     $('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);      }     });    // ]]>
</script>

can you make head or tail of it?

hopefully Adam

quote

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

Adam

quote

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

quote

code again

    <div id="PageDiv">
    <div id="photos">

    <div id="main" class="main">
    <p><img src="images/g8d20385.jpg" alt="G8d20385"/></p>
</div>

{exp:gallery_extended:entries gallery_name="watchlibrary" type="weblog" dynamic="on" related_id="{entry_id}" orderby="entry_date" sort="asc" }
 <div id="{gallery_entry_id}" class="preview">
   <p>{exp:imgsizer:size <img src="{medium_url}" width="400" alt="{maker}-{modelnumber}" id="{gallery_entry_id}" class="centred">}</p>
  </div>
{/exp:gallery_extended:entries}


    <script type="text/javascript" charset="utf-8">
    // <![CDATA[     $('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);      }     });    // ]]>
    </script>

Adam

quote