HTML photo gallery best practices

Dear Common Wisdom:
I have seen a number of variations with regards to types of HTML photo/image galleries within folio files out there.
Is a best practice materializing in anyone's opinion?
Thanks for your thoughts!
CJ

Thanks, Yellow,
I want to make a photo gallery, but have not yet.
So far, I am simply creating a single HTML page for individual images or photos in my articles. That is, in-app browser opens to the image with a caption. That's it.
So, I am hoping to get ideas for the future from reposnses here.
Do you have any examples of what you've done I could see?
I am not a professional code writer, but do understand xml and html.
Again, thanks for responding!
CJ

Similar Messages

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

HTML Photo Gallery / PSE4

I can create a new HTML Photo Gallery, but can not see how to modify an existing one. Slide shows appear in "Open Creation", but no HTML Photo Gallery.
I want to be able to easily modify an existing html photo gallery, so that any time I need to add an image, I don't have to create a whole new gallery and upload it to the server. Can someone guide me through this process? I've looked in "help", and there's nothing re "modify html photo gallery".
Background: I bought PSE2 a few years ago, and it fairly well met my needs. Recently I decided to buy a new digital camera. After confirming that the new PSE4 worked with Adobe Camera Raw, and that my camera model was supported, and checking the fetures of PSE4, I went ahead with both purchases. Now I wish to begin using an on-line server to display photos in an "html photo gallery". I've been advised by the sysop to use JAlbum, as it has the ability to easily modify an existing albm, but I prefer not to install yet another software package if PSE4 can do what I need.
Thank you. - David Thornburg

David
I use a program called PhotoThumbs to generate the Challenge. It is very
configurable and lighting quick generating web sites in seconds not minutes.
I then upload using a program called WinSCP3 that is cleaver enough only to
upload those pages that are new. I do want something and easy because I am
generating the site over 50 times a week and these programs working in
conjunction do yeomen's duty. The only down fall is that PhotoThumbs is
commercial although inexpensive.
I have tried Jalbum and found it easy to do the pre packaged programs but a
little complex to do more complex things. It is free and being a Java
program is available for many platforms. The time to generate a site was
much slower than PhotoThumbs but things might change.
Grant
Home Pages http://home.cogeco.ca/~grant.dixon
Challenge Pages: http://www.cavesofice.org/~grant/Challenge
Photo of the Day http://www.cavesofice.org/~grant/POD
Creativity is so delicate a flower that praise tends to make it bloom, while
discouragement often nips it in the bud. Any of us will put out more and
better ideas if our efforts are appreciated.
Alexander Osborn (1888 - 1966)

How create html photo gallery in PSE 12?

In earlier version of PSE I was able to create an html photo gallery. How do I make one in version 12?

Indeed, google ftw.
For example:
+as3 photo gallery flash tutorial
reveals many including this one:
http://www.flashmagazine.com/Tutorials/detail/as3_photo_gallery/

HTML and CSS Best Practices for Eloqua?

Hello Topliners Community,
My name is Ben and I am a Web Designer. I am currently looking for any guidance on HTML and CSS best practices when working with Eloqua. I am interested in the best practices for e-mail and landing pages.
Thank you,
Ben

Personally I like to upload my custom created html/css into Eloqua instead of using the WYSIWYG.
But if you must then right clicking on text boxes and click edit source is the way to go.
There was a good discussion on editing your forms with CSS:
Energize Your Eloqua10 Forms with CSS
created by Ryan Wheler on Nov 2, 2012 8:44 AM, last modified by Greg Stotler on Sep 19, 2013 2:00 PM
Version 2
CSS can be used to heavily customize the layout of forms in Eloqua10. In this article we will provide sample cover some common formatting use cases on Eloqua10 Landing Pages. Further details about uses of CSS in Eloqua10 form templates can be found here: EE12 - Do It - Eloqua - Energize E10 Forms
Eloqua10 Forms HTML Structure
Below is an outline of the structure of the HTML generated by Eloqua when a form is added to a landing page. By targeting the HTML classes highlighted below, we can control the layout of any form on your landing page.
For the rest of page: http://topliners.eloqua.com/docs/DOC-3015

HTML in Java best practices?

I have developed an application that performs some data analysis. When the data is analyzed I create a result file in XML using JDOM. This information is then transformed into HTML using XSLT (xalan). The resulting HTML is launched in the standard browser (Netscape in this case) so that the user can view the results in a nicely formatted view.
I have a problem with the current solution because of the amount of data involved. The resulting XML file is huge so the DOM tree built up consumes a lot of memory. The transformation can take more than 10 minutes in some cases (disc swapping occurs).
The reason I guess for the current solution was to keep the HTML stuff separated in the XSL style sheets and the data describing the result in the XML files. I did not come up with this solution myself.
What are your suggestions for an alternative solution? I still want to produce the result files in HTML but I could as well write it directly to a file by browsing my in memory objects. How do I then represent the HTML in my code? I do want to keep things as separated (OO) as possible.
I figure you could do something like:
Writer out = ...
out.write("<html>");
out.write("<body>");
out.write("<title>" + title + "</title>");etc.
but it smells code duplication and maintenance problems to me.
I would somehow like to iterate my objects and write the output in a more SAX inspired fashion but encapsulate the HTML parts. Is there an existing framework for this somewhere? I know there is a package javax.swing.text.html with a lot of HTML helper classes, can they be utilized somehow? Could JSP be used for this kind of situation (there is no http or client/server stuff involved in this)?

well, an interesting problem. I have heard this a lot in the XML world.
I was thinking that JSP would be your best bet, but then you mentioned
that there is no web server so that puts the nixay on that.
Personaly I am not aware of a way to do it, maybe there are better
XSLT's to use.
Hmm, considering that all you are doing is viewing the file, it may be
best to install a small web server on the PC and use JSP. We do this
at some clients for reporting, makes it a hell of a lot easier. This
way you could dispense with the XML and XSLT and just generate HTML,
when viewed from a web browser.
James.

How to have more than one Bridge Web Photo Gallery in a site

I'm having a problem inserting more than one bridge web photo gallery in my site. I have thumbnails of different jobs and when clicked I want a new page to load with all the images of that job. I have one thumbnail linked to one of the galleries and I made another gallery and can't find the code to change to link it to the new html gallery. When the page loads it shows the first gallery I made instead of the new gallery.
Example:
I made a gallery of a deck job and on my photo page there is a thumbnail. When clicked it brings up the deck.html photo gallery made in bridge cs4. Good!
Now, I made a gallery of an outdoor fireplace and on my photo page there is a thumbnail. When clicked it should load the photo gallery of the outdoor fireplace. It loads the gallery of the deck instead.
I understand that the code needs to be changed to link to the new files. I changed the "resource" folder for the outdoor fireplace to "resource2" and changed the code script src="resources" to script src="resources2" and it did not work
I suspect that I need to change the code that points to group.xml and rename the new photo gallery group.xml to group2.xml so it will find the one in my resources2 folder, but I can't find the code anywhere.
Any help would be great. Also, if there is a better way of doing this let me know?
Thanks

Maybe I can explain this better....
the group.xml file has the information for what images to load. When previewing the outdoor fireplace web gallery "of.html" it loads the "deck.html" web gallery. I believe this is because in one of the files it is requesting the info from the group.xml file from the resourses folder. I need to find where the code is that directs it to the group.xml and change it to group2.xml and rename that group.xml file for "of.html" to group2.xml in the resourses2 folder.

Web Photo Gallery Missing - Elements 6 (mac) - Elements 8 (pc)

I've been asked to update a photo gallery in a website that was created with the Mac version 6 of Elements. So I'm ready to purchase Elements version 8 for the PC and I download the trail version. The problem is the HTML version has been replaced the FLASH, which might work okay. But they really want the gallery format they have now, but I cannot find a similar template with the 'Shared' Online Album procedure. It's a rather plain template, but they like it for their site. It has a scrolling list of thumbnails on the left and the selected photo shows to the right. There's an "Image Info" button on the bottom that pops-up a dialog of File/Title/Description/Credits/Copyright.
If I purchase Elements 8, can I download older versions someplace? If I have to hunt for Version 6 on eBay or elsewhere, do the PC and Mac versions 6 have the same HTML Photo Gallery templates/options?

hey,
the workflow is different in pse8 as compared to pse6. in pse8 if you want to create the web gallery you have option either in the File > Create Web gallery.
i am not too sure whether you can download older version of pse from any where.
thanks

What is the best way to create a photo gallery?

Hi,
I want to create a photo gallery in Dreamweaver without using any pre-built "web gallery" function. What's the best way to swap the images when I click the "next" button? Do I create a new Dreamweaver page for each photograph? Is there a more efficient way to do it than that?
Thanks,
Gordon

Is there a more efficient way to do it than that?
Most definitely. With scripts.
57+ Free Galleries, Slideshows & Lightbox solutions:
http://www.1stwebdesigner.com/css/57-free-image-gallery-slideshow-and-lightbox-solutions/
20 Best jQuery Slideshow Scripts
http://graphicalerts.com/20-best-jquery-slideshow-image-photo-gallery-plugins/
If you're a photographer or managing a large collection of images, look at JAlbum.
Download the software. Drag & Drop your images/folder of images into the work space. Hit create album. In a few seconds, jAlbum generates your HTML pages and thumbnail images for you. A real time saver with plenty of customizable skins to choose from.
Download: http://jalbum.net/software;jsessionid=qkhdjzieqjtg1rz4x2anjlk5d
Skins: http://jalbum.net/skins
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

STATIC "HTML Data Set Photo Gallery" with CAPTIONS

Because of search engines and validation I would really like to use the STATIC "HTML Data Set Photo Gallery" http://labs.adobe.com/technologies/spry/demos/gallery_pe/static/china.html.
But I definitely need captions for the Photos. I found possibilities to add them via XML, but not for the HTML-Version.
As far as I got I think I have to edit this function from "gallery_hds.js" and add some RegEx, to extract caption text.
function PhotosFilter(ds, row, rowIndex)
 var tnStr = row.thumbimg;
 if (tnStr)
 row.path = tnStr.replace(/.*<a[^>]*href="?([^"]*)"?.*/i, "$1");
 row.thumbpath = tnStr.replace(/.*<img[^>]*src="?([^"]*)"?.*/i, "$1");
 return row;
In the following rows within the html-document
<a href="../../gallery/galleries/paris/images/paris_02.jpg"><img src="../../gallery/galleries/paris/thumbnails/paris_02.jpg" alt="paris_02.jpg" /></a>
I would insert text before the closing span-tag (or before the closing a-tag?) - like so
<a href="../../gallery/galleries/paris/images/paris_02.jpg"><img src="../../gallery/galleries/paris/thumbnails/paris_02.jpg" alt="paris_02.jpg" /></a>Here is some HTML Text
This text must be extracted via RegEx - similar to the rows within the if-Statement of the upper mentioned function "PhotosFilter". But here my RegEx-knowledge is definitely to short!
Thank you very much in advance for any help or suggestion.
Angela Fengler

Because of search engines and validation I would really like to use the STATIC "HTML Data Set Photo Gallery" http://labs.adobe.com/technologies/spry/demos/gallery_pe/static/china.html.
But I definitely need captions for the Photos. I found possibilities to add them via XML, but not for the HTML-Version.
As far as I got I think I have to edit this function from "gallery_hds.js" and add some RegEx, to extract caption text.
function PhotosFilter(ds, row, rowIndex)
 var tnStr = row.thumbimg;
 if (tnStr)
 row.path = tnStr.replace(/.*<a[^>]*href="?([^"]*)"?.*/i, "$1");
 row.thumbpath = tnStr.replace(/.*<img[^>]*src="?([^"]*)"?.*/i, "$1");
 return row;
In the following rows within the html-document
<a href="../../gallery/galleries/paris/images/paris_02.jpg"><img src="../../gallery/galleries/paris/thumbnails/paris_02.jpg" alt="paris_02.jpg" /></a>
I would insert text before the closing span-tag (or before the closing a-tag?) - like so
<a href="../../gallery/galleries/paris/images/paris_02.jpg"><img src="../../gallery/galleries/paris/thumbnails/paris_02.jpg" alt="paris_02.jpg" /></a>Here is some HTML Text
This text must be extracted via RegEx - similar to the rows within the if-Statement of the upper mentioned function "PhotosFilter". But here my RegEx-knowledge is definitely to short!
Thank you very much in advance for any help or suggestion.
Angela Fengler

Best practice for photo format: RAW+PSD+JPEG?

What is the best practice in maintaining format of files while editing?
I shoot in RAW and import into PS CS5. After editing, it allows me to save as various formats, including PSD and JPEG. PS says that if you want to re-edit the file, you should save as PSD as all the layers are maintained as-is. Hence I'd prefer to save as .PSD. However, in most cases, the end objective is to share the image with others and JPEG is the most suitable format. Does this mean, that for each image, its important to save it in 3 formats viz RAW, PSD and JPEG? Wont this increase the total space occupied tremendously? Is this how most professionals do it? Pls advice.

Thanks everyone for this continued discussion in my absence over two weeks. Going through it i realize its helpful stuff. During this period, i downloaded Aperture trial and have learnt it (there's actually not much learning, its so incredibly intuitive and simple, but incredibly powerful. Since I used iphoto in the past, it just makes it easier.
I have also started editing my pics to put them up on my photo site. And over past 10 days, here is the workflow I have developed.
-Download RAW files onto my laptop using Canon s/w into a folder where i categorize and maintain all my images
-Import them into Aperture, but letting the photos reside in the folder structure i defined (rather than have Aperture use its own structure)
-Complete editing of all required images in Aperture (and this takes care of 80-90% of my pics)
     -From within Aperture open in PS CS5 those images that require editing that cannot be done in Aperture
     -Edit in CS5 and do 'Save', this brings them back to Aperture
     -Now I have two versions of these images in Aperture - the original RAW and the new .PSD
-Select the images that I need to put up on my site and export them to a new folder from where i upload them
I would be keen to know if someone else follows a more efficient or robust workflow than this, would be happy to incorporate it.
There are still a couple questions I have:
1 - Related to PS CS5: Why do files opened in CS5 jump up in terms of their file size. Any RAW or JPEG file originally btn 2-10 MB shows up as minimum 27 MB in CS. The moment you do some edits and/or add layers, it reaches 50-150MB. This is ridiculous. I am sure I am doing something wrong. Or is this how CS5 works with everyone.
2 - After editing a file in CS by launching it from Aperture, I now end up with two versions in Aperture, the original file and the new .PSD file (which is usually 100MB+). I tried exporting the .PSD file to a folder to upload it on my site, and wasnt sure what format and size it would end up with. I got it as a JPEG file within reasonable filesize limits. Is this how Aperture works? Does Aperture allow you options of which format you want to save the file in?

Best Practice For Referencing JPEG Path Using Servlets To Prepare HTML IMG

I am migrating a legacy app from Tomcat 5 to Weblogic 11g (10.3). In the legacy app, servlets write HTML that uses relative paths for <IMG src="../images/img.jpeg"> and <script src="../javascript/js.js">. The app is deployed as an exploded archive. Unfortunately, none of the images or script are being loaded. I've tried using http://serverIP:portNum/contextName/images/img.jpeg"> but it doesn't work. I've also checked to get the name of the context in the servlet and it's the root context. Could it have something to do with me having to append .war onto the application when I deploy it? Would it help if I deployed it as a war inside an ear? Basically, I want some best practices for doing this on Weblogic 11g. There are a lot of images and javascript and I'm really hoping they don't have to be inserted using ClassLoader.getResourceAsStream()... thank you.

Best Practice:
1. Move Static files like images, css, java scripts to a web server infrastructure if available.
2. If this is not your case, then please send your directory information how you have packaged your EAR. I can advice :)

Best practice to embed flex application in html

Hello guys
I am not sure what's the best practice to embed the flex application. We couldn't use html code in flex builder. Would you guys edit the html files via other tools to embed the swf file after the application is completed or there are other ways to do it. Thanks for the reply.

Hi Jerry,
Why you couldn't use the html code generated in flex builder. In the html wrapper file generated in FlexBuilder you have SWF embed code directly along with the Flash Player detection javascript code...If your users don't have the FlashPlayer installed or if they don't have the latest Flash Player version installed then the application will prompt the users to install the latest Flash player plugin..
What's the problem that you have got by using the html wrapper file generated in FlexBuilder..
Thanks,
Bhasker Chari

What is the best practice to get thumbnail of photo which I get from cameraUI

Hi,
I building a photo sharing application in android and I want to upload a smaller size of photo just after I receive the photo from the cameraUI.
What is the best practice to resize the photo and to upload it, At the moment I doesn't resize it And the file size is big (1MB) for HTC DESIRE HD ?
Is it possible to resize the image and keep the EXIF data ?
Thanks,
Nimrod.

Yep,
Media Manager is the way to go.
Read the manual aout it.
It is all explained in there.
Rienk

HTML/CSS photo gallery updatable in Contribute?

I'm putting together a website for a client who wants a photo
gallery which they can update on a fairly regular basis.
They'll be using Contribute to maintain other parts of the
site, and I'd like to be able to give them the same access to the
gallery, but the majority of more interesting ones (PVII, for
example) seem to be a mite complicated for a Contribute update.
Can anyone recommend an interesting, sophisticated-looking
gallery which can fit these criteria?
Many thanks

TrentSC wrote:
> I'm putting together a website for a client who wants a
photo gallery which
> they can update on a fairly regular basis.
>
> They'll be using Contribute to maintain other parts of
the site, and I'd like
> to be able to give them the same access to the gallery,
but the majority of
> more interesting ones (PVII, for example) seem to be a
mite complicated for a
> Contribute update.
>
> Can anyone recommend an interesting,
sophisticated-looking gallery which can
> fit these criteria?
Hi,
You might take a look at Nadia's templates - she has a couple
of
Photographer specific offerings.......
http://www.csstemplates.com.au/photography_csstemplates/index.shtm
chin chin
Sinclair

HTML photo gallery best practices

Similar Messages

Maybe you are looking for