Dynamic Photo Gallery?

I'm working on a website right now, and I've run across a
particular style of photo gallery that I'd like to duplicate. This
is the page:
http://www.reubenrogers.com/photos.htm
There are thumbnail images that you click on to view the
larger image, and when you click - instead of opening a new HTML
document, the background dims and the picture appears above
everything else. I know it's not flash, I'm guessing XHTML? I've
tried copying the code and putting in my own images to see if I can
make the action occur, but I haven't been able to get it to work
like this page. Looking at the source code it looks like it might
have been created with some kind of template, which I've tried to
investigate but I've gotten no where. I'm not having trouble
setting something like this up design-wise, it's the code to make
the action occur. Any thoughts?

It' s being done with ajax. You will find these link helpfull
for you:
http://www.huddletogether.com/projects/lightbox/

Similar Messages

Dynamic Photo Gallery in Flash using AS3.0 and XML, but it doesn't work and missed up my app.

Hi,
I am creating an iPad app using AS3. The app contains three sections.
One of those sections (chocolate sources)contains Dynamic Photo Gallery using XML. The photos, thumbnails, and text in this section are loaded from XML.
I faced may issue when I tried to run this app:
The gallery photos didn't show up
The thumbnails (buttons to navigate the photo gallery) didn't show up at all. (The thumbnails should show up under the photo gallery box.)
The text doesn't show up (the text should be in every photo as describtion)
I want to include Swipe in the photo gallery, how can I do that?
When I click on "Chocolate Sources" button, the photo gallery appears in every section, here are print screens describe what I mean:
The photo gallery covers the home screen too.
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<sources>
          <section>
                    <details>
                                        Cocoa tree exists in the tropics area, such as Central and South America.
                              </details>
                                        <image>
                                                  <url>coca1.jpg</url>
                                                  </image>
                                                  </section>
          <section>
                    <details>
                    Cocoa is supplied in many countries such as Indonesia, Ghana, Brazil, Ecuador and Cameroon.
                    </details>
                              <image>
                              <url>coca2.jpg</url>
                              </image>
                                        </section>
          <section>
                              <details>
                              Dark chocolate helps to relax and reduce the stress and blood pressure because it has antioxidants elements, which helps in vasodilatory process.
                              </details>
                                        <image>
                                        <url>coca3.jpg</url>
                                                  </image>
                                                            </section>
          <section>
                    <details>
                    Chocolate provides energy and hyperactive sometimes because it contains high level of caffeine and sugar.
                    </details>
                              <image>
                              <url>coca4.jpg</url>
                                        </image>
                                                  </section>
          <section>
                    <details>
                    Chocolate could be mixed with many different flavors, such as mint, strawberry, orange, banana, vanilla, hazelnut, almond, coconut, and etc.
                    </details>
                              <image>
                              <url>coca5.jpg</url>
                              </image>
                                        </section>
          <section>
                    <details>
                              Chocolate is expressing of well hospitality and good time due to its lovely taste.
                              </details>
                                        <image>
                                        <url>coca6.jpg</url>
                                                  </image>
                                                            </section>
</sources>
And here is my Action Script for "Chocolate Sources" section:
stop();
function Choco1(evt:MouseEvent): void {
          gotoAndStop('16');
choco_btn.addEventListener(MouseEvent.CLICK,Choco1);
function Souc1 (evt:MouseEvent): void {
          gotoAndStop ('31');
souc_btn.addEventListener(MouseEvent.CLICK,Souc1);
function ShopIn1 (evt:MouseEvent):void {
          gotoAndStop('46');
shops_btn.addEventListener(MouseEvent.CLICK,ShopIn1);
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.MovieClip;
import flash.display.Loader;
import fl.motion.MotionEvent;
import flash.events.MouseEvent;
import flash.sampler.NewObjectSample;
import flash.text.TextFormat;
var xmlLoader: URLLoader = new URLLoader (new URLRequest("sources.xml"));
xmlLoader.addEventListener(Event.COMPLETE, finishedXmlLoader);
var xmlFile:XML;
var xextend:int = 10;
var gal:galary = new galary ();
          gal.x = 85;
          gal.y = 165;
          addChild(gal);
var txfe: TextField = new TextField ();
txfe.x = 25;
txfe.y = 45;
var tformat:TextFormat = new TextFormat ();
tformat.bold = true;
tformat.color = 0xFFFFFF;
tformat.size = "18";
tformat.font = "Arial";
txfe.defaultTextFormat = tformat;
addChild(txfe);
function finishedXmlLoader (e:Event): void{
          xmlFile = new XML (xmlLoader.data);
          var leng:int = xmlFile.image.length();
          txfe.text = xmlFile.image.details[0];
          for (var i:int = 0;i<leng;i++){
                    var b:thumbs = new thumbs ();
                    b.x = xextend;
                    b.y = 480;
                    b.buttonMode = true;
                    b.details = (i+1).toString();
                    addChild(b);
                    b.addEventListener(MouseEvent.MOUSE_OVER, theMosover);
                    b.addEventListener(MouseEvent.MOUSE_OUT, theMosout);
                    b.addEventListener(MouseEvent.CLICK, onMosClick);
                    var bloader:Loader = new Loader();
                    bloader.load(new URLRequest("thumbs/" + (i+1) + ".jpg"));
                    b.addChild(bloader);
                    xextend += b.width + 50;
var loader:Loader = new Loader ();
loader.load(new URLRequest ("pictures/coca1.jpg"));
gal.addChild(loader);
function theMosover(m:MotionEvent):void{
          m.currentTarget.alpha = 0.5;
function theMosout (m:MouseEvent):void{
          m.currentTarget.alpha = 1.0;
function onMosClick(m:MouseEvent):void{
          var loader:Loader = new Loader();
          loader.load(new URLRequest("pictures/" + m.currentTarget.details + ".jpg"));
          gal.addChild(loader);
          txfe.text = xmlFile.image.details[int(m.currentTarget.details) -1];
I need an urgent help to fix the errors and make this section work well.
thanks.

try:
txfe.text = xmlFile.section[int(m.currentTarget.details) -1].details;
instead of
txfe.text = xmlFile.image.[int(m.currentTarget.details) -1];
and add your thumbs to gal, not the stage. when you're done with the gallery, remove gal.

Dynamic photo gallery in flex

superb post for a Dynamic photo gallery using a xml generated flex application http://flexlearner.wordpress.com/2009/09/04/dynamic-photo-gallery-in-flex/

try:
txfe.text = xmlFile.section[int(m.currentTarget.details) -1].details;
instead of
txfe.text = xmlFile.image.[int(m.currentTarget.details) -1];
and add your thumbs to gal, not the stage. when you're done with the gallery, remove gal.

Dynamic Photo Gallery with Static Links

The Dynamic Photo Gallery has a Dynamic List Menu generated from the galleries.xml file.
I would like to load the Dynamic Galleries with a link if possible. Currently I have 3 Galleries.... China, Eqypt & Paris
Dynamic Code:
<select name="gallerySelect" id="gallerySelect" onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);" spry:repeatchildren="dsGalleries" spry:choose="choose">
        <option spry:when="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{sitename}</option>
        <option spry:default="default">{sitename}</option>
      </select>
I am using some code from V1 that generates a Gallery List as follows:
<ul spry:repeatchildren="dsGalleries">
<li><a href="#{ds_RowNumber}" onclick="dsGalleries.setCurrentRowNumber(this.href.replace(/\#/g,''));">{sitename}</a></l i>
      </ul>
This works to display the dynamic Galleries but, the links do not connect to the specific galleries.
Can anyone please help with this?
Thank you,
W Bell

Sorry for not beeing to respond to your issue sooner, but i'm having some deadlines that needed to be worked on.
This works to display the dynamic Galleries but, the links do not connect to the specific galleries.
Can anyone please help with this?
Can you resend me the url again, as i needed clear my inbox because i reached maximum amount of messages.

Need dynamic Photo Gallery

Hi
I am new, not expert in flash. Knows only basic flash action
scripting, can any body guide me about dynamic flash photo gallery.
How can import images in flash from database.
please help me, I need that urgently, all suggestions are
welcome.
Regards
Harish

Hey harish ... unfortunately, developing with flash has some
serious trade-offs. The benefit is making a rich user experience.
However, data integration can often be a much more involved
process. Here are some suggestions for you.
With .net you could publish a webservice. Flash has built a
built in component for consuming webservices.
Your .net guy should know what a webservice is and how to
implement it.
Alternatively, you could have a server side script that, when
called, spits back an xml representation of the data you want to
put into flash.
for example:
<root>
<pic1 title="pic1Title" uri="/pics/pic1" ... />
<pic2 ... />
</root>
or however you want to form your xml.
Flash has built in support for consuming xml in this way
through the xmlconnector component or even just the xml
class.
It would be nice if there was a built in way to communicate
directly with databases.
Flash wanted to make their product vendor nuetral so as far
as I know, there is no way to make a connection directly with a
database with flash out of the box.
I know there are third party addons you can purchase that
will help you do that as another option as well.
One thing that has worked well for me in situations similar
to what you are discussing is using the apache xindice database
combined with the xml class in flash.
The xindice database is an open source project.
It is a database designed specifically to store xml
documents.
http://xml.apache.org/xindice/
I use java and xindice is built in java, but it has two
api's. One for developers writing in javaee and one for developers
writing in other languages.
Or hey, you could always drop a few grand on coldfusion :-)
Probably not the answers you want, but I hope it helps
anyway.

1.6 Dynamic Photo Gallery

I previously used the 1.5 version to make a Photo Gallery and
added the following piece of code to show captions to the photos:
<div id="picture">
<div id="mainImageCaption"
spry:detailregion="dsPhotos">{@caption}</div>
<div id="mainImageOutline" style="width: 0px; height:
0px;"><img id="mainImage" alt="main image" /></div>
This does not appear to work in the new 1.6 Dynamic version
of the Gallery, which I wish to use as a much more efficient
method. Any ideas how to add this feature (do gallery_init.js,
gallery_xds.js or screen.css need adapting)?

Hi,
I was able to get the caption to show up with a few minor
changes to few of the files. The changes I made do not make the
caption appear on only the first image when in slideshow mode.
After the first image, they'll appear. Also, If you click on the
thumb, they'll show up. Find the changes with the file names below:
================== index.html =================
1) in the div with id thumbnails, add the following to the
<a> tag: id="{ds_RowID}"
2) In the div with id picture, add another div with id
captionText:
<div id="picture">
<div id="captionText"></div>
<div id="mainImageOutline"><img id="mainImage"
alt="main image" src=""/></div>
</div>
================== gallery_init.js ===============
1) modify the signature of InitializeGallery function to take
in the dataset as a parameter:
function InitializeGallery(ds)
2) replace the gThumbViewer.addObserver with the following:
gThumbViewer.addObserver(function(notificationType,
notifier, data)
if(!data)
return;
if (notificationType == "onSelect")
gImageViewer.setImage(data.href);
var row = ds.getRowByID(data.id);
Spry.$('captionText').innerHTML =
row['photos/photo/@caption'];
========================= gallery_xds.js =================
change the call to InitializeGallery function (line 86) by
passing in the data set:
InitializeGallery(dsPhotos);
======================= XML files ==================
add in your caption text as an attribute of the photo tag,
just like path, thumbpath, etc are.
====================== SpryThumbViewer.js ==========
in the Spry.Widget.ThumbViewer.prototype.select function,
modify the calls to notifyObservers to accpet 'a' instead of
'a.href':
if (a)
//this.notifyObservers("onSelect", a.href);
this.notifyObservers("onSelect", a);
if (img == imgs[0])
this.notifyObservers("onFirstSelect", a);
if (img == imgs[imgs.length - 1])
this.notifyObservers("onLastSelect", a);
I think that's about it. Give it a try and let me know if
there are any other problems.

Dynamic photo gallery script?

Can anyone suggest a good photo gallery script?
My client is a photographer and needs a user-friendly system
where he can
create galleries, upload images. He also needs to assign
usernames/passwords
to each gallery. I was going to use Coppermine, but it has
too many bells
and whistles. I need to keep it very simple.
Thanks for you help.
J.P. Luisi
Lulu Digital Design
Making You Stand Out Online!
www.luludigital.com
905-832-2428

Sorry for not beeing to respond to your issue sooner, but i'm having some deadlines that needed to be worked on.
This works to display the dynamic Galleries but, the links do not connect to the specific galleries.
Can anyone please help with this?
Can you resend me the url again, as i needed clear my inbox because i reached maximum amount of messages.

Dynamic photo gallery with XML

My photo gallery works fine when I test movie in gallery.fla
I have a thumbnail scroller that moves the thumbnails right
when you move mouse left and left when you move mouse right.
When you click on a thumb a larger picture is displayed. This
all works fine in gallery.swf
But when I load gallery.swf to main.swf in an empty movie
clip using loadMovie
it loads put the scroller doesnt work. Everything else works
but when I move mouse left or right the thumbnails dont move.
Any suggestions?

This is the code for the scroller
function scroller() {
if (this._ymouse>mcScroller._y &&
this._ymouse<mcScroller._y+mcScroller._height) {
var scrollSpeed = (this._xmouse-Stage.width/2)/10;
if (Math.abs(scrollSpeed)<1) {
scrollSpeed = 0;
mcScroller._x -= scrollSpeed;
if (mcScroller._x>0) {
mcScroller._x = 0;
} else if (mcScroller._x<Stage.width-mcScroller._width) {
mcScroller._x = Stage.width-mcScroller._width;
}

1.6 Dynamic Photo Gallery - alt and title attributes from xml file?

Hi!
I would like to attach information to my gallery images from
the XML-file used by the gallery.
Especially the alt and title attributes for the "img
id="mainImage"-tag would add a bit more user friendliness.
I found
this
example about adding caption to images very help full and
everything worked just fine, thanks to clear information!
(http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadi d=1306782&enterthread=y)
Could someone come up with an example of adding title/alt
attributes values from XML file?
I'm sure there are quite a few out ther who would like to see
a solution to this ;)

You need to add your info to the XML.
So something like:
<photo
path = "travel_01.jpg"
width = "263"
height = "350"
title="my title"
alt_text="Alt Text"
thumbpath = "travel_01.jpg"
thumbwidth = "56"
thumbheight = "75">
</photo>
Then in your detailregion:
<img src="{dsData::large/@base}{@path}" alt="{@alt_text}
title="{@title}" />
I am using
http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album.html
as the source of my samples...
So, just add the data to the XML and then you will have these
attributes available as data references.
Hope this helps.
Don

Photo Gallery with captions?

Hey folks
I've added the new version of the dynamic photo gallery to my
site. It works great! But, I'd like to be able to have a caption
under each photo.. can anyone help?
I made a div under it, added a style, it displays just fine
and in the right place, I just can't get it to read the captions
from the XML file.
The HTML is basically just
<div>{name}</div>
And then my XML looks like this..
<photos id = "images">
<photo
path = "1.jpg"
width = "400"
height = "320"
thumbpath = "1-t.jpg"
thumbwidth = "100"
thumbheight = "80"
name = "pic1">
</photo>
<name>Pic1</name>
<photo
path = "2.jpg"
width = "343"
height = "400"
thumbpath = "2-t.jpg"
thumbwidth = "86"
thumbheight = "100">
</photo>
<name>Pic2</name>
</photos>
But it's not showing the text inside the <name> tag..
can anyone help me get this working? I'm really stuck
:(

the SEARCH option does miracles
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1298486&highlight_key=y&keyword1=caption

Data not dynamically updating in photo gallery

The page in question is
this
photo gallery.
The primary issue is when one thumbs through the images, the
"photoID" does not update. It remains at the first "photoID" that
is encountered, and in this case, it is 729. The "title",
"description" and so forth remain locked to the first entry as
well, yet the photograph updates "@path".
I've been working at this for almost two days and have tried
almost every possible combination. I've copied over the older
framework files from my other site (which has this working
successfully), modified it to work in this instance, and it fails
here. The XML output is correct.
function photogallery(){ //Photo gallery
?>
<div class='right'>
[Snip out collapse panel...]
<div
spry:detailregion="dsGallery">{photoID}</div>
<div id="mainImageOutline"><img id="mainImage"
alt="main image" src="{@path}" /></div>
</div>
<div class='left'>
<div id='previews'>
<div id='controls'>
<div id='transport'>
<a href='#' class='previousBtn'
title='Previous'><img src='/res/images/buttons/rewind.png'
alt='[skip-back]' border='0' /></a>
<a href='#' class='playBtn' title='Play/Pause'
id='playLabel'><span class='playLabel'><img
src='/res/images/buttons/play.png' alt='[play]' border='0'
/></span><span class='pauseLabel'><img
src='/res/images/buttons/pause.png' alt='[pause]' border='0'
/></span></a>
<a href='#' class='nextBtn' title='Next'><img
src='/res/images/buttons/fastforward.png' alt='[skip]' border='0'
/></a>
</div>
</div>
<div id='thumbnails' spry:region='dsGallery'>
<div class='thumbnail' spry:repeat='dsGallery'><a
href='{@path}'
onclick=\"dsGallery.setCurrentRow('{ds_RowID}')\"><img alt=''
src='{@path}' width="80" height="80" /></a></div>
</div>
</div>
</div>
<div style='clear: both;'> </div>
<?
}

Even doing that was no help unfortunately. Here is an
extended snippet,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Urban Up, a web-site by Sherman
Cahal</title>
<meta http-equiv="Content-Type" content="text/xml;
charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"
media="screen" />
<script type="text/javascript"
src="includes/SpryAssets/SpryEffects.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/SpryImageLoader.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/SpryNotifier.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/SpryThumbViewer.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/SpryImageViewer.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/SprySlideShowControl.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/gallery_init.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/SpryData.js"></script>
<script type="text/javascript"
src="includes/SpryAssets/photogallery/gallery_xds.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("<? echo
$tmpfname; ?>", "/gallery/photos/photo");
</script>
</head>
function photogallery(){ //Photo gallery
?><div class='right'>
<div spry:detailregion="dsGallery">{photoID}
<div id="mainImageOutline"><img id="mainImage"
alt="main image" src="{@path}" /></div>
</div>
</div>
<div class='left'>
<div id='previews'>
<div id='controls'>
<div id='transport'>
<a href='#' class='previousBtn'
title='Previous'><img src='/res/images/buttons/rewind.png'
alt='[skip-back]' border='0' /></a>
<a href='#' class='playBtn' title='Play/Pause'
id='playLabel'><span class='playLabel'><img
src='/res/images/buttons/play.png' alt='[play]' border='0'
/></span><span class='pauseLabel'><img
src='/res/images/buttons/pause.png' alt='[pause]' border='0'
/></span></a>
<a href='#' class='nextBtn' title='Next'><img
src='/res/images/buttons/fastforward.png' alt='[skip]' border='0'
/></a>
</div>
</div>
<div id='thumbnails' spry:region='dsGallery'>
<div class='thumbnail' spry:repeat='dsGallery'><a
href='{@path}'
onclick=\"dsGallery.setCurrentRow('{ds_RowID}')\"><img alt=''
src='{@path}' width="80" height="80" /></a></div>
</div>
</div>
</div>
<div style='clear: both;'> </div>
<?
And the XML file that is created:
<?xml version="1.0" encoding="utf-8"?>
<gallery base = "">
<photos id = "images">
<photo path="
http://www.urbanup.net/content/20070629/photos/1_13_251.jpg">
<photoID>729</photoID>
<title>Downtown</title>
<description><![CDATA[]]></description>
</photo>
<photo path="
http://www.urbanup.net/content/20070629/photos/1_19_3.jpg">
<photoID>834</photoID>
<title></title>
<description><![CDATA[A shared common area divides
the new homes along South Mill.]]></description>
</photo></photos></gallery>

How to create a dynamic button to download a photo gallery in Adobe Muse?

I need to create a gallery in Muse, so far so good, but when each photo was displayed automatically would have to see a download option that picture, ie, individual download each photo gallery. Is how to do this? Is there a script for Adobe Muse or widgets?
I thank your attention !!

Hi Terry,
As I already said, this is really a helpful tutorial to me.
I have one question though. Is it possible to make a dropdown menu that gets triggerd by pushing only the menu button itself and not the whole header? It doesn't seem possible to me, as the accordion panel has to be the same size as the menu. I can't think of any solution but to align a small menu to the side of the screen, which would not be my first choice to do.
Any workaround suggestions are welcome!
Thanks in advance!

Dynamic Spry Photo Gallery Thumbnails

I'm implementing the XML version of the Spry Photo Gallery. I
need to edit the size of of the thumbnails and make them larger,
roughly 100x130 or maybe a little smaller. Since I have so many
photos, I was planning to use CSS to handle the overflow with a
scrollbar. I noticed sizing occurs in the Index file, Gallery.js,
and in the XML file. Are there any others that im missing? I'm
having a problem with resizing them, they dont resize when I adjust
the size in those places. Any suggestions would be appreciated.
Thanks
link (select Tattoo from the dropdown):
http://www.bugsartwork.com/beta/gallery/index.html

I overlooked screen.css, there was some css that was setting
the thumbnail img tag.

Photo Gallery bug in IE7

http://labs.adobe.com/technologies/spry/demos/gallery_pe/dynamic/index.html
On mouseover, selected thumbnail expands behind other
thumbnails instead of hovering over them. Works fine in FF.
Is there a way to fix/override this?

@Kin
The gallery demo files do not put an anchor link around the
thumbnails. The article you list is describing how to alter the
files for (newer?) examples that require about 8 different include
files -- which, given the already HUGE download hit required to run
a photo gallery, seems excessive.
Can adobe not write up a solution that works for the sample
files for the gallery that only requires 3 includes + 1 css file
(which can be added to your own style sheet to avoid yet another
file download)?
Or, is there someway to grow the thumbnails from the bottom
right corner, thus avoiding any overlap by subsequent thumbs? I
tried setting the grow from center to false in SpryEffects but it
appeared to have no effect on the function in the gallery.

Photo Gallery Database in Dreamweaver Help

Can anyone offer advise on a simple solution for a photo gallery based on a database that can be intergrated to a website that I'm creating in Dreamweaver. Does anyone know of any widget like options and or templates? Thanks in advance.

I have a PHP script that dynamically populates the page with images from a folder. I don't keep images in a database.
http://alt-web.com/GALLERY/GalleryTest.php
Nancy O.

Dynamic Photo Gallery?

Similar Messages

Maybe you are looking for