Scrolling Image Gallery Extension?

[SaraBuchholz]

I am trying to create a horizontal scrolling image gallery of 10-20 images (100
x 100 px ) with 5 viewable at a time.
Ideally the scrolling gallery will be placed above and you will be able to
click on a thumbnail (100x100) in the gallery and it will bring up a larger
view (300x300) below with the associated text populating to the left of the
larger image.

Is their an extension designed for this? or any suggestions/examples would be
extremely helpful.

Thank you very much!

[danilocelic *TMM*]

SaraBuchholz wrote:

> I am trying to create a horizontal scrolling image gallery of 10-20 images (100
> x 100 px ) with 5 viewable at a time.
> Ideally the scrolling gallery will be placed above and you will be able to
> click on a thumbnail (100x100) in the gallery and it will bring up a larger
> view (300x300) below with the associated text populating to the left of the
> larger image.
>
> Is their an extension designed for this? or any suggestions/examples would be
> extremely helpful.

Take a look at the scrolling extensions here:
[url]http://projectseven.com/extensions/listing.htm[/url]

You can combine them with the built in Swap Image behavior to acheive
what you're looking for.



--
Danilo Celic
| Extending Knowledge, Daily [url]http://CommunityMX.com/[/url]

[SaraBuchholz]

Thank you for your suggestion.

The Horizontal Scroller by PVII works fine for the thumbnail images... but I
have been unable to get the Swap image behavior to work. Ideally I would like
to use the Show-Hide Layers action to reveal a corresponding layer containing
the 300x300 larger image view and the associated text when a thumbnail image in
the scroller is hovered over. Currently the behavior is not responding...
Any suggestions on how I could get this to work?

</table>
<div id="GrangerD" style="position:absolute; width:525px; height:300px;
z-index:4; left: 75; top: 263; visibility: hidden;">
<table width="525" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="275" align="right" valign="bottom"><div
align="justify"><span class="style1">This second fixture in the family of
displays was designed by our creative team to complement an existing display.
Its small footprint and sturdy construction allows the retailer to showcase
lots of product in a small amount of space. </span></div></td>
<td width="25" height="300" rowspan="2">&nbsp;</td>
<td width="300" height="300" rowspan="2" align="right"
valign="bottom"><div align="right"><img
src="../layout_images/GB2296-Grainger_300.jpg" width="300"
height="300"></div></td>
</tr>
<tr>
<td width="200" height="25" align="right" valign="bottom"><div
align="right"><span class="style7">12&rdquo;W x 10&rdquo;D x
52&rdquo;H</span></div></td>
</tr>
</table>
</div>
<div id="ZoppiniD" style="position:absolute; width:525px; height:300px;
z-index:3; left: 75px; top: 263px; visibility: visible;">
<table width="525" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="275" align="right" valign="bottom"><div
align="justify" class="style1">Grand &amp; Benedicts has been assisting Zoppini
introduce their Italian charm bracelets into the retail market place. With this
rotating countertop display, designed with removable trays, signage and colors
designed to maximize customer&rsquo;s branding.</div></td>
<td rowspan="2">&nbsp;</td>
<td width="300" height="300" rowspan="2" align="right"
valign="bottom"><img src="../layout_images/Zoppini_300.jpg" width="300"
height="300"></td>
</tr>
<tr>
<td width="200" height="25" align="right" valign="bottom"><span
class="style7">12&rdquo;W x 12&rdquo;D x 24 &rdquo;H</span></td>
</tr>
</table>
</div>
<div id="controlLayer" style="position:absolute; width:550px; height:100px;
z-index:2; left: 50px; top: 69px; visibility: visible;">
<table width="550" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25" height="100"><div align="left"><a href="#"
onMouseOver="P7_HScroller('contentLayer','Right',0 ,500,'Medium')"
onMouseOut="P7_HScroller('contentLayer','Stop',0,0 ,'Medium')"><img
src="../layout_images/gb_pd_arrow_left.jpg" width="25" height="100"
border="0"></a></div></td>
<td width="500" height="100">&nbsp;</td>
<td height="100"><div align="right"><a href="#"
onMouseOver="P7_HScroller('contentLayer','Left',0, 0,'Medium')"
onMouseOut="P7_HScroller('contentLayer','Stop',0,0 ,'Medium')"><img
src="../layout_images/gb_pd_arrow_right.jpg" width="25" height="100"
border="0"></a></div></td>
</tr>
</table>
</div>
<div id="containLayer" style="position:absolute; width:500px; height:100px;
z-index:1; left: 75px; top: 69px; clip: rect(0 500 100 0); overflow: hidden;
visibility: visible;">
<div id="contentLayer" style="position:absolute; width:500px; height:100px;
z-index:1; left: 0; top: 0; visibility: visible;">
<table width="1000" height="100" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="100" height="100"><a href="#"
onMouseOver="MM_showHideLayers('GrangerD','','hide ','ZoppiniD','','show')"><img
src="../layout_images/Zoppini_crop.jpg" name="Zoppini_T" width="100"
height="100" border="0" id="Zoppini_T"></a></td>
<td width="100" height="100"><a href="#"
onMouseOver="MM_showHideLayers('GrangerD','','show ','ZoppiniD','','hide')"><img
src="../layout_images/GB2296-Grainger-Metal-Displ.jpg" name="Granger_T"
width="100" height="100" border="0" id="Granger_T"></a></td>
<td width="100" height="100"><img
src="../layout_images/GB1501-Just-Tomato-Rack.jpg" name="Tomatoe_T" width="100"
height="100" id="Tomatoe_T"></td>
<td width="100" height="100"><img
src="../layout_images/Beanie-Display_crop.jpg" name="Beanie_T" width="100"
height="100" id="Beanie_T"></td>
<td width="100" height="100"><img
src="../layout_images/ExOfficio-2Way-Rack_W_crop.jpg" name="Exoffico_T"
width="100" height="100" id="Exoffico_T"></td>
<td width="100" height="100"><img
src="../layout_images/Zoppini_crop.jpg" width="100" height="100"></td>
<td width="100" height="100"><img
src="../layout_images/GB2296-Grainger-Metal-Displ.jpg" width="100"
height="100"></td>
<td width="100" height="100"><img
src="../layout_images/GB1501-Just-Tomato-Rack.jpg" width="100"
height="100"></td>
<td width="100" height="100"><img
src="../layout_images/Beanie-Display_crop.jpg" width="100" height="100"></td>
<td width="100" height="100"><img
src="../layout_images/ExOfficio-2Way-Rack_W_crop.jpg" width="100"
height="100"></td>
</tr>
</table>
</div>
</div>
</p>
</body>
</html>

[danilocelic *TMM*]

SaraBuchholz wrote:

> Thank you for your suggestion.
>
> The Horizontal Scroller by PVII works fine for the thumbnail images... but I
> have been unable to get the Swap image behavior to work. Ideally I would like
> to use the Show-Hide Layers action to reveal a corresponding layer containing
> the 300x300 larger image view and the associated text when a thumbnail image in
> the scroller is hovered over. Currently the behavior is not responding...
> Any suggestions on how I could get this to work?

What do you mean by not responding?

Can you post a link to the page you're working on?

--
Danilo Celic
| Extending Knowledge, Daily [url]http://CommunityMX.com/[/url]

[SaraBuchholz]

[url]http://www.grand-benedicts.com/gb_custom_design.htm[/url]

Here is the link the the working file.

Thank you!

[danilocelic *TMM*]

SaraBuchholz wrote:

> [url]http://www.grand-benedicts.com/gb_custom_design.htm[/url]
>
> Here is the link the the working file.

You need to do two things:

1. Add a top and left to the GrangerD layer. You probably mean for it to
be the same as the ZoppiniD layer: left: 75px; top: 263px;

2. Move the z-order of the containLayer above the controlLayer. What is
happening now is that the controlLayer is covering up the containLayer
so that the mouse never is really over the containLayer.

HTH


--
Danilo Celic
| Extending Knowledge, Daily [url]http://CommunityMX.com/[/url]

[SaraBuchholz]

Thank you so much that works wonderfully!

[webkeen]

Hi,

I have recently tried to do this but when I make the layer a higher z-index my arrow won't show at the end of the scroll, and my swap images will work. It's either one or the other, any advice?

[danilocelic *TMM*]

webkeen wrote:

> Hi,
>
> I have recently tried to do this but when I make the layer a higher z-index my arrow won't show at the end of the scroll, and my swap images will work. It's either one or the other, any advice?

You'll need to share a URL to a page that exhibits this issue before
anyone can guess as to what the issue is.

--
Danilo Celic
| Extending Knowledge, Daily [url]http://CommunityMX.com/[/url]

[webkeen]

In this link the scroll is working, but the swap images is not.
[url]http://www.carolineballou.com/scroll_test2.htm[/url]

[danilocelic *TMM*]

webkeen wrote:

> In this link the scroll is working, but the swap images is not.
> [url]http://www.carolineballou.com/scroll_test2.htm[/url]

The scrolling and the swap image is working fine in IE6 and Firefox1 on
WinXP Pro.

The only issue I see is that the right scroll button is below scrolling
area. You need to "move" it up above the scrolling area. You could also
make the scrolling area narrower, so that it doesn't overlap the right
scroll button.

--
Danilo Celic
| Extending Knowledge, Daily [url]http://CommunityMX.com/[/url]

[webkeen]

When you say you need to "move it up above the scrollinmg area", do you mean
the z-index. Because when I adjust the z-index on the layer that holds the
pictures the swap works, but the right arrow gets covered. Or do you mean
something all together differant when you say "move"

Thanks

[danilocelic *TMM*]

webkeen wrote:

> When you say you need to "move it up above the scrollinmg area", do you mean
> the z-index. Because when I adjust the z-index on the layer that holds the
> pictures the swap works, but the right arrow gets covered. Or do you mean
> something all together differant when you say "move"

I'm suggesting you move the right scroll button to a higher z-index than
the scrolling area. But I'd also make the scrolling area narrower so
that it doesn't appear below the scroll area.

Actually, if you make the scroll area narrower, then you may not need to
increase the z-index of the right scroll button.

--
Danilo Celic
| Extending Knowledge, Daily [url]http://CommunityMX.com/[/url]