FW 4 Expression engine and ebay style photos

Re: FW 4 Expression engine and ebay style photos

ummedia — Wed, 03 Mar 2010 19:53:31 -500

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

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

Re: FW 4 Expression engine and ebay style photos

waltd — Wed, 03 Mar 2010 19:30:10 -500

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 <code></code> 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

Re: FW 4 Expression engine and ebay style photos

ummedia — Wed, 03 Mar 2010 19:19:53 -500

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

Adam

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

Re: FW 4 Expression engine and ebay style photos

ummedia — Wed, 03 Mar 2010 19:14:53 -500

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="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=”{entry_id}” class=”preview”> <p>{exp:imgsizer:size <img src=”{medium_url}” width=”400” alt=”{maker}-{modelnumber}” id=”{entry_id}” class=”centred”>}</p> </div>{count} {/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>

</code>

can you make head or tail of it?

hopefully Adam

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

Re: FW 4 Expression engine and ebay style photos

waltd — Wed, 03 Mar 2010 18:56:28 -500

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

Re: FW 4 Expression engine and ebay style photos

waltd — Wed, 03 Mar 2010 18:46:52 -500

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

Re: FW 4 Expression engine and ebay style photos

ummedia — Wed, 03 Mar 2010 18:39:15 -500

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

Re: FW 4 Expression engine and ebay style photos

ummedia — Wed, 03 Mar 2010 18:34:09 -500

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

Re: FW 4 Expression engine and ebay style photos

waltd — Wed, 03 Mar 2010 18:00:59 -500

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

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

Re: FW 4 Expression engine and ebay style photos

waltd — Wed, 03 Mar 2010 17:53:00 -500

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

FW 4 Expression engine and ebay style photos

ummedia — Mon, 22 Feb 2010 19:33:33 -500

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