Photo Gallery Grid style

Is there a way to have a photo gallery on a web page but in the style of a grid instead of a slideshow? Im going to have a lot of photos and would like my clients to be able to scroll through them all.
Thanks

Hello,
You can either add the images individually or can use a Lightbox widget (if you wish to have the Lightbox effect).
Regards,
Sachin

Similar Messages

Transferring Windows Photoshop CS2 web photo gallery styles in Mac Photoshop CS4 web photo gallery

Hi,
My name is JatinderPal Singh. I'm migrating from Vista to MAC and before I purchase the upgrade from Photoshop CS2 and Photoshop CS4 I need to know that can I continue to use my existing web photo gallery styles in CS4 after installing the add-on feature. Because I know web photo gallery is not default in CS4. We need to manually add this feature. I hear from other photographers that this is a problem. Can you please confirm that this is possible

Check this out:
http://blogs.adobe.com/jnack/2009/04/a_few_useful_reminders.html
Remember to install the Picture Package too.
Additionally, make sure you have updated to Photoshop 11.0.1 and applie the update to AOM, the Adobe Output Module.

I need a flash tutorial on Iphone style Scrolling Photo Gallery using Next/previous Buttons

Here i have attached two sample Fla files of iphone style scrolling photo gallery using next Previous buttons. Smoothscroller.fla is the original file download from internet and thumbscroll.fla is the one i m trying to make. But i m getting the actionscript error in the movieclip symbol 2 frame 2 actionscript frame. Can anyone work out on my file & send me the easiest tutorial of flash so that i can complete my portfolio project.
Mail me ur tutorials at : [email protected]

Just Google for the Spry photo gallery and you might find
http://cates-associates.net/tutorials/Tutorial-CS3-Spry.html
or even a few others.
Happy Sprying
Ben

Trying to add photo gallery to Dreamweaver page

Hi,
I would like to add a photo gallery in a style similar to this one: http://www.pezziunici.com/html/prodotti.php?lng=eng&pro=310
with a thumbnail grid on the left and large photos with captions to the right - all on the same page.
I see there is a table structure in the page, but also php. Is there a simple way of doing this (or at least something with step-by-step directions) or an extension that lets you have everything embedded in a Dreamweaver CS4 html page, and both thumb grid and large picture with captions are on the same page? I have taken some html/css courses, but am probably an advanced beginner level (with Dreamweaver also).
Thanks!

Not the same as the gallery you pointed to, but you can embed a Bridge gallery in Dreamweaver. Tutorial on my site at http://foundationphp.com/tutorials/gallery/embed1.php.
You might also want to take a look at the Adobe Widget Browser on Adobe Labs (http://labs.adobe.com/technologies/widgetbrowser/). It has some nice gallery widgets available. The widget browser is integrated into CS5, but I think you can use it with CS4 (see http://forums.adobe.com/thread/659849?tstart=30).

Filterable Photo Gallery

Hello everyone,
I wish to use responsive filterable photo gallery from
http://www.jqueryscript.net/layout/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-E lastic-Grid.html
in my website http://bhc.edu.in/MATICS/gallery.php
I followed the instructions ... but i found nothing in my page.I dont't know what i did wrong.Please help me.
Thanks in advance.

If you are referring to the desktop layout, (line 641 in layout.css) change the width to suit.
Personal note, aesthetically, I prefer the width of your Photo page over the width of your other pages.
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;

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.

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>

Need "Rotate" Function in Photo Gallery

All of my screen grabs end up 90 degrees rotated in PhotoGallery. There is no rotate function in Photo Gallery so to deal with these images I first open them in Adobe Editor on iPad and rotate them then save them to PhotoGallery.
Is there a better way to do this?

To the example that you have linked to above, make the following additions
<div id="arch-container" style="position:relative;">
<div id="arch-img" style="position:absolute; top: 170px;"><img src="images/arch-img.png" alt="arch_img" width="959" height="195" /></div>
</div>
I have used inline styles to make it easy on myself, but in reality you would put the style rules in the corresponding element selector in the CSS. Also, you would readjust the values to suit.
Also, it is worth mentioning that placing a width and height on your image as you have done, should really be done using CSS.
Added:
As a side note, I have gotten into the habit of using classes for all of my style rules. I came to the conclusion that this is the way to go when trying to analyse a problem within my web page. ID's are unique per document and as such are used when manipulating the DOM using JavaScript. Now when I see an ID in one of my documents, I know that it is not a styling matter as in CSS, but a problem within my script.
Take the above note as a thought, because there is a ongoing debate about this.
Message was edited by: Altruistic Gramps

Problem loading images in adobe bridge html photo gallery

Can someone please, please help me!? I can not figure out why the images will not load in my adobe bridge html photo gallery cs5. I am not getting any error messages in Firefox and just the x in internet explorer.
Here is the link to the gallery page on the site: http://www.irishwetlands.ie/Gallery.html
I created the gallery as a html file for compatibality reasons due to accesbility issues with flash, and followed the general insturctions. The gallery folder is called wetlandsgallery and it is loading everything style-wise except the images themselves.
I then made the gallery within an iframe so it would be more similar to the other pages on the site and contain the menu bar - but no change on the lack of images!
Having looked around online I think it might be something to do with the bin folder?? Does this have some secutity somewhere thats protecting the images? I am also unsure if I filled in the FTP info correctly when creating the site as I was getting the message "could not connect to FTP server" so I had to copy over the file from my hard drive to the server provider files. All the tutortials say to load your gallery and no mention of what to do when it won't connect to FTP server.
If you could also tell me how to edit the image sizes that would be a great help too, as any size changes I make to either the bin/large or bin/thumnail images makes no difference in what appears in the preview?
Help would be very greatfully appreciated as I am pulling my hair out trying to figure it out with no sucess and a possible bald patch!
Thanks in advance,
Áine

Hello Áine,
1. Is it really necessary to comment out this part in your source code?

Using your source code without these things I could see some of your images.
2. Looking to your website with my IE8 into image 7 (e.g.) I saw this:
what means there is a reference to a html file, not to an image. ???
3. Here it becomes interesting (completely contrary to my point 2.), looking for your path:
http://www.irishwetlands.ie/images/GalleryImages/Gallery1_Selection%20of%20IRWC%20members% 20at%20the%20Gearagh.jpg
I can see this image in my IE8 (some people in front of a "wetland". But still I've to assume (as Murray already did too), that there is something wrong with your upload and the pathes.
4. Allow me to make one brief point, we talked about here on several occasions: please don't use spaces in image, folders or filenames. I'll quote Murray: In general, URL encoding spaces does not lead to problems. ... Whatever the details are, though, using spaces in filenames or paths is a bad practice which WILL lead to problems.
5. What concerns the image sizes, maybe later (I didn't understand your question correctly I fear). There is still my language barrier, I'm sorry.
Hans-Günter

Photo Gallery start up problem

I have a glitch and it's probably me … but here's what
I know.
About Don Booth's Photo Gallery:
It's great. Everything is good - integrated with my CSS -
looks nice.
When the page loads all is well except the first image in the
Gallery does not display in <div id="mainImageOutline"... (and
the first thumbnail is not highlighted). While I'm building and
testing this is OK. Just click a thumbnail and everything works
well.
In the demo, the Gallery is operational by default and starts
up with the first thumbnail and Spry:detail produces the
corresponding image (automatically). That's what I want.
About my code:
Except for a couple of "page layout" divs that I have,
consistent with my own site-wide style sheet conventions, such as
<div id="wrapper"> and <div id="maincontent"> I have:
1. Copied Don Booth's xhtml code directly from the
Spry_1_1_022408 download sample.
2. Copied Don Booth's css code directly from the same
download sample.
3. Copied Don Booth's gallery.js directly (without change as
far as I know).
The only significant change (apart from CSS and xhtml
structure) in my work is - I added an additional Spry:detail div to
present additional datapoints from xml. This is not relevant to my
question because the issue that concerns me is consistent if I
remove this second detail div. The start-up problem remains.
The URL for the gallery page in question is:
http://www.yhqg.org/Celebration/quiltshow2008/galleryix/gallery.htm
I imagine the problem is in gallery.js. You should know that
javascript is a bit like dungeons and dragons to me.
I have an error report:
Error: dsPhotos is not defined
Source File:
http://www.yhqg.org/Celebration/quiltshow2008/galleryix/includes/gallery.js
Line: 55
So, when I see:
var gAutoStartSlideShow;
if (gAutoStartSlideShow == undefined)
gAutoStartSlideShow = true;
I imagine I'm looking at something useful but I don't know
what to do with it, or if it is the right code to focus on. I
respect the relationship with level 4 support engineers, but after
trying to solve my own issue for a few weeks I decided it was time
to submit my question. How do I get Photo Gallery to start up like
the demo?
Additional information:
There is also a series of error reports that show when the
Gallery is playing (for example):
Warning: Expected end of value for property but found
'-0.0775'. Error in parsing value for property 'opacity'.
Declaration dropped.
Source File:
http://www.yhqg.org/Celebration/quiltshow2008/galleryix/gallery.htm
Line: 0
I don't think it is related, but that's what I know.
I tried to copy my xhtml (below) but it caused this message
to exceed allowed size. But I don't see that xhtml is the problem.
You can see the source at the URL (above).

Hi Latauro,
Sounds like you need to turn your Slideshow into a Track, and then set the Track to display as 16:9 Letterbox; but first, you'll also need to encode your slides as wide Mpeg 2 clips (encode set to 16:9), too; to whatever duration you have them set in the Slideshow, currently (if they're not already wide encoded clips).
It would be good to stick some same duration audible or silent same format and bit rate audio underneath each of the new movie slides, to present players a nicely packed VOB.
Take care,
Trai Forrester
TFDVD Research Labs
http://www.DVDVerification.com
PS. If this helps you, would you please remember to declare the thread as "Solved". Although probably hopeless, someone should make a run to try and catch up with good Drew!! (see what happens Hal, when you take some time off?!

Photo Gallery Demo Problem

I'm trying to understand the Photo Gallery demo so I can
replicate the function for use on various sites. I've copied the
html, xml, javascript and some of the photo file elements to my
hard drive. I initially modified the file structures to something
more of my liking, but had some problems with the links. I've since
mimicked the structures so I can reduce the initial errors, but I
am stumped at the var dsGallery and var dsPhotos statements that
dynamically link to the China, Paris and Egypt photo databases. In
the original dynamic definition, DreamWeaver only parses the
dsGalleries XML definition, not defining the dsGallery and dsPhoto
nodes. I wasn't too concerned about that given the variable nature,
but nothing except the pull-down menu and controls displayed in the
browser. DreamWeaver shows correct parsing of the dsGalleries XML,
dsGallery and dsPhoto nodes only when I eliminate the dynamic
linking and set it to one of the static links (Egypt). This fails
in the browser to link to the data, giving a display that shows the
correct number of empty thumbnail frames but without the displayed
photos, no Spry effects, and no large photo display. I'm sure I
have multiple reference errors, but I don't see them. Any ideas?
Initial Photo Demo page:
<!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>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<title>Gallery</title>
<link rel="stylesheet" type="text/css"
href="../css/screen.css">
<script type="text/javascript"
src="../SpryAssets/xpath.js"></script>
<script type="text/javascript"
src="../SpryAssets/SpryData.js"></script>
<script type="text/javascript"
src="../SpryAssets/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new
Spry.Data.XMLDataSet("galleries/galleries.xml",
"galleries/gallery");
var dsGallery = new
Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
"gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("galleries/{dsGalleries::@base}{dsGalleries::@file}",
"gallery/photos/photo");
</script>
<script src="../SpryAssets/gallery.js"
type="text/javascript"></script>
</head>
<body id="gallery">
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="wrap">
<h1 id="albumName"
spry:region="dsGallery">{sitename}</h1>
<div id="previews">
<div id="galleries" spry:region="dsGalleries">
<label for="gallerySelect">View:</label>
<select spry:repeatchildren="dsGalleries"
id="gallerySelect"
onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}"
selected="selected">{sitename}</option>
<option spry:if="{ds_RowNumber} !=
{ds_CurrentRowNumber}">{sitename}</option>
</select>
</div>
<div id="controls">
<ul id="transport">
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage(true);"
title="Previous">Previous</a></li>
<li class="pausebtn"><a href="#" onclick="if
(gSlideShowOn) StopSlideShow(); else StartSlideShow();"
title="Play/Pause" id="playLabel">Play</a></li>
<li><a href="#" onclick="StopSlideShow();
AdvanceToNextImage();" title="Next">Next</a></li>
</ul>
</div>
<div id="thumbnails" spry:region="dsPhotos dsGalleries
dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.getElementsByTagName('img')[0],
'{@thumbwidth}', '{@thumbheight}');"
onmouseout="ShrinkThumbnail(this.getElementsByTagName('img')[0]);">
<img id="tn{ds_RowID}" alt="thumbnail for {@thumbpath}"
src="galleries/{dsGalleries::@base}{dsGallery::thumbnail/@base}{@thumbpath}"
width="24" height="24" style="left: 0px; right: 0px;" />
</div>
<p class="ClearAll"></p>
</div>
</div>
<div id="picture">
<div id="mainImageOutline" style="width: 0px; height:
0px;"><img id="mainImage" alt="main image" /></div>
</div>
<p class="clear"></p>
</div>
</body>
</html>
Fixed reference version:
<head>
var dsGalleries = new
Spry.Data.XMLDataSet("Graphics/galleries/galleries.xml",
"galleries/gallery");
var dsGallery = new
Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
"gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("Graphics/galleries/egypt/Egyptphotos.xml",
"gallery/photos/photo");
</script>
Supporting files galleries.xml and Egyptphotos.xml
<?xml version="1.0" encoding="UTF-8"?>
<galleries>
<gallery base="Graphics/galleries/egypt/"
file="Egyptphotos.xml">
<sitename>Egypt</sitename>
<photographer>Don Booth</photographer>
<contactinfo>
http://www.adobe.com</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
</gallery>
... duplicate China and Paris declarations
</gallery>
</galleries>
<?xml version="1.0" encoding="UTF-8"?>
<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
date = "1/10/2006">
<sitename>Egypt Gallery</sitename>
<photographer>Don Booth</photographer>
<contactinfo>
http://www.adobe.com</contactinfo>
<email>[email protected]</email>
<security><![CDATA[]]> </security>
<banner font = "Arial" fontsize = "3" color =
"#F0F0F0"> </banner>
<thumbnail base
="../../gallery/galleries/egypt/thumbnails/" font = "Arial"
fontsize = "4" color = "#F0F0F0" border = "0" rows = "3" col =
"5"> </thumbnail>
<large base ="../../gallery/galleries/egypt/images/" font
= "Arial" fontsize = "3" color = "#F0F0F0" border = "0">
</large>
<photos id = "images">
<photo
path = "egypt_01.jpg"
width = "350"
height = "262"
thumbpath = "egypt_01.jpg"
thumbwidth = "75"
thumbheight = "56">
</photo>
</photos>
</gallery>

Please delete this posting. I've found the full original
information in the v1.6 pre-release information and will compare to
that baseline.

Photo Gallery page on iWeb - Sharing some experience....

I am an Aperture user and my starting point was to create nice web photo galleries from Aperture...
- I got quickly frustrated with the lack of customization of the standard Aperture Web pages (font, color, size...).
- Aperture 2.1 MobileMe galleries are a bit better but not what i wanted either.
- Then i found out that i could easily export photos from Aperture to iPhoto, and then from iPhoto to iWeb, and that iWeb would offer me more customization options.
- Following that route, i imported my Aperture photos into iPhoto, then used the Share/Send to iWeb/Photo Page function.
- Having some experience using iWeb, i was able to customize the template somehow, but got frustrated by the apparently fixed web page size, which at first seemed to stick to a 700x480 format for the photo gallery... and i would like to show the pics at around 1200x1200....
- Until i played with the Album style pop up window and found that depending on the style chosen, the photo gallery size could expand up to 1200 pix width ! (that with the Album style which is on 1st column/3rd row). But then double clicking on thumbnails would randomly expand the given picture to between 700 and 1200 pix width...
This is where i got to. Now a few questions, if you're still with me :
- Am i correct to assume that there is no direct interface available between Aperture and iWeb, and that i need to use this iPhoto intermediate step?
- Has anyone found a way to fully customize the size of photo galleries in iWeb (both for the thumbnail display area and for the magnified picture area)?
- If not, can someone point me to a comprehensive resource detailing the iWeb template creation steps ?
Thanks in advance, and to add a wish : could Mr Apple think of standardizing/optimizing/improving the web gallery generation process across its platform for the next versions ?

I've read in this forum that Aperture has a setting to make it's photos available to other iApps, see this post, via the Media browser but not galleries created by it in the Web Snippet menu, see the last post in this topic.
Submit a feature request to both iWeb and Aperture at:
http://www.apple.com/feedback/iweb.html
http://www.apple.com/feedback/aperture.html

Need Expertise on Custom Photo Gallery Template

Hello there - this question isn't really just Mac specific, but I don't see a forum that will post to ALL Photoshop users.
I'm in need of some help customizing a Photo Web Gallery in Photoshop. I've done one entirely without tables, using my own CSS to style it. My thumbnail page would be similar to the coding for the index page of the Lightbox styled gallery in this tutorial: www.photoshoplab.com/lightbox-web-photo-gallery.html
However, my problem is that even though my design doesn't use tables, when I'm in the automation dialogue in Photoshop, it still shows the table row and column parameters - greyed out - from the last time a table-based gallery template was used. And Photoshop is using this info to decide how many thumbnails to put on the gallery index page. It simply multiplies the row * column to limit the number of thumbnails on that first page. Very odd and not very nice looking, as it won't finish a row this way.
I notice the Lightbox styled gallery template does away with the table for the thumbnails as well. How, then can I gain control over showing "X" number of images per thumbnail page? Say I have a gallery of 40 images - how can I show 20, max, per page? Or 10? Or whatever needs to be specified to suit the number of images in that gallery?
Also, at runtime, Photoshop is stripping some small but important bits of code out of my customized templates. I've tried to put some HTML elements in to force the "previous next" text below the thumbnails, but it gets stripped out during the generation of the gallery.
The results can be seen here:
www.springfieldmo.gov/cityconnect/images/galleries/dating/index.html
Notice that the first thumbnails page shows 21 images. That's because the greyed out row, column info in the automate dialogue was 3 rows of 7 columns.
Is there any way to get to the actual code that Photoshop runs to generate the galleries? Seems like that's where it would be looking for the table info.
Any thoughts? I'd sure appreciate any info you can give or point me to someone who has done a pure CSS automated Photoshop gallery.
Sincerely,
Christopher Akins
Web Coordinator
City of Springfield, MO

Thanks Curt, In fact I think I have found the files under
user\Application Data\Adobe\Bridge CS5\Adobe Output Module\MediaGallery\
I got there as a result of your suggestion and although I didn't find /roaming/ I did find the following directories
/document1/
/preview/
/previewinbrowser1/
So I am guessing these contain the files I need to work with. Some of the files are json files which is a bit new to me but I think there is a fair bit of resource around about it.
Regards, Les

Problem in responive photo gallery

I have inserted the yoxview photo gallery from this website http://www.yoxigen.com/yoxview/.Here is the code.
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Photo Gallery</title>
<script type="text/javascript" src="yoxview/yoxview-init.js">
</script>
<script type="text/javascript" src="yoxview/yoxview-nojquery.js"></script>
<script type="text/javascript">
            $(document).ready(function(){
                $("#thumbnails").yoxview({
                 backgroundColor: 'Blue',
                 playDelay: 5000
</script>
<link href="yoxview/yoxview.css" rel="stylesheet" type="text/css">

<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="CSS/Layout.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="flexslider.css" type="text/css">
<link href="css/flexnav.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
    background-color: #E9E9E9;
</style>
<style>
footer
    min-height: 80px;
    background: #000;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #C7E003;
</style>

<script src="jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
    $('.flexslider').flexslider();
</script>



<script src="respond.min.js"></script>


</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><img src="SJV-Images/Banners/LimeGreenheader-new-curved.png"/></div>
<div id="Nav">
<div class="menu-button">Navigation</div>
    <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="">Home</a>
           
            </li>
            <li><a href="">Profiles</a>
              <ul>
                <li><a href="">Sub 1 Item 1</a></li>
                <li><a href="">Sub 1 Item 2</a>
                  <ul>
                    <li><a href="">Sub 2 Item 1</a></li>
                    <li><a href="">Sub 2 Item 2</a></li>
                    <li><a href="">Sub 2 Item 3</a></li>
                  </ul>
                </li>
                <li><a href="">Sub 1 Item 3</a>
                  <ul>
                    <li><a href="">Sub 2 Item 1</a></li>
                    <li><a href="">Sub 2 Item 2</a>
                      <ul>
                        <li><a href="">Sub 3 Item 1</a></li>
                        <li><a href="">Sub 3 Item 2</a></li>
                        <li><a href="">Sub 3 Item 3</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a href="">Photo Gallery</a>
             
            </li>
            <li><a href="">Alumni</a>
             
            </li>
            <li><a href="">Contact Us</a>
          
            </li>
          </ul>
        </nav>
</div> 
<div id="LayoutDiv2">

         
<div class="yoxview">
<h3>   Photo Gallery</h3>
<a href="yoxview/Images-Yoxview/Trial_Gallery1.jpg"> <img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb1.jpg"alt="First" width="100" height="97" title="First image" /></a>
    <a href="yoxview/Images-Yoxview/Trial_Gallery2.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb2.jpg"alt="Second" width="100" height="97" title="Second image" /></a>
     <a href="yoxview/Images-Yoxview/Trial_Gallery3.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb3.jpg" alt="Third" width="100" height="97" title="Third Image"/></a>
    
</div>


</div>

</div>
<footer></footer>
<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>
<script type="text/javascript">$(".flexnav").flexNav({'animationSpeed': 150});</script>
</body>
</html>
The plug-in works.But i want to increase the height of the div with the class = yoxview.But i couldn't find the such class.Here is the css.
/* YoxView v2.0 CSS file */
#yoxview .yoxview_bottom{ bottom: 0; }
#yoxview .yoxview_right{ float: right; }
#yoxview .yoxview_left{ float: left; }
#yoxview_popupWrap
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 100;
#yoxview
    position: absolute;
    font-family: Arial, Sans-Serif;
    z-index: 999;
    border: solid 1px #999;
    overflow: hidden;
    font-size: 10pt;
    text-align: left;
    max-height: 1000px;
#yoxview a img, #yoxview_infoPanel a img{ border: none; }
#yoxview a:focus{ outline: none; }
#yoxview div.yoxview_imgPanel{ position: absolute; top: 0; left: 0; }
#yoxview div.yoxview_mediaPanel
    position: absolute;
    background: #191919;
    width: 100%;
    height: 100%
#yoxview .yoxview_ctlBtn
    position: absolute;
    z-index: 3;
    display: block;
    text-decoration: none;
    outline: none;
    width: 50%;
    height: 100%;
#yoxview .yoxview_ctlBtn img
    position: absolute;
    border: none;
    top: 50%;
    margin-top: -22px;
#yoxview a.yoxview_ctlBtn:focus, #yoxview a.yoxview_ctlBtn:active{ outline: none; outline: none;}
#yoxview .yoxview_notification
    width: 59px;
    height: 59px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    z-index: 4;
    opacity: 0.6;
    filter: alpha(opacity=60);
    background-image: url(images/sprites.png);
    background-repeat: no-repeat;
    display: none;
#yoxview #yoxview_ajaxLoader img
    padding: 13px;
#yoxview .yoxview_popupBarPanel
    position: absolute;
    z-index: 4;
    min-height: 70px;
    width: 100%;
    right: 0;
#yoxview #yoxview_menuPanel
    width: 145px;
    height: 42px;
    padding-top: 0px;
    padding-right: 9px;
    position: absolute;
    right: 0;
    background: url(images/sprites.png) no-repeat left -77px;
    background: rgba(0, 0, 0, 0.8);
    -moz-border-radius: 0 0 0 15px;
    -webkit-border-radius: 0 0 0 15px;
    border-radius: 0 0 0 15px;
    top: -42px;
#yoxview #yoxview_menuPanel a
    display: block;
    width: 45px;
    float: right;
    text-align: center;
    font-size: 0.8em;
    position: relative;
    margin-top: -5px;
    padding-bottom: 13px;
    text-decoration: none;
    font-family: Arial, Sans-Serif;
#yoxview #yoxview_menuPanel a span{ color: White; display: block; margin-bottom: 3px; }
#yoxview #yoxview_menuPanel a.last{ margin-left: 0; }
#yoxview #yoxview_menuPanel a:focus{ outline: none; }
#yoxview_infoPanel
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    color: White;
    z-index: 2;
    overflow: hidden;
#yoxview_infoPanel #yoxview_infoPanelBack
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
#yoxview_infoPanel #yoxview_infoPanelContent
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 0;
    left: 0;
#yoxview_infoPanel span#yoxview_count
    display: block;
    width: 55px;
    font-size: 0.8em;
    float: left;
    text-align: center;
    padding-top: 8px;
    color: #bbb;
#yoxview_infoPanel #yoxview_infoText
    margin: 0 55px;
    font-size: 12pt;
    padding: 5px 0;
#yoxview_infoPanel #yoxview_infoText #yoxview_infoTextDescription
    margin-top: 1em;
    font-size: 10pt;
    padding-bottom: 0.5em;
    max-height: 200px;
    overflow: auto;
    padding-right: 10px;
#yoxview_infoPanel #yoxview_infoText a, #yoxview .yoxview_error a{ color: #a7d557; text-decoration: none; outline: none; }
#yoxview_infoPanel #yoxview_infoText a:hover, #yoxview .yoxview_error a:hover{ color: #d5eeaa }
#yoxview_infoPanel a.yoxviewInfoLink
    display: none;
    opacity: 0.8;
    float: right;
    margin-right: 5px;
    margin-top: 5px;
#yoxview_infoPanel a.yoxviewInfoLink:hover{ opacity: 1 }
#yoxview #yoxview_helpPanel
    display: none;
    width: 201px;
    height: 312px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -171px;
    margin-left: -111px;
    z-index: 5;
    color: White;
    padding: 20px;
    padding-top: 10px;
    cursor: pointer;
#yoxview #yoxview_helpPanel h1{ font-family: Arial Black, Arial, Sans-Serif; font-size: 1em; }
#yoxview #yoxview_helpPanel p{ margin-top: 80px; }
#yoxview #yoxview_helpPanel span#yoxview_closeHelp{ display: block; position: absolute; bottom: 20px; left: 0; text-align: center; width: 100%; }
#yoxview .yoxview_error
    display: block;
    text-align: center;
    color: White;
    font-family: Arial, Sans-Serif;
    font-size: 14pt;
    top: 41%;
    width: 100%;
    height: 20%;
    position: absolute;
    padding: 10px;
#yoxview .yoxview_error .errorUrl{ font-size: 10pt; }
#yoxview .yoxview_top{ top: 0; width: 50%; }
#yoxview .yoxview_element{ width: 100%; height: 100%; position: absolute; border: none; background: #333; }
.yoxview-thumbnails a
    float: left;
    margin: 4px;
    /* For thumbnails opacity: */
    opacity: 0.8;
    filter: alpha(opacity=80);
.yoxview-thumbnails a:hover
    /* For thumbnails opacity: */
    opacity: 1;
    filter: alpha(opacity=100);
.yoxview-thumbnails a img
    /* Set white borders around the thumbnails, instead of the browser's default Blue: */
    border: solid 1px #ffffff;
.yoxview-thumbnails-details{ margin-bottom: 1em; }
.yoxview-thumbnails-details h2{ margin-bottom: 0; padding: 0; font-size: 1.2em; font-weight: bold;}
Where i could increase the height of the div?Pls help me.

http://www.yoxigen.com/yoxview/usage.aspx#installation
Please visit this link.Here in the first step,they have said to add class=yoxview.I did the same.But i couldn't find it in CSS.I have added these links.
<script type="text/javascript" src="yoxview/yoxview-init.js">
</script>
<script type="text/javascript" src="yoxview/yoxview-nojquery.js"></script>
<script type="text/javascript">
            $(document).ready(function(){
                $("#thumbnails").yoxview({
                 backgroundColor: 'Blue',
                 playDelay: 5000
</script>
<link href="yoxview/yoxview.css" rel="stylesheet" type="text/css">
HTML Markup
<div class="yoxview">
<h3>  Photo Gallery</h3>
<a href="yoxview/Images-Yoxview/Trial_Gallery1.jpg"> <img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb1.jpg"alt="First" width="100" height="97" title="First image" /></a>
    <a href="yoxview/Images-Yoxview/Trial_Gallery2.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb2.jpg"alt="Second" width="100" height="97" title="Second image" /></a>
     <a href="yoxview/Images-Yoxview/Trial_Gallery3.jpg"><img src="yoxview/Images-Yoxview/Thumbnails/Trial_Gallery_thumb3.jpg" alt="Third" width="100" height="97" title="Third Image"/></a>
Please help.

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

Photo Gallery Grid style

Similar Messages

Maybe you are looking for