CQ5 image gallery component

Hi,
I'm a newbee in CQ5. I need to create an image gallery similar to http://goo.gl/RGBXs. How can I proceed towards that?
I was thinking of taking a DAM folder path from the content author as an input and using that I would create the block by iterating all the images contained within that folder. Is that a correct way? If so, what API I can use to iterate through the image files contained in a DAM folder?
Any help or response is highly appretiated.
Thanks.

Hi Jason,
Following is the code I used to display the image (bold letter) and it worked!!
Simply use child.getPath() to get image path.
<%
    while(iterator.hasNext()) {
        Node child = iterator.nextNode();
%>
    <div class="someClass">
        <a href="<%=child.getPath()%>">
            <img src="<%=child.getPath()%>">
        </a>
    </div>
<% } %>
and I used lightbox to show full image...and for that you need to have something like the following i.e. including necessary js libraries before the above code.
Hope it helps you!!
Thanks.

Similar Messages

Image gallery component

Hi,
I'm pretty new to CQ5, so forgive me if this question has already been answered/doesn't make sense.
Basically, i'm working for a large travel company and we'd really like to show off the destinations we serve. At the moment the only components we use are the basic image components which allows us to display one image at a time.
What would be really useful would be for some sort of image gallery to be available which would allow us to show multiple images, similar to this.
Is there some sort of solution built into CQ5 which can be modified, or, is it something which is going to have to be built from scratch by our developers?
Any help would be greatly appreciated. We're using CQ5.5 5.5.0.20120220 Update 1
Thanks,
Ben

Ben ,
I think it may useful to your requirement
http://localhost:4502/damadmin
http://dev.day.com/docs/en/cq/current/dam/creating_and_configuringdamfinderandasseteditorp ages.html
Regards
Ravindra

AS2 XML pdf gallery component

Hello, Ive been using a gallery component that lets you use XML to call images and their respective thumbnails while on flash. It's really convenient and easy.
Id like to ask for your kind help on how to achieve exactly that but changing it to a PDF library/gallery that links you to the PDF file instead.
I have to insert a data base containing 2000 PDFS and it would take too long doing using GetURLs.
Thanks a lot and excuse my English!!

Thank you for your answer. I'm not intending on displaying the files inside flash, i just want a xml list/component that that can be editable and links files so they can be downloaed.
I hope I make myself clear.
Here's a little image of whats going on:

3d image gallery in pdf?

hello forumers.
im getting into learning how to set up a pdf document,im very new and woudl like to know if something like this can be placed into a pdf file.
http://www.flashcomponents.net/component/3d_image_flow_gallery/preview/1854.html
thank you.

hi again dave.
i thought after all to go ahead with acrobats default portfolio 3d image gallery(revolve),so i ive made my swf file and added it into my gallery,but when
i click onto it to play,it its so totaly wrong,the text is static,some other text is missing,wrong font size.why is it doing this?
and also when i add to my welcome page a flash movie,when i click on done,i can only hear the audio but there is no image what can be wrong
thank you.

Image gallery. How to click on image to advance to next image?

Flex 4, flash builder 4.6.
This gallery has a row of numbers. When you click on a number, a photo displays above. Each number represents a photo from data.xml. Works good. Now I want to click on a photo that is already displayed and cause the next photo in the series to display. How do I go about doing this? Thanks.
<s:Application creationComplete="service.send()">
<fx:Declarations>
        <s:HTTPService id="service" url="data.xml" result="serviceHandler(event)"></s:HTTPService>
</fx:Declarations>
<fx:Script>
        <![CDATA[
               import mx.collections.ArrayCollection;
               import mx.rpc.events.ResultEvent;
               [Bindable]
               private var images:ArrayCollection;
               private function serviceHandler(event:ResultEvent):void{
                    images = event.result.gallery.image;
        ]]>
</fx:Script>
<s:Image source="assets/poster/{imagesList.selectedItem.pic}" />
<s:List id="imagesList" dataProvider="{images}">
     <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:Label text="{data.number}" fontSize="12" />
                </s:ItemRenderer>
            </fx:Component>
      </s:itemRenderer>
</s:List>
</Application>
data.xml
<gallery>
    <image>
        <number>01</number>
        <pic>photo01.jpg</pic>
    </image>
    <image>
        <number>02</number>
        <pic>photo02.jpg</pic>
    </image>
</gallery>

Hi..
i have a simaliar problem, can anyone help..
Ive made a gallery using xml and the sparks list component. that displays images in a horz list which ofcourse can be clicked to see the larger image, but then ofcourse to view the to other images or the next image you have to hit the back button and then select another.
How can i swipe on the large image for move to the next item without having to go back to list.    Thanks.
here is what ive got so far..
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        title="Page {id1}"
        destructionPolicy="never"
        actionBarVisible="true"
        viewActivate="init()">
    <fx:Script>
        <![CDATA[
            import valueObjects.Bookpage;
            [Bindable]private var id1:String;
            [Bindable]private var thumbimage:String;
            [Bindable]private var largeimage:String;
            private function init():void
                pgImage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
                this.addEventListener( TransformGestureEvent.GESTURE_SWIPE, handleSwipe );
                var thisbpage:Bookpage = data as Bookpage;
                id1 = thisbpage.id;
                largeimage = thisbpage.largeimage;
            private function onZoom(event:TransformGestureEvent):void
                var mySprite:Sprite = pgImage as Sprite;
                if(mySprite.scaleY.valueOf() >= 1)
                    mySprite.scaleX *= event.scaleX;
                    mySprite.scaleY *= event.scaleY;
                else
                    mySprite.scaleX = 1;
                    mySprite.scaleY = 1;
            private function handleSwipe(event:TransformGestureEvent):void
                // Swipe was to the right
                if (event.offsetX == 1 ) {
                    // push the PreviousView without any data using default
                  some help here. pls ..swipe to prev image if any
                    // Swipe was to the left
                else if (event.offsetX == -1 ) {
                    // push the NextView withour any data using
                    some help here. pls ..swipe to next in list
                // Swipe was to the down
                if (event.offsetY == 1 ) {
                    // push the PreviousView without any data using default
                    // ViewTransition
                    this.actionBarVisible = true;
                    // Swipe was to the up
                else if (event.offsetY == -1 ) {
                    // push the NextView withour any data using
                    this.actionBarVisible = false;
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:SlideViewTransition id="slideUp" duration="300" direction="up" transitionControlsWithContent="false"/>
    </fx:Declarations>
    <s:states>
        <s:State name="portraitPhone" stateGroups="phone,portrait"/>
        <s:State name="landscapePhone" stateGroups="landscape,phone"/>
    </s:states>
    <s:actionContent>
        <s:HGroup>
        <s:Button icon="assets/qsearch.png" click="navigator.popView(slideUp)"/>
        <s:Button icon="assets/prev.png"/>
        <s:Button icon="assets/next.png"/>
        </s:HGroup>
    </s:actionContent>
    <s:Scroller x="0" y="0" width="100%" height="100%" >
        <s:HGroup>
            <s:Image id="pgImage" left="0" top="11" source="assets/gallery/{largeimage}" />
        </s:HGroup>
    </s:Scroller>
</s:View>

Adding another image gallery

I have added an image gallery to my site and would like to add another one..
except when i copy the code the 2nd image gallery doesnt work..
HTML
Javascript
Thanks for your help.

Note also that since javax.swing.Icon is an interface, you can simply create an Icon implementation that can draw two (or more) images. You could pass in two ImageIcons into your own class. Example code (untested):
public class MultiIcon implements Icon {
   private Icon bottom;
   private Icon top;
   public MultiIcon(Icon bottom, Icon top) {
      this.bottom = bottom;
      this.top = top;
   public int getIconWidth() {
      return Math.max(top.getIconWidth(), bottom.getIconWidth());
   public int getIconHeight() {
      return Math.max(top.getIconHeight(), bottom.getIconHeight());
   public void paintIcon(Component c, Graphics g, int x, int y) {
      bottom.paintIcon(c, g, x, y);
      top.paintIcon(c, g, x, y);
}

Is there a way to create a CSS image gallery with caption?

Hi everyone,
Ive been using the disjoint rollover, but I only have one
thing that I want to add to it—a caption right underneath an
image.
Besides using that Project Seven plug-in, is there a way to
create an image gallery without using layers? Or is layers the only
way to do it? All I want (words of doom, huh?) is a thumbnail to be
able to switch and image and add a caption to it. Can anyone point
me in the right direction? Or is that Project Seven plug-in deal my
best bet? What about Set Text of Layer in DW.
Oh yeah, Im still using DW with CSS sprinkled in..any help?
Thanks in advance.
-C

> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers?
Of course.
> What about Set Text of Layer in DW.
That would do it, and it's not necessary that the layer stay
a layer after
you have done it, either. I do this frequently - make a
layer, apply the
behavior, and then remove the position:absolute from the div,
and place it
where I want it.
See the demo here -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"psypent81" <[email protected]> wrote in
message
news:eus555$lac$[email protected]..
> Hi everyone,
>
> Ive been using the disjoint rollover, but I only have
one thing that I
> want to
> add to it?a caption right underneath an image.
> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers? Or is layers the only way
to do it? All I
> want
> (words of doom, huh?) is a thumbnail to be able to
switch and image and
> add a
> caption to it. Can anyone point me in the right
direction? Or is that
> Project
> Seven plug-in deal my best bet? What about Set Text of
Layer in DW.
>
> Oh yeah, Im still using DW with CSS sprinkled in..any
help?
>
> Thanks in advance.
>
> -C
>

How do i use numbers for image gallery and arrows?

Hello there,
I'm hoping someone can advise me on the best possible way.
I would like to use numbers to help the user navigate through the image gallery i'm creating and arrows on either side of an image (one image viewed at any one time). I have attached an image of what i'm trying to acheive. I feel like the arrows will help aid the user to navigate and the numbers will inform them on the number of images to view.
I have so far created the site with a template (logo and nav bar) and child pages for: home/about/work/contact.
Hope to hear from someone soon.
Nicola

With so many pre-built image galleries available to you, there's no reason to re-invent the wheel.
CSS Image Viewer (view source to see the code)
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
jQuery slideViewer 1.2
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
57 + Image Gallery, Slideshow & Lightbox solutions
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
In addition to the ones above, log-in to Adobe's Widget Exchange with your Widget Browser
http://labs.adobe.com/technologies/widgetbrowser/
    * jQuery Cycle Widget
    * Lightbox Gallery Widget
    * Spry Content Slides
    * Spry Image Slideshow
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

How can I create an image gallery with "next" buttons?

So I am almost done with my portfolio site (YES!)..now I just need the actual content (the images). My site is written in AS3.
I've watched many tutorials on how to create an image gallery (auto scrolling ones, scrolling ones that require mouse hover, etc etc), but those aren't what I am looking for.
I want a gallery that looks exactly like this one here:
http://jalbum.net/res/help/integrating-tutorial.html
I have a lot of work to display in my porfolio so there must be arrows at the end of the thumbnails so I can add more stuff. So I am just stumped on how to make the image gallery work with the ability to scroll for more photos with the click of the arrows.
Any ideas? Thank you.

Watching tutorials and learning from them are two different things. If you have learned from them you should be able to use what you have learned to devise a gallery such as the one you link to. If you have learned from them and cannot use what you learned, then you probably need to find/learn more.
If you study the design you linked you should be able to reason out what elements you need to devise... it is not overly complicated.
For the large picture you could have a Loader into which you load whatever image is selected from the thumnails. To get a brief transition you could just set the alpha of the Loader to 0 when an image change is occuring and gradually fade it in after the image has loaded.
The greatest challenge you are likely to face is in getting the thumbnails to advance back and forth depending on which is selected. All of the thumbs would be placed in a container (movieclip or sprite) and that would be masked so that only a portion of them is visible.
All thumbs that are not selected have their alpha property set to some value less than 1. Selecting one calls for the file it associates with to be loaded into the Loader. If the choice happens to lie off screen, then you need to move the movieclip that contains all of the thumbs some set value in the right (+x) or left (-x) direction.
If you want the thumbnails to wrap infinitely then when one leave the thumbnails area for movement in a direction, you need to take that thumb and relocate it to the other end of the thumbs in the container.

Image gallery code won't work

Please Help, I can't figure this stuff out!
I've just built my second website and the code for clickable thumbnails for my image gallery doesn't work in Safari, unless I refresh the page. For some reason, a mouseover on a thumbnails fails to call the large image url. I tried adding an auto refresh to the code, but curiously that did not solve the problem.
Any ideas why this won't work in this Browser, but runs fine in IE and Firefox?
Thanks for any advice.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Welcome to Kimerlee Curyl - p h o t o g r a p h y - horses, pets, el faro, headshots, weddings</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../web-content/styles.css" rel="stylesheet" media="screen" type+text/css">
<script language="javascript">

</script>
<csscriptdict import>
<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"></script>
</csactiondict>
<csactions>
<csaction name="bfc75fbb127" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f15.jpg" urlparams="2"></csaction>
<csaction name="bfc75fc8128" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/faro2005/f14.jpg" urlparams="2"></csaction>
<csaction name="bfc75fd2129" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f13.jpg" urlparams="2"></csaction>
<csaction name="bfc75fdd130" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f11.jpg" urlparams="2"></csaction>
<csaction name="bfc75fe8131" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f9.jpg" urlparams="2"></csaction>
<csaction name="bfc75ff2132" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f7.jpg" urlparams="2"></csaction>
<csaction name="bfc75ffd133" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f6.jpg" urlparams="2"></csaction>
<csaction name="bfc76008134" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f5.jpg" urlparams="2"></csaction>
<csaction name="bfc76014135" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f4.jpg" urlparams="2"></csaction>
<csaction name="bfc7601e136" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f3.jpg" urlparams="2"></csaction>
<csaction name="bfc76027137" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/farofinal/f2.jpg" urlparams="2"></csaction>
<csaction name="bfc76031138" class="Set Image URL" type="onevent" val0="first_image" val1="folder/images/faro2005/faro1.jpg" urlparams="2"></csaction>
</csactions>
</head>
<body onload="preloadImages();" bgcolor="#471e12" link="#666666" vlink="#666666" alink="#99CCCC">
<table width="100%" border="0" align="center">
<tr>
<td align="center" valign="middle" bgcolor="330000" width="800">

<table width="778" border="0" cellspacing="0" cellpadding="0" cool="cool" gridx="16" gridy="16" height="953" showgridx="showgridx" showgridy="showgridy" usegridx="usegridx" usegridy="usegridy">
<tr height="304">
<td width="19" height="304"></td>
<td width="758" height="304" colspan="14" valign="top" align="left" xpos="19"></td>
<td width="1" height="304"><spacer type="block" width="1" height="304"></td>
</tr>
<tr height="448">
<td width="108" height="448" colspan="4"></td>
<td width="669" height="448" colspan="11" valign="top" align="left" xpos="108"></td>
<td width="1" height="448"><spacer type="block" width="1" height="448"></td>
</tr>
<tr height="116">
<td width="25" height="116" colspan="3"></td>
<td width="122" height="116" colspan="2" valign="top" align="left" xpos="25"></td>
<td width="1" height="116"></td>
<td width="122" height="116" valign="top" align="left" xpos="148"></td>
<td width="1" height="116"></td>
<td width="122" height="116" valign="top" align="left" xpos="271"></td>
<td width="123" height="116" colspan="2" valign="top" align="left" xpos="393"></td>
<td width="123" height="116" colspan="2" valign="top" align="left" xpos="516"></td>
<td width="138" height="116" colspan="2" valign="top" align="left" xpos="639"></td>
<td width="1" height="116"><spacer type="block" width="1" height="116"></td>
</tr>
<tr height="84">
<td width="23" height="84" colspan="2"></td>
<td width="124" height="84" colspan="3" valign="top" align="left" xpos="23"></td>
<td width="123" height="84" colspan="2" valign="top" align="left" xpos="147"></td>
<td width="123" height="84" colspan="2" valign="top" align="left" xpos="270"></td>
<td width="1" height="84"></td>
<td width="122" height="84" valign="top" align="left" xpos="394"></td>
<td width="1" height="84"></td>
<td width="122" height="84" valign="top" align="left" xpos="517"></td>
<td width="2" height="84"></td>
<td width="136" height="84" valign="top" align="left" xpos="641"></td>
<td width="1" height="84"><spacer type="block" width="1" height="84"></td>
</tr>
<tr height="1" cntrlrow="cntrlrow">
<td width="19" height="1"><spacer type="block" width="19" height="1"></td>
<td width="4" height="1"><spacer type="block" width="4" height="1"></td>
<td width="2" height="1"><spacer type="block" width="2" height="1"></td>
<td width="83" height="1"><spacer type="block" width="83" height="1"></td>
<td width="39" height="1"><spacer type="block" width="39" height="1"></td>
<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
<td width="122" height="1"><spacer type="block" width="122" height="1"></td>
<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
<td width="122" height="1"><spacer type="block" width="122" height="1"></td>
<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
<td width="122" height="1"><spacer type="block" width="122" height="1"></td>
<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
<td width="122" height="1"><spacer type="block" width="122" height="1"></td>
<td width="2" height="1"><spacer type="block" width="2" height="1"></td>
<td width="136" height="1"><spacer type="block" width="136" height="1"></td>
<td width="1" height="1"></td>
</tr>
</table>

</table>
<map name="bio_textBbfc725fb"></map>
</body>
</html>
<script language="JavaScript" src="http://hostingprod.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript></noscript>

Someone else told me to put backticks around the session variable and it solved the problem, so
$q = "SELECT * FROM `{$_SESSION['find']}` WHERE id = $id";

How can i show images from different folders in image gallery

Hi All,
         i have downloaded and executed photo viewer image gallery application.
          in that we r showing images sequentially what we have defined in xml file.
         but i want show images randomly or i want show images from different gallary.
Can any one help me.
thanks
Raghu.

WaqarLFC7 wrote:
On Windows:
Ctrl + click on the songs you want to group - then right click and click get info and it will ask you if you want to get info for multiple items click YES then under album name it whatever you want and them songs will be grouped into 1 album.
Mac:
Same procedure but hit SHIFT instead of CTRL.
Actually, it's right click or ctrl click, same as windows.

How can I create a high res image gallery, need to have print res photos for a pressroom section.

How can I create a high res image gallery, need to have print res photos for a pressroom section.

If you want Muse to "pass through" your images and not adjust, compress, crop etc - you need to place your images in the lightbox EXACTLY at the right size, pre-cropped and prepped in Photoshop.
So if your light box is 800x600 the image you're dropping into that must be 800x600 exactly with no effects, rotation etc added to the lightbox frame. This stop Muse fiddling with your images, if they are perfect when inserted and you're not asking Muse to crop, expand, add effects etc. If it's perfect when inserted, Muse SHOULD also leave the resolution alone too, but I have not tried that one, but in theory, it should work.

How do i apply a basic jQuery to my image gallery?

I'm using jQuery in order to allow an image gallery to show the same product in various colours. However the jQuery I'm using, animates the next image to sweep in from the left. And i just want the images to change in a basic way, so one image is on the screen at all times. Could someone please help me?
This is the current jQuery I'm using.
<script>
$(document).ready(function () {
    $("#red").click(function () {
        $("#img-red").show('');
                                $("#img-etchedglass, #img-blue, #img-green").hide();
    $("#blue").click(function () {
        $("#img-blue").show('');
                                $("#img-etchedglass, #img-red, #img-green").hide();
    $("#green").click(function () {
        $("#img-green").toggle('');
                                $("#img-etchedglass, #img-red, #img-blue").hide();
    $("#etchedglass").click(function () {
        $("#img-etchedglass").show('');
                                $("#img-blue, #img-red, #img-green").hide();
</script>
I have already asked on a previous stream, but could do with this sorted asap.
Thanks!!

If you have individual product images why don't you just write them to one <div> on the page (example below)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$('#red').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/183431/1834305318/butterfly-1436021-m.jpg" alt="">');
$('#blue').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/183385/1833845416/aglais-urticae---little-fox-1441799-m.j pg" alt="">');
$('#green').click(function()
$('#productImage').html('<img src="http://www.freeimages.com/assets/45/443536/blue-butterfly-1433138-m.jpg" alt="">');
</script>
</head>
<body>
<div id="productImage">
<img src="http://www.freeimages.com/assets/183431/1834305318/butterfly-1436021-m.jpg" alt="">
</div>
<a href="#" id="red">Red</a>
<a href="#" id="blue">Blue</a>
<a href="#" id="green">Green</a>
</body>
</html>

I want to create an image gallery with forward back nav, master image with a click to pop out zoom

Hi Musers,
I'm currently building a photography website and need some help building a specific type of gallery.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Below is a description of the gallery I want to build:
On the gallery page the gallery appears as a single 'Master Image' with forward and back 'Navs.' and a 'Counter' underneath this single 'Master Image'. Lets say that there are 10 images in this gallery. When the viewer clicks on the forward 'Nav.' the 'Master Image' changes to the next image in the sequence of 10 and the 'Counter' below confirms this progression, in this example the 'Counter' changes from 1 of 10 to read 2 of 10, the 'Master Image' displayed is the second image in the sequence.
Simple so far.. This above I can do as this is just a basic gallery. What follows is what I cannot find a solution for.
I want the gallery viewer to be able to click on the 'Master Image' and launch an enlargement of that image overlaying the gallery page, very much like the way the 'Lightbox' widget displays an enlarged image. When the viewer clicks off the 'Ligtbox' or enlarged image it dissapears, reverting the page view back to the standard gallery view with 'Master Image', 'Navs.' and 'Counter'. I do not want the expanded / Enlarged 'Lightbox' image accompanied by a thumbnail gallery, 'Navs.' / Navigation arrows or a 'Counter'. What I want is to be able to launch an enlarged version of the 'Master Image' as an overlay on the gallery page, something like a pop out.
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Can anyone explain how I can do this? Is it possible?
The solution I want seems to be a highbrid between the standard gallery with navigation arrows kept but minus thumbnails and captions with some of the functionality of the lightbox gallery widget.
I very much appreciate any help anyone can give.
Thank you

Hi Harriet,
Thanks for the message. I'm sure as time goes on new features will be introduced but it's a bit of a shame that the widget library is a little basic, oh, and at times it's just that little bit buggy. So far I'm really impressed by Muse despite being ever so slightly disappointed by some of it's limitations. I'd like to see more image gallery options, the ability to set up a client login area or a client ftp within a site, I also tried embedding video but as I'm no programmer the result looked clumsy so some focus on this would be a help. Considering that a good number of people benefiting from a Muse site will be online retailers a zoom function should have been there from the start.
Best regards
Jacques

Need advice/idea about Image gallery

Hello to ALL!!!
I'm trying to make an dynamic image gallery WITH!!! some
active buttons above (for example: BUTTON1 with function "delete"
and BUTTON2 with function "update") a picture and some "dataoutput"
below (for example:Price). So, separate cell must look like:
BUTTON1 BUTTON2
<Image>
PRICE
For implementation this task I have:
1) mySQL database "gallery" with table "test" and columns
"Id", "path to image", "Price"
2) 2 gifs: BUTTON1, BUTTON2
Before my first trying I thought that it's simple, and I've
tried:

<cfquery name="qTest" datasource="gallery">
SELECT * FROM test
</cfquery>
<div id=imagecont>
<cfoutput>
<cfloop query="qTest">
<img src="../Button1.gif />
<img src="../Button2.gif /><br>
<img src="#qTest.path to image#" />
<p>#qTest.Price#</p>
</cfloop>
</cfoutput>
</div>
And it worked normal. BUT!!! Looping had a vertical
direction! And any CSS rules that I've applied to DIV "imagecont"
(weight, height) hadn't any effect.
So, what I've get:
I see all necessary information (on browser), but I don't
know, how to format it with my dreaweawer cs3 and CSS.
And I afraid that I've chosen a "wrong method" (I mean my
code above)
Please, give me some recommendations or advices.
How can i archive my needs?
How to use CSS in div tag, which includes <cfloop>
code. I've also tried to use CSS with structure like:
<div id=a>
<cfoutput>
<cfloop >
<div id=b>
DATA
</div>
</cfloop>
</cfoutput>
</div>
But (div a)'s CSS rule HEIGHT take's no effect on <div
id=b> :(
And what about useful technique for displaying " action
buttons" above each image in dynamic image gallery???
Great THANKS for your answers/comments!!!!

the css attribute you are looking for is FLOAT.
see if something like
http://www.photos-of-laos.org/top-rated.cfm
is
what you are after in general images layout terms. feel free
to check
the generated html :).
re general css knowledge i highly recommend the book
"Bulletproof CSS"
by Mark Grabinski.
re the 2 buttons above the image: consider turning them into
css image
overlays instead (when the buttons appear OVER [not above]
the image
only when a user mouses over) - it looks much better that
way.
hth
Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

CQ5 image gallery component

Similar Messages

Maybe you are looking for