Photo gallery using Spry/CSS?

I have done a spry gallery, by replacing images from a
tutorial. tried to center the page within the browsers windows by
looking @ previous css, page ignores all but body color. here is
the code can some one help please?
<!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=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript"
src="includes/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryData.js"></script>
<script type="text/javascript">
var dsGallery = new Spry.Data.XMLDataSet("photos.xml",
"/gallery/photos/photo");
var dsData = new Spry.Data.XMLDataSet("photos.xml",
"/gallery");
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="header"><img src="images/HP 2 Header.jpg"
width="800" height="54" /></div>
</div>
<div id="thumbContainer" spry:region="dsGallery
dsData"> <img src="{dsData::thumbnail/@base}{@thumbpath}"
spry:repeat="dsGallery" class="thumbs"
onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div>
<div id="main" spry:detailregion="dsGallery
dsData"><img src="{dsData::large/@base}{@path}"/><br
/>
Name: {@path}</div>
<div id="apDiv1"></div>
</body>
</html>
Thanks

Thats beouxe of the position absolute, top left, these force
the elements in position.
So u would need to change that and it would "center" in the
way u wanted.

Similar Messages

Help with Photo Gallery using XML file

I am creating a photo gallery using Spry. I used the Photo Gallery Demo (Photo Gallery Version 2) on the labs.adobe.com website. I was successful in creating my site, and having the layout I want. However I would like to display a caption with each photo that is in the large view.
As this example uses XML, I updated my file to look like this:
<photos id="images">
            <photo path="aff2010_01.jpg" width="263" height="350" thumbpath="aff2010_01.jpg" thumbwidth="56"
               thumbheight="75" pcaption="CaptionHere01"></photo>
            <photo path="aff2010_02.jpg" width="350" height="263" thumbpath="aff2010_02.jpg" thumbwidth="75"
               thumbheight="56" pcaption="CaptionHere02"></photo>
            <photo path="aff2010_03.jpg" width="350" height="263" thumbpath="aff2010_03.jpg" thumbwidth="75"
               thumbheight="56" pcaption="CaptionHere03"></photo>
</photos>
The images when read into the main file (index.asp) show the images in the thumbnail area and display the correct image in the picture pain. Since I added the pcaption field to the XML file, how do I get it to display? The code in my index.html file looks like this:

rest of the code here:
        <div id="previews">
            <div id="controls">
                <ul id="transport">
                    <li><a href="#" class="previousBtn" title="Previous">Previous</a></li>
                    <li><a href="#" class="playBtn" title="Play/Pause" id="playLabel"><span class="playLabel">Play</span><span class="pauseLabel">Pause</span></a></li>
                    <li><a href="#" class="nextBtn" title="Next">Next</a></li>
                </ul>
            </div>
            <div id="thumbnails" spry:region="dsPhotos" class="SpryHiddenRegion">
                <div class="thumbnail" spry:repeat="dsPhotos"><a href="{path}"><img alt="" src="{thumbpath}"/></a><br /></div>
                <p class="ClearAll"></p>
            </div>
        </div>
        <div id="picture">
            <div id="mainImageOutline"><img id="mainImage" alt="main image" src=""/><br /> Caption: {pcaption}</div>
        </div>
        <p class="clear"></p>
    </div>
Any help with getting the caption to display would be greatly appreciated. The Caption {pcaption} does not work,

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

Photo Gallery using Bridge CS4 - trying to follow instructions, but no luck

I'm running Photoshop CS4 Extended, and am trying to figure out how to create a Photo Gallery.
Adobe instructions for using Bridge to create a photo gallery say this:
Adobe Output Module provides a variety of templates for your gallery, which you can select using the Output panel. Each template has one or more style options, which you can select and customize to suit your needs.
Important: Though gallery previews display a maximum of 10 files, your complete gallery will appear when you save or upload it.
Select the files or the collection or folder that contains the images you want to include in the web gallery.
Choose Window > Workspace > Output.
If the Output workspace is not listed, select Adobe Output Module in Startup Scripts preferences.
PROBLEMS:
(1)In Bridge, there is no such item as Output under Window > Workspace.
(2)In Photoshop, there is no such item as "Startup Scripts" in Edit > Preferences.
(3)In the Adobe CS4 Sample Scripts/JavaScript directory, there is no such item as Adobe Output Module.
There must be some other secret that the instructions forgot to mention... but what IS it???

Finally noticed I was running Bridge CS3 --- my old shortcut apparently still pointed to that version, even though I do have CS4 installed.
When I launch Bridge from within Photoshop, version CS4 does come up.
Will now go explore further, using the proper release...

Photo gallery (using Loader with no xml)

Hello, currently I'm doing a photo gallery.
Inside .fla, only 2 frame:
1st is for my 3 category: A, B, C.
stop();
A.addEventListener(MouseEvent.CLICK, clickSection);
B.addEventListener(MouseEvent.CLICK, clickSection);
C.addEventListener(MouseEvent.CLICK, clickSection);
function clickSection(evt:MouseEvent):void{
    gotoAndStop("gallery");
    loader.unload();
    req = new URLRequest(evt.target.name + "_gallery.swf");
    createLoader();
    loader.load(req);
2nd is to load the swf externally.
var req:URLRequest
var container_mc:MovieClip
var loader:Loader = new Loader();
req = new URLRequest("A.swf");
createLoader();
loader.load(req);
function createLoader():void{
    loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.INIT, initListener);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fileLoaded);
function initListener(evt:Event):void{
    addChildAt(loader,1);
function fileLoaded(evt:Event):void{
    container_mc = MovieClip(loader.content);
debug (click the button and it pop this):
RangeError: Error #2006: The supplied index is out of bounds.
    at flash.display::DisplayObjectContainer/addChildAt()
    at main_gallery_fla::MainTimeline/initListener()
any ideas why?

Yes, two... the first being the most important...
1) Learn how to use the help documentation (and Google). If you look up addChild in the help documents it will define what you need to know to be able to use it. The same goes for any other element of the AS3 language. The help documents are a primary tool in learning/using AS3 (or any language).
2) use: addChild(loader);
I couldn't really follow your description in the first posting, but I would almost expect a flurry of other errors unless I am misinterpretting what you described. Very often errors get reported in sequence, not all at once.

Photo gallery using SlidingPanel SpryData

I want to build a horizontal photo gallery with Sliding
Panels and getting the data from an xml file. SoI read carefully
the example of Building a Sliding Panels widget with Spry Data but
i cannot understand how to get 5 or 6 panels at once.
My idea is to get 5-6 images at once and each time i click
next i want to get next 6 images.
Anybody can help :-)

Than just put 5 / 6 images in each panel instead of creating
a new panel for them

Creating a photo gallery using behaviors?

I am re-designing a website, and I'm a little stuck on how to re-create the photo gallery presentation of the original web site. Here is the original gallery:
http://www.sarahegeller.com/photos
What I'd specifically like to reproduce is the ability to click on a thumbnail, which would bring up the larger image, but with the original window remaining behind, greyed out. I assume this is something I can do with behaviors, but there doesn't seem to be a behavior that addresses this, at least among the behaviors dreamweaver CS 3 comes with. I assume a behavior that would give me the effect I want exists on the dreamweaver exchange, but I couldn't find one. Am I even correct in assuming I could achieve the effect I'm looking for using a behavior?
I'm using dreamweaver CS 3, on a mac.
Thanks for taking the time to read this query.
Yours,
Nick

The effect you're aiming for is a currently popular one known as a Lightbox.
There is no in built Dreamweaver behaviour for this. You'll need to look for 3rd party solutions such as jQuery.
From the page code:
<script type="text/javascript" src="/sites/all/modules/lightbox2/js/auto_image_handling.js"></script>
<script type="text/javascript" src="/sites/all/modules/lightbox2/js/lightbox.js"></script>
The effect on that particular site is created with a Drupal module: Lightbox2
http://drupal.org/project/lightbox2
You may be able to use:
http://www.lokeshdhakar.com/projects/lightbox2/

Creating short photo gallery using previous and next frame A3.0

I'm creating a simple photo gallery.
Can someone tell me the right code this is what I'm remember. I forgot.
next_btn.addEventListener(MouseEvent.CLICK, goNext);
previous_btn.addEventListener(MouseEvent.CLICK, goBack);
function goNext(e:MouseEvent):void {
gotoAndStop("nextFrame");
function goBack(e:MouseEvent):void {
gotoAndStop("previoudFrame");
I know it's wrong can someone help me out?
Thanks

inside your functions use just
nextFrame();
and
prevFrame();
and get rid of those gotoAndStop and it should work...

Web Photo Gallery using PSE10?

In previous versions of Elements, I was able to create a web photo gallery which created thumbnails and web pages, and the folders within those files were contained...... how do I do that in Elements 10?

In recent versions of PSE the old HTML web galleries have been replaced by the online albums in the organizer. You can export the completed album to your hard drive and then FTP it to your website.

I am having trouble creating a photo gallery using CSS

Hi, I have created the gallery for the most part. I cannot seem to get the spacing and alignment correct so it falls where it needs to on my page. Lastly, I cannot seem to get the photos for the thumbnails to view properly. Any help is greatly appreciated! Thanks in advance!

CSS:
/* ----------NEW-------------- */
body {
background-color: #ccc;
font-size: 0.95em;
font-family: Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0;
margin:0;
a {color: #ff6677;}
a:visited {color:#ff6677;}
a:hover {color: #564b47;}
a:active { color:#000000;}
h1 {
font-size: 1em;
text-transform:uppercase;
font-weight:normal;
background-color: #666;
color:#ccc;
padding:15px;
margin:0;
h2 {
font-size: 10px;
font-weight: normal;
font-family: Arial, SunSans-Regular, Sans-Serif;
margin: 0px;
text-align: center;
color: #000;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
img.download {vertical-align:middle;}
/* ----------container zentriert das layout-------------- */
#container {
width: 1030px;
margin: 0px auto;
padding: 0;
background-color: #ffffff;
background:#fff url(../images/back.jpg) 75px 10px no-repeat;
/* Removing the list bullets and indentation */
#container ul {
    padding:0;
    margin:0;
    list-style-type:none;
/* Remove the images and text from sight */
#container a.gallery span {
    position:absolute;
    width:1px;
    height:1px;
    top:5px;
    left:5px;
    overflow:hidden;
    background:#fff;
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
    display:block;
    color:#000;
    text-decoration:none;
    border:1px solid #000;
    margin:1px 2px 1px 2px;
    text-align:left;
    cursor:default;
#container a.slidea {
    background:url(images/JUI_JIANG_ARTS_CENTER_1.jpg);
    height:93px;
    width:93px;
#container a.slideb {
    background:url(images/JUI_JIANG_ARTS_CENTER_2.jpg);
    height:93px;
    width:93px;
#container a.slidec {
    background:url(images/Special_JuiJiangArtsCenter3.jpg);
    height:93px;
    width:93px;
#container a.slided {
    background:url(images/Special_JuiJiangArtsCenter4.jpg);
    height:93px;
    width:93px;
* html #container a.slided {
    width:93px;
    w\idth:93px;
#container a.slidee {
    background:url(images/Special_JuiJiangArtsCenter5.jpg);
    height:60px;
    width:93px;
/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
    width:198px;
    height:386px;
/* move the thumbnails into the correct position */
#container ul {
margin: 5px;
float: right;
clear: none;
/* change the thumbnail border color */
#container a.gallery:hover {
    border:1px solid #fff;
/* styling the :hover span */
#container a.gallery:hover span {
    position:absolute;
    width:372px;
    height:372px;
    top:10px;
    left:75px;
    color:#000;
    background:#fff;
#container a.gallery:hover img {
    border:1px solid #fff;
    float:left;
    margin-right:5px;
#container a.gallery:hover img {
    border:1px solid #fff;
    float:left;
    margin-right:5px;
#container a.slideb:hover img, #container a.slidei:hover img {
    float:right;
#container {
    background:#fff url(../images/JUI_JIANG_ARTS_CENTER_1.jpg) 75px 10px no-repeat;
/* ----------banner for logo-------------- */
#banner {
background-color: #ccc;
text-align: right;
padding: 0;
margin: 0;
#banner img {padding: 0 0 10px;}
/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 10px 0 0 0;
margin: 0 0 0 0;
p, pre{
line-height:1.5em;
padding:0 10px 10px;
margin:0;
pre, code {
font-size:1.3em;
/* --------------left navigavtion------------- */
#left {
float: left;
width: 107px;
margin: 10px 0 0 10px;
padding: 0 0 0 0;
background-color: #ffffff;
#left a {
color: #ccc;
text-decoration: none;
color: #000;
#left ul {
list-style-type: none;
padding: 0px;
margin: 0px;
text-align: center;
font-size: 10px;
text-decoration: none;
font-family: Arial, SunSans-Regular, Sans-Serif;
line-height:1.0em;
#left .static {
color: #FC0;
#smallnav {
color: #FC0;
font-size: 8px;
/* -----------footer--------------------------- */
#footer {
clear: left;
margin: 0;
padding: 7px;
background-color: #fff;
/* -----------copyright--------------------------- */
#copyright {
font-size: 5px;
font-family: Arial, SunSans-Regular, Sans-Serif;
padding: 0 0 0 0;

Gallery using spry grow effect that targets the clicked thumbnail

Hello. I'm trying to build a gallery with thumbnails that,
when clicked, grow to display the full-size image. I created an xml
spry data set and I'm using a spry:repeat to go through each row of
the data set and create the thumbnail. Then I attach the grow
effect, but since the target is each of the thumbnails, I need an
unique id for each. I tried using id="thumb_{ds_RowID}" (and
ds_RowCount and ds_RowNumber) but it doesn't work.
I guess ds_RowID is not valid outside the spry:region, but
perhaps there's a way around this?
Can anyone give me any sort of advice on how I could make
this work? Thank you.

Hello Dexter,
By looking in the code I think the problem appears because of
borders that are not defined in the CSS and on IE they are reported
as NaN. Try to change the border definition for the element to 0px
explicitly.
Could you show me a link where you have the page with the
problem or give me the CSS definition of the element that is
initially invisible so I can test this bug and do the corrections.
Cristian MARIN

Photo gallery using parallax scrolling?

hey i have been testing out each of the slide show widgets in adobe muse. some of them are okay. the light box for once. is a challenge, but heres something i want to learn how to do. and its parallax scrolling with photos for a gallery. i think for what i am wanting to do i think its the best layout for me. heres a web site that hass it i think. http://album.alexflueras.ro/galleries/people.html#a1.
see i shows both landscape and portrait mode of photos. and thats been a challenge from the get go. so there i am thinking of using parallax scrolling . now how do i do this? is it done in photo shop and adobe muse. bec i do want to change out my i mages when needed?
now i am a tad bit curious. it looks good on desktop, but what about mobile devies. most phone. would it work great.?
so what are the steps for making this?
the other key thing i noticed. is that the photos are large. and thats what i like.
thanks

Hi
You can use composition on page where you can insert the images with scroll effect applied.
Check this video , its not exact design but will help to make images scroll page :
http://www.youtube.com/watch?v=BDgERSf2a5k
Thanks,
Sanjit

Kirupa Photo Gallery using XML and Flash

I learn best by using tutes and figuring out how to make
changes effectively. i finished the one at
http://www.kirupa.com/developer/mx2004/thumbnails3.htm
and managed to change sizes etc but i wanted to change it to a
symbol to insert it in another flash file. i got that part done
though the thumbs show up (number 3 to 5) and they do not scroll. i
figure it has to do with the hit left and hit right and that the
"path" not sure if i used the term in the right way changes when it
turns from a scene all by itself to being inserted into a frame in
a layer. i am not sure if i am explaining this right but i would
really appreciate any help and I am sorry if this is a duplicate
post, i have been searching for a long time and cannot find it or
figure it out.
jmontyman

I learn best by using tutes and figuring out how to make
changes effectively. i finished the one at
http://www.kirupa.com/developer/mx2004/thumbnails3.htm
and managed to change sizes etc but i wanted to change it to a
symbol to insert it in another flash file. i got that part done
though the thumbs show up (number 3 to 5) and they do not scroll. i
figure it has to do with the hit left and hit right and that the
"path" not sure if i used the term in the right way changes when it
turns from a scene all by itself to being inserted into a frame in
a layer. i am not sure if i am explaining this right but i would
really appreciate any help and I am sorry if this is a duplicate
post, i have been searching for a long time and cannot find it or
figure it out.
jmontyman

Spry Photo Gallery not visible other than in Safari

Hi,
I created a photo gallery using Spry using the step-by-step instructions found at http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album.html.
The problem is that my gallery only can be viewed in Safari — Firefox, Netscape and Explorer (on a Mac) shows nothing of the gallery.
Here's the link:http://www.highmarkdesigns.com/Proofing/gsconsultants/website/gallery/gallery.html
I would greatly appreciate it if anyone can tell me why it's not working in the other browsers and how to correct it to work "everywhere."
Thanks!
Hanna

THe IE version on the Mac is not supported by Spry. Its cross browser support includes:
Internet Explorer 6 +
Firefox 1.5 +
Opera 9.6 +
Safari 2.3 +
Chrome
As for the HTML content i saw in your scripts, it was just a basic empty page HTML.
Something like this;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
It didn't say the cause of this issue, just HTML tags. But if its fixed, than I wouldn't worry about it anymore.

How to link from another page directly to a photo within a Spry gallery?

I have created a page that has a photo gallery using Donald's tutorial to make a spry photo gallery. I have a need to link to a specific photo in that gallery from another page. I have seen the discussions on how to do this with tabbed panels etc.. but wondering how to do it in this context.

Add default slide to the constructor and use a similar process to http://foundationphp.com/tutorials/spry_url_utils.php
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
    defaultSlide: 2,
    widgetID: "ImageSlideShow",
    injectionType: "replace",
    autoPlay: true,
    displayInterval: 4000,
    transitionDuration: 2000,
    componentOrder: ["view", "controls"],
    plugIns: [ Spry.Widget.ImageSlideShow.PanAndZoomPlugin ]
Gramps

Photo gallery using Spry/CSS?

Similar Messages

Maybe you are looking for