Can a photo gallery like this be created in html/CSS?
http://jeffsullivan.smugmug.com/Landscapes/National-Parks/Zion-National-Park-Utah/1946310_ 6PtgP#136213013_XVhBQ
I like the way these galleries expand to browser width - both the thumbs and big image enlarge. I want to learn to make a photo gallery (+ slideshow) perform like this or hire someone with the specific skill set needed to make it for me. I've looked around quite a bit online at photo gallery apps, both free and for sale, including some offered by forum regulars (thanks!), but haven't found one I really liked.
My intent is not to copy this gallery (that would be stealing), just to adopt the expanding images- to browser width feature.
I know Flash could do it but I don't see .swf anywhere in the source... would it be done with Javascript or a combination of apps?
What I didn't mention before is that the photo gallery I want will be only one part of a community-based commercial site under development that needs to integrate with other parts.
That's why I'm asking what sort of developer/skills I'd need to make this happen.
I see. OK, for starters you'll need a firm grasp of XHTML, CSS, JavaScripting, and server-side programming such as PHP and MySql databases.
You also might like to look at an open source Groupware solution such as TikiWiki that has a lot of stuff already built into it.
http://info.tikiwiki.org/tiki-index.php
Good luck,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com
Similar Messages
-
How would I create a photo gallery like this in Muse?
Just trying to get the same kind of abilities working in muse. Link for site/gallery below
greg noire - photographerYou can try using lightbox widget. Try playing with opacity in normal and rollover states of thumbnails.
Else, you can add another image on rollover state of thumbnail which may be a little darker than the original one. -
How to make a photo gallery like this?
This couple has an impressive portfolio of mtn climbing
accomplishments that will make you want to get out of your chair:
http://www.pfint.com/pics/peaks/RussellWhitneyMuir/RussellWhitneyMuir.htm
I like the way the pics open in new window exactly the size
of the picture with even black border on all sides, and close upon
clicking. Is this an active html page or is each picture page
created separately? (I could do that - don't want to though...)
Would this effect be easy for a intermediate level person to
create? Would like to find a tutorial. Or just the right
script/code to paste in. =0)That was done with a Dreamweaver extension by Michael Brandt
called
JustSoPic window. I've used it for years. :)
http://valleywebdesigns.com/vwd_jspw3.asp
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: Dreamweaver CS3: The Missing Manual,
DMX 2004: The Complete Reference, DMX 2004: A Beginner's
Guide
Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"onefiftymph" <[email protected]> wrote in
message
news:gfcndi$k30$[email protected]..
> This couple has an impressive portfolio of mtn climbing
accomplishments
> that
> will make you want to get out of your chair:
>
http://www.pfint.com/pics/peaks/RussellWhitneyMuir/RussellWhitneyMuir.htm
>
> I like the way the pics open in new window exactly the
size of the picture
> with even black border on all sides, and close upon
clicking. Is this an
> active
> html page or is each picture page created separately? (I
could do that -
> don't
> want to though...) Would this effect be easy for a
intermediate level
> person to
> create? Would like to find a tutorial. Or just the right
script/code to
> paste
> in. =0)
>
>
>
> -
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.
ThanksHi,
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 -
Can anyone tell me where I might find a basic flash photo
gallery like the one at the
USAToday
Photo Gallery
I have looked at the code and can't tell if this is a
off-shelf system they're using.
I've also googled the common Flash photo galleries, and can't
seem to find one that will easily allow me to import, browse by
simple button, and use captions and links. Would really be nice if
all of this pulled from a database?
Many thanks,
Steve
Tallahassee, FLHi Thomas,
You should be able to use the 'compositions -> lightbox display' widget under the 'widget library' to be able to achieve the same effect.
- Abhishek Maurya -
How can i generate xml like this?
Hi all,
How can i generate xml like this & i need to send it to via HTTP :
<mms>
<subject>message subject</subject>
<url_image>http://image_url</url_image>
<url_sound>http://sound_url</url_sound>
<url_video>http://video_url</url_video>
<text>message text</text>
<msisdn_sender>6281XYYYYYY</msisdn_sender>
<msisdn_receipient>6281XYYYYYY</msisdn_receipient>
<sid>to be define later</sid>
<trx_id>Unique number</trx_id>
<trx_date>yyyyMMddHHmmss</trx_date>
<contentid>see note</contentid>
</mms>& how can i get the value of the sid (for example)?
I hav tried to generate that xml by using StringBuffer & append, but it's not what i mean...
Anyone can help me?Ok...i got it. But i still hav some problems.
This is the sample code that i used :
public class XMLCreator {
//No generics
List myData;
Document dom;
Element rootEle, mmsEle, mmsE;
StringWriter stringOut;
mms mms;
public XMLCreator(String subject, String image, String sound,
String video, String text, String sender, String recipient,
int id, String date, String contentid) {
mms = new mms(subject, image, sound, video, text, sender,
recipient, id, contentid, date);
createDocument();
public void run(){
createDOMTree();
print();
private void createDocument() {
//get an instance of factory
DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
try {
//get an instance of builder
DocumentBuilder db = dbf.newDocumentBuilder();
//create an instance of DOM
dom = db.newDocument();
}catch(ParserConfigurationException pce) {
//dump it
System.out.println("Error while trying to instantiate DocumentBuilder " + pce);
private void createDOMTree(){
//create the root element <Mms>
rootEle = dom.createElement("mms");
dom.appendChild(rootEle);
createMmsElement(mms);
private Element createMmsElement(mms b){
Element subjectEle = dom.createElement("subject");
Text subjectText = dom.createTextNode(b.getSubject());
subjectEle.appendChild(subjectText);
rootEle.appendChild(subjectEle);
//create url_image element and author text node and attach it to mmsElement
Element imageEle = dom.createElement("url_image");
Text imageText = dom.createTextNode(b.getUrl_image());
imageEle.appendChild(imageText);
rootEle.appendChild(imageEle);
// & etc....
return rootEle;
* This method uses Xerces specific classes
* prints the XML document to file.
private void print(){
try
//print
OutputFormat format = new OutputFormat(dom);
format.setIndenting(true);
stringOut = new StringWriter();
//to generate output to console use this serializer
XMLSerializer serializer = new XMLSerializer(stringOut, format);
//to generate a file output use fileoutputstream instead of system.out
//XMLSerializer serializer = new XMLSerializer(
//new FileOutputStream(new File("mms.xml")), format);
serializer.serialize(dom);
} catch(IOException ie) {
ie.printStackTrace();
public String getStringOut() {
return stringOut.toString();
}when i tried to show the stringOut.toString() in my jsp, it's only showed string like this :
The Lords Of The Ring http://localhost:8084/movie/lotr.3gp 6281321488448 6281321488448 123 0 20070220114851 LOTR.
1. Why this is happen?i want to generate xml which its format is like above.
2. How can i send this xml (put in msg parameter) using jsp (via web) without creating the mms.xml?
3. if i want to set the msg parameter equal to mms.xml - means that msg = mms.xml, what is the data type for msg? is it an object or anything else?
Thx b4 in advance... -
Easier way to create a photo gallery than this?
Basically, the way in which I'm creating galleries on my sites are a lengthy process.
In DW, I go to Commands > Create photo web album (after creating the three folders to place them in - images, pages, and thumbnails).
Then Fireworks arranges it for me and I make adjustments as necessary in the HTML document.
Once it's done, I go to my hosting service (110mb.com) and I must upload everything - the thumbnails, pages, images - everything. This would be fine if there's only a few photos in the gallery; however, it's quite a problem when the website contains six galleries, each with around 30 photos.
Can anyone give me any advice on how to make this less time consuming?
p.s. I do not want to use a free photo storage - the gallery must not link to an external website.
Thanks in advance.is there a way to remove the background when embedding the website? This seems like a really simple solution to my problem, but unless I can remove the background colour, JAlbum links and all other unnecessary elements of the embedded webpage, it looks really inconsistent.
To change the background or other elements in your JAlbum gallery, either select a different skin (style) or customize your skin Template (.htt) files.
http://jalbum.net/developer
JAlbum has a discussion forum where you can get help. Use the appropriate group for your skin - http://jalbum.net/forum/index.jspa
Finally, you might find it easiest to bring your Gallery index page into your existing site using an inline frame or <iframe>. You can see an example of this on my web site. View Page Source in browser to see how it's done. http://alt-web.com/gallery.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
Can a Photo Gallery be created using the Meta Data with a Widget or Lightroom ?
I want to create a website with a bunch of photo galleries, but I have to have the Titles and Descriptioins from the Meta data used.
Can Muse import Lightroom Photo Gallery's web pages?
Or, Is there a widget to do this?So your saying import a Gallery from Lightroom using Muse's slideshow widget, which ignores titles/descriptions?
I'm finding it very difficult to understand why Muse would not use this information as it clearly shows the File Names in Asssets.
The workflow seems simple: Take A picture, Bring it into Lightroom, Adjust and enter WHAT it is with Titles and Descriptions, use it ALL in a website.
I've got some 500 photos.
Re-entering Titles/Description information everytime it's used in a website is not something anybody should have to do.
Please help, there has to be a better way to do this.
I'm eager to buy Adobe's product to do this if it can be done.
Adobe is too smart to leave out something so simple with MUSE. -
How to do a gallery like this?
I'm interested with the gallery on this site (under where it says 'A comprehensive range of Wybone products'.)
Can anybody suggest how this is done?That "Gallery" is nothing more than images linked to their product detail pages.
If you're asking how to create a layout of images & captions, see this page:
http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
I want to create a photo gallery with Muse with the same features as Béhance. The page shall show the thumbnails only. When selected an overlay pops up showing the large photo on a grey and transparent background. Anyone knows how to do this in Muse?
Hi Thomas,
You should be able to use the 'compositions -> lightbox display' widget under the 'widget library' to be able to achieve the same effect.
- Abhishek Maurya -
How can I do sth like this ${requestScope.list.size} ?
Hi, I have 2 attributes which I pass like this
requsest.setAttribute("startPoint", 3);
request.setAttribute("myList", myList);
where myList is a ArrayList filld with objects. On jsp page I want to count 2 values first and last number:
<c:set var="firstNumber" value="${requestScope.startPoint+1}"/> - this works fine.
<c:set var="lastNumber" value="${requestScope.startPoint+requestScope.myList.size}"/> - this is impropper.
How can I use as integer size of list which is passed as request attribute. Is this possible?
I would appreciate any hepl.Hang on. For such things you can build your own EL functions - it is very easy and involves only 4 steps.
1. Write a class containing a method (must be static) to calculate size of any list.
[Put the class in /WEB-INF/classes, so your file will reside as /WEB-INF/classes/myfunctions/MyFunctions.class]
package myfunctions;
import java.util.List;
public class MyFunctions{
public static int getListSize(List list){
return list==null?0:list.size();
}2. In your taglib add an entry (in case you don't have already create one) for the EL function:
[Say our taglib is mytags.tld in /WEB-INF]
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
version="2.0">
<tlib-version>1.0</tlib-version>
<short-name>MyTagLib</short-name>
<function>
<description>List Size</description>
<name>size</name>
<function-class>myfunctions.MyFunctions</function-class>
<function-signature>int getListSize(java.util.List)</function-signature>
</function>
</taglib>3. Now in your JSP add following line to use your new EL function:
<%@taglib uri="/WEB-INF/mytags.tld" prefix="mt"%>4. And use as:
<input type=text value="${mt:size(requestScope.myList)}" />Note that there no issues using JSTL EL functions. My intention is to resolve your problem and at the same time to give you a glance how to write and use your own EL functions (might be useful in future).
Thanks,
Mrityunjoy -
Can iMovie make slideshows like this?
I assure you, I am not a shill for this company. I'm just impressed with the slideshows they can put together and want the tools to make one myself.
Can iPhoto 08 provide the tools to make something like this finished product:
http://urltea.com/1zrt
(multiple photos in a single frame)mil8 wrote:
... Can iPhoto 08 provide the tools to make something like this finished product: .. .
no.
and iM either..
these are those typical 'options packed' PC-made shows, my ex-father-in-law likes to impresss me with.. you stare at the effects, but don't 'see' the content anymore..
anyhow:
prepare your pics before use in iPhoto/iMovie, to show more than one.. (not exactly , what you want, but look at my example here)
or, purchase a bunch of plug-ins from geethree.com (plug-ins are only avail for iMHD6!), to teach iM zillions of new transitions..
or, have a look at 3rd party 'slideshow makers' as PhotoMagico or Photo2Movie ..
... but two tumblin' on all axis cubes, showing 12 pics, simultanously seen on a screen.. ? a rare attemp for Mac apps.. -
How can i produce xml like this ?
<mms>
<subject>message subject</subject>
<url_image>http://image_url</url_image>
<url_sound>http://sound_url</url_sound>
<url_video>http://video_url</url_video>
<text>message text</text>
<msisdn_sender>6281XYYYYYY</msisdn_sender>
<msisdn_receipient>6281XYYYYYY</msisdn_receipient>
<sid>to be define later</sid>
<trx_id>Unique number</trx_id>
<trx_date>yyyyMMddHHmmss</trx_date>
<contentid>see note</contentid>
</mms>
How can i produce that xml?
Can i produce it with this?
public Element getXML(Document document) {
// create sentContent Element
Element sentContent = document.createElement( "mms" );
// create subject Element
Element temp = document.createElement( "subject" );
temp.appendChild( document.createTextNode(
String.valueOf( getJudulFilm() ) ) );
sentContent.appendChild( temp );
// create url_image Element
temp = document.createElement( "url_image" );
temp.appendChild( document.createTextNode("") );
sentContent.appendChild( temp );
// create url_sound Element
temp = document.createElement( "url_sound" );
temp.appendChild( document.createTextNode("") );
sentContent.appendChild( temp );
// create url_video Element
temp = document.createElement( "url_video" );
temp.appendChild( document.createTextNode(
String.valueOf( getUrl_video() ) ) );
sentContent.appendChild( temp );
// create text Element
temp = document.createElement( "text" );
temp.appendChild( document.createTextNode("") );
sentContent.appendChild( temp );
// create msisdn_sender Element
temp = document.createElement( "msisdn_sender" );
temp.appendChild( document.createTextNode(
String.valueOf( getMsisdn() ) ) );
sentContent.appendChild( temp );
// create msisdn_recipient Element
temp = document.createElement( "msisdn_recipient" );
temp.appendChild( document.createTextNode(
String.valueOf( getMsisdn() ) ) );
sentContent.appendChild( temp );
// create sid Element
temp = document.createElement( "sid" );
temp.appendChild( document.createTextNode(
String.valueOf( getSid() ) ) );
sentContent.appendChild( temp );
// create trx_id Element
temp = document.createElement( "trx_id" );
temp.appendChild( document.createTextNode(
String.valueOf( getTrx_id() ) ) );
sentContent.appendChild( temp );
// create trx_date Element
temp = document.createElement( "trx_date" );
temp.appendChild( document.createTextNode(
String.valueOf( getTrx_date() ) ) );
sentContent.appendChild( temp );
// create contentid Element
temp = document.createElement( "contentid" );
temp.appendChild( document.createTextNode(
String.valueOf( getContentid() ) ) );
sentContent.appendChild( temp );
return sentContent;
}& how can i send it to the server using HTTP request post method?<mms>
<subject>message subject</subject>
<url_image>http://image_url</url_image>
<url_sound>http://sound_url</url_sound>
<url_video>http://video_url</url_video>
<text>message text</text>
<msisdn_sender>6281XYYYYYY</msisdn_sender>
<msisdn_receipient>6281XYYYYYY</msisdn_receipient>
<sid>to be define later</sid>
<trx_id>Unique number</trx_id>
<trx_date>yyyyMMddHHmmss</trx_date>
<contentid>see note</contentid>
</mms>
How can i produce that xml?
Can i produce it with this?
public Element getXML(Document document) {
// create sentContent Element
Element sentContent = document.createElement( "mms" );
// create subject Element
Element temp = document.createElement( "subject" );
temp.appendChild( document.createTextNode(
String.valueOf( getJudulFilm() ) ) );
sentContent.appendChild( temp );
// create url_image Element
temp = document.createElement( "url_image" );
temp.appendChild( document.createTextNode("") );
sentContent.appendChild( temp );
// create url_sound Element
temp = document.createElement( "url_sound" );
temp.appendChild( document.createTextNode("") );
sentContent.appendChild( temp );
// create url_video Element
temp = document.createElement( "url_video" );
temp.appendChild( document.createTextNode(
String.valueOf( getUrl_video() ) ) );
sentContent.appendChild( temp );
// create text Element
temp = document.createElement( "text" );
temp.appendChild( document.createTextNode("") );
sentContent.appendChild( temp );
// create msisdn_sender Element
temp = document.createElement( "msisdn_sender" );
temp.appendChild( document.createTextNode(
String.valueOf( getMsisdn() ) ) );
sentContent.appendChild( temp );
// create msisdn_recipient Element
temp = document.createElement( "msisdn_recipient" );
temp.appendChild( document.createTextNode(
String.valueOf( getMsisdn() ) ) );
sentContent.appendChild( temp );
// create sid Element
temp = document.createElement( "sid" );
temp.appendChild( document.createTextNode(
String.valueOf( getSid() ) ) );
sentContent.appendChild( temp );
// create trx_id Element
temp = document.createElement( "trx_id" );
temp.appendChild( document.createTextNode(
String.valueOf( getTrx_id() ) ) );
sentContent.appendChild( temp );
// create trx_date Element
temp = document.createElement( "trx_date" );
temp.appendChild( document.createTextNode(
String.valueOf( getTrx_date() ) ) );
sentContent.appendChild( temp );
// create contentid Element
temp = document.createElement( "contentid" );
temp.appendChild( document.createTextNode(
String.valueOf( getContentid() ) ) );
sentContent.appendChild( temp );
return sentContent;
}& how can i send it to the server using HTTP request post method? -
Horizontal scrolling gallery like this website
Hi,
having seen this website on Muse's "site of the day" gallery, I was wondering how the horizontal scrolling gallery is done using Muse?
http://4ad20.themysteryparade.com
Are there any tutorials explaing this technology - can you point me to a site? Any experts that have an answer how to do this?
Thanks so much,
MarkusYou can change the the Page width , as per your requirement. We just need to assemble few asset, please have a look to the following Video which I have created for you, that should clear few things, in my example, I have created a page with following properties,
Width: 3000px;
Height: 500 px;
Background Fill: none;
Browser Fill: image; Scale to Fill, Scrolling: Unchecked.
http://gauravtestsite4.worldsecuresystems.com/Gaurav/2013-09-18_1525.swf
I hope this will give a basic idea. -
I would like to build a photo gallery like wordpress or flickr. Is it possible with Dreamweaver?
Hello,
I have built my website using Dreamweaver and show case my photos using simpleviewer pro. I rather like the layout flickr, eg. http://www.flickr.com/explore. Is it possible using Dreamweaver? or do I need another programme to build it?
Thank you.Hello,
Thank you for replying so quickly.
I'd like to replicate only the way Flickr shows the images. The first page in the explore page (www.flickr.com/explore), I like that you can scroll down to see all the photos then you select and it opens in a new window.
Best regards
Maybe you are looking for
-
Acrobat X - Word with linked Excel-Sheets is blank
Hello Acrobats, the following problem occurs using MS Office 2007 on Win XP with Acrobat X PDF-Maker: A MS Word document has a linked Excel-Sheet inserted. The PDF maker is used to create a PDF with no tags or PDF/A specification. With Acrobat 9 no p
-
My internet keeps 'tripping' at or around the same period time each day. We have already replaced our modem from our internet provider and we bought a new airport extreme router. We do not believe these were the cause, although we have now ruled the
-
Just installed ios 7 on my 4s, and I have two issues: 1) control centre: the music controls do not work, only the volume adjust slider works; 2) in mail, where do you find the setting to control how many messages you want your inbox to retain?
-
I have just bought a new laptop and would like to know if there is a way i can get my existing itunes library on my old laptop to appear? Also when I plug in my iphone4 it says it is already registered on another device ~ How do I unregister & re-reg
-
MVP List #2 (August 6th through August 12th)
The Verizon Community Forums Most Valuable Posting List is where we recognize great work and words happening every day right here on our community. We know the success as a community is based on the continual and lively contributions of our valued me