Photo Gallery Page

I'm creating a photo gallery page for a site.... I have my 12
thumbnails (70 x 70) in a table. To the right is a 260 x 260 layer
in which to view the photo full size. I want to have the full size
photo appear in this layer when the viewer mouses over the
corresponding thumbnail. Is this accomplished using javascript?
I've seen this on other sites. Can anyone suggest a tutorial or
other help? I considered the Flash / XML method but I don't want a
slideshow. Please help.

It can be accomplished using CSS and javascript
highlight the thumbnail and use behaviors to "show or hide
layers". You will need to place the correct image in each layer
(I know that a lot of people do not like layers but it works
for this example. just fine I have had no problems) (but it is
confusing)
here is an example
http://www.storyartstation.com
here is a tutorial
http://www.maagraphics.com/tutorials/show-and-hide-layers-in-dreamweavermx.htm

Similar Messages

Photo gallery Pages cant go "Under" another page or have i missed something

Seems any Photo Gallery page you make always stays at the top level. You don't seem to be able to make say a blank Page and create 3 gallery pages UNDER that page.
What I'd like to do is create a top page called Photo Galleries and in there put 3 photo gallery pages
One called Picture Art, One Garden Art and one Commisioned. UNDER each of these pages I'd like to have 3 Galleries.
The reason I want to do this is to make it easier for people to find exact catagories when they visit my site.
Message was edited by: slipstream

You don't seem to be able to make say a blank Page and create 3 gallery pages UNDER that page.
Yes, you can.
Add a My Photoalbum page. In it you can add photopages.
You can drag existing photopages into the My albums page.
It's all there. Visible and ready to use.
http://www.apple.com/ilife/tutorials/#iweb-photoalbum

Photo gallery page from iWeb '08 doesn't work for Mac OS X 10.3.9 user?

I have recently published a photo gallery page with comments on using iWeb '08 (latest update). Displays fine for me and apparently a lot of other mixed-platform users. But one user is saying that his eMac with Mac OS X 10.3.9 and the Safari of the day don't display the pictures. He gets the banner and background image for the gallery, but not the actual pictures. I asked him to try Firefox, but so far no reply on that.
Do the older versions of Safari work with content from iWeb '08?

QuickTimeKirk wrote:
The only thing missing when viewed using older browsers is those features that require newer Web browser software.
It was no different when AOL went from version 3 to version 4.
The very complex javascript files written by iWeb 2 still allow older browsers view (limited features) view the basic parts of your pages.
Unfortunately this is not true. On an iMac G4 10.3.9 using Safari you cannot even view the photos, the photo page or even the web gallery itself. You just get a warning. Had I known that my friends and family would have a problem viewing photos I would have passed on the update. I don't expect my Father to upgrade his system to view photos from the "user friendly" Apple programs. That's why we got him an iMac to begin with. I find iLife 08 a very poor release from Apple and more trouble than it is worth.
It was no different when AOL went from version 3 to version 4.
I didn't know AOL even still existed, that alone upgraded!? (haha)
+The images should load but many of the Web 2.0 features will not work (image rollover viewing, changing dimensions or background colors).+
But Kirk, they don't, none of them! and this kind of stuff just seems crazy to some of us. I wish that Apple would TELL US or advertise the facts like, Oh, you only get ONE gallery for each user on Web Gallery (useless) and Oh, you will not be able to edit 06 iWeb pages with 08 iWeb and the iLife 08 version of iPhoto you will not be able to view these galleries without upgrading to the latest Safari web browser. Yes we always expect some bugs with a major update but this is getting ridiculous.
I have not yet had anybody try downloading the newest version of Firefox that will work with 10.3.9. Do you know if that will make a difference? Thanks for your help.

Movie file on photo gallery page

I added a small movie file to the bottom on a photo gallery page. That works out fine, but then the same movie displays at the bottom of each page when individual images are displayed, which I don't want.
I know that it's all one page under the hood... but is there any way to add a movie so it just shows under the gallery thumbnails?

I would happily have a thumbnail pointing to the movie file but if I drag the movie into the gallery section it just lands on top of all the thumbnails.
Drag the movie from the mediabrowser or desktop into the photogrid.
That's the eternal frustration of iWeb... you can produce great looking pages but as soon as you want to step outside its narrow box you run into a brick wall.
Au contraire.
Accept the limitations of iWeb and look beyond them.
Outside your box is a universe with unlimited possibilities. Unfortunately it requires knowledge. Which requires study. Which requires effort.
The world is larger than iLife. You are in control.
For your eternal pleasure, step outside your narrow box and visit me behind the brick wall @ http://www.wyodor.net
+I do not receive any pecuniary compensation whatsoever for my advice.+

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

SWF into photo gallery page, but thumb links stopped

(PC question). I have a swf header for several web pages, and want a gallery page with the same header. (The header links work fine). The following is a portion of ThumbnailFrame.htm showing how I put the SWF in (using parts of the SWF htm). The page worked fine until the swf was added. Am I going about this wrong? Should I be trying to add the gallery index.htm to the header?? I'm many hours into this and stumped! Ideally, I would like to do the HTML code in the custom gallery style. All of this from PSD 7.0, Flash 8. <BODY bgcolor="#006600" leftmargin="20" marginwidth="20" topmargin="0" marginheight="10" text="white" link=#000000 vlink=#b8860b alink="#ffd700"> <div align="center"> <body bgcolor="#006600">  <a href="Index.htm"></a> <a href="Gallery.htm"></a> <a href="About.htm"></a> <a href="Biography.htm"></a> <a href="Contact.htm"></a>   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7 ,0,19,0" width="750" height="159"> <param name="movie" value="Gall_Head_FLA.swf" /> <param name="quality" value="medium" /> <embed src="Gall_Head_FLA.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </div> <div align="center"> <table border="0" cellpadding="0" cellspacing="10" width="100%"> <tr valign="bottom" align="center">  <td align="center"> <a href="pages/001.htm" target="Top Frame"><img src="thumbnails/001.jpg" border="1" alt="001"></a> <a href="pages/001.htm" target="Top Frame">001.jpg</a> </td>  <td align="center">

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

Fixing PS Web Photo Gallery pages?

have just started playing with Web Photo Gallery.
I built one with the Slideshow. I couldn't figure out where
the descriptions were supposed to come from, I thought I could
enter them in Bridge somewhere, but didn't figure that out.
So, I opened them up in Dreamweaver and added descriptions to
each of the files. Problem is that as the slideshow goes on, only
the first description shows up, the rest, the file number changes,
but not the description.
What did I do wrong? What should I do next time?
Thanks,
Kirk
PS, if you are curious, here is the slideshow that isn't
working:
http://www.dirt-dog.com/doghouse/

No idea how to fix this?
Each of the individual pages have the description, but the
master page doesn't show it.:
http://www.dirt-dog.com/doghouse/pages/KT-0739.htm
http://www.dirt-dog.com/doghouse/pages/KT-0740.htm
http://www.dirt-dog.com/doghouse/pages/KT-0741.htm
http://www.dirt-dog.com/doghouse/pages/KT-0742.htm
http://www.dirt-dog.com/doghouse/pages/KT-0743.htm
http://www.dirt-dog.com/doghouse/pages/KT-0744.htm
http://www.dirt-dog.com/doghouse/pages/KT-0745.htm
http://www.dirt-dog.com/doghouse/pages/KT-0746.htm
http://www.dirt-dog.com/doghouse/pages/KT-0747.htm
http://www.dirt-dog.com/doghouse/pages/KT-0748.htm
http://www.dirt-dog.com/doghouse/pages/KT-0749.htm
Kirk

How do I insert a photo gallery INTO a page?

I'm not trying to make a photo gallery page; I'm trying to create a page which contains a photo gallery at the top. I've read about putting the gallery into an iframe, which is then put into a div, but I can't get that to work. The gallery I've created loads up fine as a page unto itself, but I need it to function within a frame or table or box of some kind. Is there some way to make this happen in Dreamweaver CS5?

Hi Jeff,
in principle, these are "rollover" things (You can unse it for your help-function in DW or Google). Or for instance browse a little bit at Nancy O's tutorials:
http://alt-web.com/DEMOS/CSS-Disjointed-Image-Rollover.shtml (e.g. Pure CSS Disjointed Image Rollovers) and adapt it with your photos.
Hans-G.
P.S.
In "http://www.belowthemoon.com/apart/" I see a "swap"-technique, which you could use too. Look here:
http://www.adobe.com/support/dreamweaver/interactivity/behavior/behavior02.html
Quote: The Swap Image action swaps one image for another by changing the src attribute of the img tag. Use this action to create button rollovers and other image effects.

Photo Gallery thumbnails in business catalyst render in different sizes in different browsers

Photo Gallery thumbnails in business catalyst render in different sizes in safari and chrome but are fine in firefox. What is the issue with Safari? I have tried the different algorithm options such as fill_proportional etc and firefox is the only browser that displays correctly. I thought safari was the most standards compatible browser - what's the problem here?

Hi,
If you have seperate XML file but with the same basic structure then you can change the XML a Spry dataset refers to and regenerate the spry region without reloading the full page.
So on my photo gallery page I can change the album the photos are shown from via the seturl sprydata function as below. dsPhotos being my Spry dataset that points to the relevant XML dataset with my image references and captions etc. My XML is actually dynamically generated from Picasa RSS feeds (and RSS feeds are XML) but the principle will be the same with your static XML.
First I add an event listener for when someone clicks on an album (the li tag within my div with the id "albums" holds a photo and title for each album.)
function Albums()
var myalbums = Spry.$$("#albums li", "TabbedPanels1")
var rows = dsAlbums.getData();
var setListener = function( element, value )
Spry.Utils.addEventListener( element, "click", function(){ showAlbum( value ); },false );
for( var i = 0, length = myalbums.length; i < length; i++ )
setListener( myalbums[i], i );
Then this is the code which changes the photo album to be shown. (when the user clicks the relevant album)
function showAlbum(i)
pauseShow();
pImage = 'No';
var rows = dsAlbums.getData();
var albumid = rows[i]["albumid"];
var url = "xml/PicasaAphotoFeed.asp?albumid=" + albumid;
dsPhotos.setURL(url);
dsPhotos.loadData();
var rowcount = dsAlbums.getRowCount() - 1;
var nextalbum;
var navnext;
var n;
The page is here www.thehmc.co.uk/photo5.html is you want to see it in context.
In your case showAlbum would switch between Frank.xml or Wolfie.xml depending on how you decide to name your xml datasets.
Regards
Phil

Need help in adding Cooliris photo gallery to premade web template.

Hi,
I purchased a flash template that has nice effects. I would like to add Cooliris or a nice photo gallery page to the site. I contacted their help forum from where I bought the template and they say the effects are an embedded video that has to be custom editied, which I don't know how to do.
What do I need to do? Can I upload the template in this forum to show exactly what I mean? or, I can show you the sample template at:
http://www.templatetuning.com/flash-templates-preview/32485.html
Marty

Change this -
 Welcome to Automated Compliance Solutions
 <a href="contactacs.htm"><img src="button.png" width="266" height="56" border="0" align="right" /></a>
to this -
 Welcome to Automated Compliance Solutions
 <a href="yourlink.htm"><img src="yourbutton.png" width="266" height="56" border="0" align="right" /></a>
 <a href="contactacs.htm"><img src="button.png" width="266" height="56" border="0" align="right" /></a>
Be aware that my suggestion here is NOT valid XHTML, but since you are not a web developer, and the 'invalid' markup that I have suggested will not affect the rendering or operation of the page, I decided to keep it simple for you. In my suggestion, "yourlink.html" refers to the page to which you want this button to link, and "yourbutton.png" refers to the filename of the button image (obviously you'd want to change this to correspond to the filename and extension of the image you have created).

Photo gallery not displaying when published to .mac

Hey,
I'm having some trouble publishing my photo gallery. I do not want to publish it as a web gallery from iPhoto then link to it with iWeb. What I want to do is to send a gallery from iPhoto into iWeb, and have it published as part of the website. When I send a gallery over to iWeb, it loads up great, and I have all the functionality that one would expect when doing this so by all indications, it will load up great on my .mac account. When I publish the website, it does say that it is publishing the photo gallery page, but the issue is that none of my galleries ever show up! I do not know what to do, I have tried completely deleting the photo gallery page and remaking it in case I did something wrong in the design somewhere, but it still does not load up. If I link in a web gallery, it does show up, but, again, that is not what I want to do. I am at a loss for what may be causing the error. Any help at all would be greatly appreciated.
Thanks!
Heather

Publishing a iPhotoalbum to iWeb is the same as dragging the album from the media browser to iWeb.
When I send a gallery over to iWeb, it loads up great, and I have all the functionality that one would expect when doing this so by all indications, it will load up great on my .mac account.
When I publish the website, it does say that it is publishing the photo gallery page, but the issue is that none of my galleries ever show up!
What is it? Does it upload great to dotMac or doesn't it?
There's only one thing to do. Publish it. No need to upload. iWeb takes care of that.
It helps if you provide a URL to said page.

Creating a photo gallery like the China Gallery in Adobe Labs. How?

I have photos in several categories (I'll use 2, "frank" and "wolfie" as examples here). What I'd like to do is build a photo gallery like the China Photo Gallery shown in the Adobe Labs site, where the user can switch between categories without going to a different page. Here's what I've done so far and how I'm stuck:
I created a photo gallery with the instructions in the tutorial "Building a photo album with the Spry Framwork". I then inserted a Tabbed Panels widget for navigating between the categories.
I set up an XML file as follows:
/* frank category */
<photo
path = "001p.png"
width = "467"
height = "467"
thumbpath = "001p.png"
thumbwidth = "85"
thumbheight = "85">
</photo>
/* wolfie category */
<photo
path = "001f.png"
width = "467"
height = "467"
thumbpath = "001f.png"
thumbwidth = "85"
thumbheight = "85">
</photo>
To create the div holding the thumbnails for the "frank" category, I entered the following:
<div class="thumbdiv" spry:region="dsGallery"><img src="thumbnails/frank/{@thumbpath}" spry:repeat="dsGallery" spry:setrow="dsGallery" class="thumbs" /></div>
To create the div where the full size images will be displayed, I entered the following:
<div class="mainpic" spry:detailregion="dsGallery"><img src="images/frank/{@path}" onload="MM_effectAppearFade(this, 1500, 0, 100, false)" /></div>
Then, in the tabbed panel set for the "wolfie" category, I did the same thing, substituting "wolfie" for "frank". However, since there is only one xml file, spaceholders for all of the thumbnails appear in the thumbnail div for the frank category. I realize that I'll probably need to create a separate xml file for each category, but how do I set it up so the correct xml file is accessed when the link in the tab is clicked? Or am I approaching this all wrong?
From reviewing the source for the China gallery, it appears that they set up links to different xml files instead of Tabbed Panels. How does that work? There are also some javascript files I can't find anywhere on Adobe's site.
Thanks

Hi,
If you have seperate XML file but with the same basic structure then you can change the XML a Spry dataset refers to and regenerate the spry region without reloading the full page.
So on my photo gallery page I can change the album the photos are shown from via the seturl sprydata function as below. dsPhotos being my Spry dataset that points to the relevant XML dataset with my image references and captions etc. My XML is actually dynamically generated from Picasa RSS feeds (and RSS feeds are XML) but the principle will be the same with your static XML.
First I add an event listener for when someone clicks on an album (the li tag within my div with the id "albums" holds a photo and title for each album.)
function Albums()
var myalbums = Spry.$$("#albums li", "TabbedPanels1")
var rows = dsAlbums.getData();
var setListener = function( element, value )
Spry.Utils.addEventListener( element, "click", function(){ showAlbum( value ); },false );
for( var i = 0, length = myalbums.length; i < length; i++ )
setListener( myalbums[i], i );
Then this is the code which changes the photo album to be shown. (when the user clicks the relevant album)
function showAlbum(i)
pauseShow();
pImage = 'No';
var rows = dsAlbums.getData();
var albumid = rows[i]["albumid"];
var url = "xml/PicasaAphotoFeed.asp?albumid=" + albumid;
dsPhotos.setURL(url);
dsPhotos.loadData();
var rowcount = dsAlbums.getRowCount() - 1;
var nextalbum;
var navnext;
var n;
The page is here www.thehmc.co.uk/photo5.html is you want to see it in context.
In your case showAlbum would switch between Frank.xml or Wolfie.xml depending on how you decide to name your xml datasets.
Regards
Phil

Spry Photo Gallery Broken Image Link

I have attempted to merge the spry photo tutorial with our church's website. The images simply won't show up. It shows a broken image icon, but I can't understand why. I am wondering if the menu bar's javascript is interfering. Here's the code:
Photo Gallery Page:
http://gtcdunn.org/GTWebsite/HTML/Gallery1.html
XML
http://gtcdunn.org/GTWebsite/photos.xml
Spry Assets:
http://gtcdunn.org/GTWebsite/SpryAssets/xpath.js
http://gtcdunn.org/GTWebsite/SpryAssets/SpryData.js
Thanks so much for your help!
~Chris

I see you are still using Spry 1.5. Have you considered upgrading to
Spry 1.6.1?
Also your XML is broken, if you open up your xml in a normal standards
complaint browser such as firefox, you will see that it doesn't render
a normal tree view as it would do with other xml files. So i suggest
checking those errors out.
Its mainly because you forgot to close your starting tag of the
gallerys node. (<gallery
base = ""
background = "#FFFFFF"
banner = "#F0F0F0"
text = "#000000"
link = "#0000FF"
alink = "#FF0000"
vlink = "#800080"
before your xml starts.

How to do a video gallery page

Hi everyone
when you create a new page iWeb lets you choose from some preset pages like the homepage, the blog, the video and the photo gallery.
But the video page lets you put one or more videos in just one page.
If you have many videos and you want to divide them in different categories like the photo gallery page do for photos, how can you do it?
If you select the photo gallery and if you put videos instead of photos from your iTunes inside of it, it seems to do the job, but I can't use this trick cause I have not enough hosting space to store the videos, and infact I uploaded them in youtube and with the youtube widget the photo gallery doesn't work and shows nothing...
Did someone know how to create a video gallery page (or something like that) with videos from youtube?
Thanks
Message was edited by: PaoloPhino

This is one way you could do it: PhotoPresenter Animated Slideshow Themes. The thumbnails can be as small as you'd like. This way none of the video files have to load before they play button is selected. Otherwise the page would take forever to load.
How the button is created is described in this demo page: Opening Item in a New, Precisely Sized Window
OR you could use a video jutebox like the one on this page: http://www.holyredeemernorthbend.org/HRWeb/Our_Videos.html.
His tutorial on how to implement it is here: http://www.holyredeemernorthbend.org/HRWeb/jukebox.html.
OT

Can't create web photo gallery with modified RAW files

I can use CS-2 to create a web photo gallery using unmodified RAW files, this seems to work fine.
However, after I tweak the exposure of a RAW file and a .xmp file has been created, if I try to create a web photo gallery, the program goes through the motions but no thumbnails or (bigger) jpg files are created. The resulting web photo gallery pages are just filled with broken link icons.
What's up?
Windows 2000
Photoshop CS-2
Cannon RAW files (.CR2 extensions)
Thanks,
Mark

I believe it may be to do with the sidecar files. My girlfriend has similar issues on Windows XP.
I have tried to recreate the problem here (on Mac OSX) but it all works fine for me, so i can't fully test it, but here is what i believe may be happening....
The sidecar file has the same name as the actual raw file (except the extension of course), so when the web gallery script is processing it, it does the raw file, then overwrites by trying to process the xmp file as an image, but of course it can't and then you end up with no image file in your thumbnail, or image directories in the web gallery for that image.
Two options you can try...
1) go into bridge and select the images to process in there (xmp files shouldn't show up there) and then use the Tools/Photoshop menu to access the WGB and choose 'Selected Bridge Images' as the source. (this has been tested successfully on win xp)
2) in the camera raw plugin, go into preferences and change the 'sidecar xmp' option to 'camera raw database'. You will then probably need to delete any sidecar files for the folder you wish to process and reapply your raw adjustments. If the problem is what i suspect (as above) this should also work, though i haven't been able to test.
Obviously you don't need to worry about the 'down rezzing' mentioned above as the web gallery builder should already be doing this for you...unless you changed it.

Photo Gallery Page

Similar Messages

Maybe you are looking for