Creating arrow navigation with a photo gallery

I am in the process of creating my own phtoography website. I created all the pages in Photoshop, sliced them and am now using dreamweaver to add interactivity.
The class I took showed us how to make remote rollover images with small thumbnails that you can rollover that make the large version of the image appear on the same page.
I have decided not to do that but instead use arrows and the number of the photo in the series as the navigation.
Now that I am actually creating the page in DW I am realizing I don't really know how to do what I want...and can't figure out how to word a question to google an answer.
This is a photo of part of my page...
I want the user to be able to hit the arrow on the left or right and cycle through the images.
Hit the left arrow and it goes to image 9/10 [image 9 of 10 images in the series], also the numbers in the center would change.
Hit the right arrow and it goes back to image 1/10.
I am hoping this is possible. Any help or links to tutorials on this would be GREATLY appreciated!
Thanks.

Welcome Alex -
Any picture you display on your site can be saved to the visitor's computer.
If you ZIP each gallery, a simple link to the zipped archive will offer the visitor
an option to save to their computer.

Similar Messages

How to create a Navigation with submenu ? { Mega Navigation Menu} ?

Please iam playing around with Flach Catalyst, but i cant find how to create a navigation menu with submenus
i've created the design in photoshop but i dont know how to do the rest in Catalyst.
the Navigation menu that i want is should be more or less like this
Home          Contact        Gallery     Team                                                            { Now when i mouse over inTeam it shows a block with text and links that i
                                                                                                                           can be able to click them.}
-------------------------------------------------------^---------------------------------- ---------------
                                       |---------------^-------------------------------------------------|
                                         Race Team                  |   Swim Team
                                      .....................................| .............................
                                         Football Team              |   NR Team
                                      .....................................|..............................
                                         Sprint Team                 | Basketball Team
                                     ......................................|..............................
                                         Jump Team                  | Water Team
                                     |.....................................................................|
Please help me i've search on google but didnt found anything.
Thank You

Hi,
This file may help. DropDownMenu.fxp (Right-click > Download Linked File to download this Fc CS5.5 file).
It illustrates a simple drop-down menu. Note that only the File menu has button items in it.
Best,
Tanya

Help with AS2 - photo gallery

Hi All
would someone beable to help me with some code, I downloaded a photo gallery example, at the moment the movie plays the photos when you click a button(timer)
What I'm trying to do is to get the movie to auto play the photos on load rather than having to click the button. I have been lookin in the scrip, I think its something to do with
// initialize values
currentIndex = 0;
but when I change this value to 1, not much happens, would some be able to have a look within the code and see where I can change it so that the movie runs the images automatcally on load.
I have pasted the code below, hope this is ok?
many thanks for anyones help!
CODE:
// (c) Copyright by Andrew DiFiore. All rights reserved. DO NOT REMOVE.
fscommand("allowscale", "false");
Stage.scaleMode = "noScale";
targetPhoto._visible = false;
slides_xml = new XML();
slides_xml.onLoad = loadSlideShow;
slides_xml.load("album.xml");
slides_xml.ignoreWhite = true;
function loadSlideShow(success) {
if (success == true) {
rootNode = slides_xml.firstChild;
totalSlides = rootNode.childNodes.length;
currentSlideNode = rootNode.firstChild;
photos = new Array(totalSlides);
thumbs = new Array(totalSlides);
captions = new Array(totalSlides);
tx = 0;
for (i=0; i < totalSlides; i++) { // populate arrays and create thumbnails dynamically
   photos[i] = currentSlideNode.attributes.jpegURL;
   thumbs[i] = [currentSlideNode.attributes.jpegWidth,currentSlideNode.attributes.jpegHeight];
   captions[i] = currentSlideNode.firstChild.nodeValue;
   _root.attachMovie("thumb","thumb"+i,i);
   _root["thumb"+i]._x = tx;
   _root["thumb"+i]._y = 595; // using fixed Y coord
   _root["thumb"+i].tindex = i;
   tx += 22;
   currentSlideNode = currentSlideNode.nextSibling;
// initialize values                      <<<<<<<<<<<<<<<<<<<<<<<IS IT HERE?????
currentIndex = 0;
targetWidth=thumbs[currentIndex][0]; // get width
targetHeight=thumbs[currentIndex][1]; // get height;
updateSlide();
function updateSlide() { // load photo, update caption and status fields
targetPhoto.loadPhoto(photos[currentIndex]);
caption = captions[currentIndex];
statusField = (currentIndex+1) + "/" + totalSlides;
function slideShow() {
if (currentIndex == totalSlides-1) { currentIndex = 0; } else { currentIndex++; }
targetPhoto._visible = false;
targetWidth=thumbs[currentIndex][0]; // get width
targetHeight=thumbs[currentIndex][1]; // get height;
updateSlide();
MovieClip.prototype.loadPhoto = function(fn) { // load external jpeg method + preloader
this.createEmptyMovieClip("holder", 1);
this.holder.loadMovie(fn);
this.onEnterFrame = function() { // NOTE: could use this to display percentage to user
if (Math.floor((this.holder.getBytesLoaded()/this.holder.getBytesTotal())*100) >= 100) {
   delete this.onEnterFrame;

something like this...not quite working
function updateSlide() { // load photo, update caption and status fields
setTimeout(targetPhoto.loadPhoto(photos[currentIndex], 2000);
caption = captions[currentIndex];
statusField = (currentIndex+1) + "/" + totalSlides;

Problem with mutiple photo gallery...

Hello,
I'm new to As3.0 (i'm a designer...) but I need to create a photo gallery, So I found a Tutorial On lynda.com.
I'm using a code that works perfectly, and modified it (copy and paste it) to have 2 SAME photo gallery (using different images) displayed on the page.
So I'm using a 2 thumbnails (one for each Gallery) and by scrolling on the X axis of each thumbnail you can see the differnet images availaible in the gallery. By clicking it displays the full size image in a container.
So far so good.
The problem is that when going form one gallery to another, the first viewed gallery doesnt allow the other gallery main size image to display simply because it is underneath it... Like if it was a layer under another top layer...
I would like to know if there is a way to make each gallery unload their full size image when clicking on the other gallery.
SORRY IF THIS IS A BIT UNCLEAR BUT CAN EXPLAIN IF YOU ASK...
HERE IS THE CODE
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
var container:MovieClip = new MovieClip();
var imageLoader:Loader;
var fullLoader:Loader = new Loader();
var frontIndex:int = 0;;
var containerMask:MovieClip = new MovieClip();
var segment:Number;
container.x = 115;
container.y = -185;
fullLoader.x = 275;
fullLoader.y = -185;
container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
container.addEventListener(MouseEvent.CLICK, showPic);
xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
function mcunload1(event:MouseEvent):void
fullLoader2.unload();
fullLoader.load(new URLRequest(xmlList[frontIndex].attribute("full")));
function xmlLoaded(event:Event):void
xml = XML(event.target.data);
xmlList = xml.children();
for(var i:int = 0; i < xmlList.length(); i++)
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
container.addChild(imageLoader);
function changeThumb(event:MouseEvent):void
segment = container.width / container.numChildren;
frontIndex = Math.floor(container.mouseX / segment);
if(frontIndex <= container.numChildren - 1)
for(var j:int = 0; j < container.numChildren; j++)
container.getChildAt(j).visible = false;
container.getChildAt(frontIndex).visible = true;
function showPic(event:MouseEvent):void
fullLoader.unload();
fullLoader.load(new URLRequest(xmlList[frontIndex].attribute("full")));
addChild(fullLoader);
container.filters = [new DropShadowFilter()];
addChild(container);
//SECOND IMAGE GALLERY
//SECOND IMAGE GALLERY
var xml2:XML;
var xmlList2:XMLList;
var xmlLoader2:URLLoader = new URLLoader();
var container2:MovieClip = new MovieClip();
var imageLoader2:Loader;
var fullLoader2:Loader = new Loader();
var frontIndex2:int = 0;;
var containerMask2:MovieClip = new MovieClip();
var segment2:Number;
container2.x = 115;
container2.y = -80;
fullLoader2.x = 275;
fullLoader2.y = -185;
container2.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb2);
container2.addEventListener(MouseEvent.CLICK, showPic2);
xmlLoader2.load(new URLRequest("data/images2.xml"));
xmlLoader2.addEventListener(Event.COMPLETE, xmlLoaded2);
function mcunload(event:MouseEvent):void
fullLoader.unload();
fullLoader2.load(new URLRequest(xmlList2[frontIndex2].attribute("full")));
function xmlLoaded2(event:Event):void
xml2 = XML(event.target.data);
xmlList2 = xml2.children();
for(var i:int = 0; i < xmlList2.length(); i++)
imageLoader2 = new Loader();
imageLoader2.load(new URLRequest(xmlList2[i].attribute("thumb")));
container2.addChild(imageLoader2);
function changeThumb2(event:MouseEvent):void
segment = container2.width / container2.numChildren;
frontIndex2 = Math.floor(container2.mouseX / segment);
if(frontIndex2 <= container2.numChildren - 1)
for(var j:int = 0; j < container2.numChildren; j++)
container2.getChildAt(j).visible = false;
container2.getChildAt(frontIndex2).visible = true;
function showPic2(event:MouseEvent):void
fullLoader2.unload();
fullLoader2.load(new URLRequest(xmlList2[frontIndex2].attribute("full")));
addChild(fullLoader2);
container2.filters = [new DropShadowFilter()];
addChild(container2);

This is just a quick guess. Whenever you call... fullLoader.unload(); also call fullLoader2.unload(); and vice versa.

Problems with flash photo-gallery xml

Hello,
I need help. I have bought your photogallery template and i
am having problems with it.
When i test the gallery on my portfolio website (html) all it
comes up is the background, the pictures and thumbnail pictures
wont load. I am putting the files in the right folder and using the
swf in an html (dreamweaver cs3). what is it happening?
I dont know xlm. Plz give me a hand??
Thanks

Hi DZ,
I am testing it locally. I didn't even upload anything yet.
And yes, i put the swf into my html portfolios page (dreamweaver
cs3) and tested locally. the pictures wont show up, only the bg for
the photo-gallery. I bought this template here at the
exchange

CS4 problem with Web Photo Gallery Plug-in

I have googled answers to the question of how to get Web Photo Gallery back into Automate for CS4. I put the Content disc in, and went to Goodies-Adobe Photoshop CS4 Extended-Optional Plug-ins-Automate. There are three files there (ContactSheetll.plugin, PhotomergeUI.plugin, and WebContactSheetll.plugin. When I click on each of the files, I get the message: Could not complete your request because Photoshop does not recognize this type of file. This has happened with both the content disc goodies and the Adobe download that was recommended. Has anyone experienced this problem, and are there any solutions?

If anyone is still following this thread....I having the same problem. I downloaded the CS4 plugin and copied the folder to C:\Program Files\Adobe\Adobe Photoshop CS4 (64 Bit)\Presets\Web Photo Gallery but it doesn't show / appear when I go to file / automate / in CS4. Does anyone have any siggestions? Do I have to "turn on" the feature somehow in ver 11?
Thanks, Airpix

How do I create a slideshow with selected photos on my iPad2

I want to create a slideslow using selected photos (not all photos) from the photos that I've imported to my iPad. Can you tell me how to do this?

You will need to use the computer that you sync with, running the most recent version of iTunes. Connect the iPad to the computer, click on the iPad name on the left, click on the Summary Pane of the iTunes window on the right, and then click on the Check for Update button.
This explains it as well.
http://support.apple.com/kb/HT4972
You can use any computer to update, but you will lose everything that you have on your iPad, so that's why you really should use your own syncing computer.
I recommend this as well ....
What you should do anytime that you update the device is to transfer purchases from the iPad into iTunes - File>Transfer Purchases - and you should backup the iPad as well. When you update the update the device, if something goes wrong, you can restore from the backup.
However, iTunes should ask if you want to backup before you update, but just in case create the backup yourself before you update. The backup contains your app data and settings - along with other items - so make sure you backup first.
If you have any other important files, you may want to transfer them to your computer as well, prior to the update.
Transfer purchases.
http://support.apple.com/kb/HT1848
How to backup
http://support.apple.com/kb/HT1766

Help with scrolling photo gallery

I'm using the code below to for a scrolling photo gallery. I got this from another forum on Adobe. My problem is that I can't get my images to upload. I uploaded this for an image but it's not working:
<img src="images/baca_poster_small.jpg" data-cycle-title="image1">
Can someone please help me with getting my pictures to work in this?
Thanks!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 document with Cycle2</title>

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
<style>
.cycle-slideshow, .cycle-slideshow * {
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin:0 auto;
width:45%; /**adjust width as required**/
.cycle-slideshow img {width: 100%;}
</style>
</head>
<body>
<h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Slideshow</h1>

<div class="cycle-slideshow"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="700"
>

<img src="http://malsup.github.com/images/beach1.jpg" data-cycle-title="beach1">
<img src="http://malsup.github.com/images/beach2.jpg" data-cycle-title="beach2">
<img src="http://malsup.github.com/images/beach3.jpg" data-cycle-title="beach3">
<img src="http://malsup.github.com/images/beach4.jpg" data-cycle-title="beach4">
<img src="http://malsup.github.com/images/beach9.jpg" data-cycle-title="beach9">

</div>
</body>
</html>

Is this supposed to be a WordPress site? None of these images are found on the server. Those folders don't exist either.
<img class="first" src="mosspictures/DSCN0038.JPG" alt="">
   <img src="mosspictures/DSCN0040.JPG" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-5.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-6.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-1.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-2.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-3.jpg" alt="">
   <img src="wordpress/wp-content/themes/MarcMossTheme/image-4.jpg" alt="">
Nancy O.

Help with Spry Photo Gallery

I am putting together a photo gallery using the tutorial
found
here.
I have completed the basic tutorial and it is working well. I need
help though in implementing some advanced features not covered in
the tutorial but shown in the proof of concept
here.
I want to include a "gallery" selector like the proof of
concept, but i have no idea as to how i would go about
incorporating it. I have had a look at the code and it doesnt seem
to be all that difficult, but i just dont know what to do. I am
open to anything anyone can suggest even adding more Datasets if
needed. the other thing that is included in the code selection are
the Next, play/pause, and previous buttons. If anyone could tell me
how to get that to work i would appreciate it.
Thanks
Ryan

did you have any luck figuring out how to make your photo
album? I'm working on my own and am also having a hard time
understanding the proof of concept without a full tutorial.

Best way to create slide show with last photo having links

What are some of the best ways to create a slide show (more like a season greeting flash) with the last photo having links and buttons for the viewer to click?
I already have the code for the slide show. What I need now is how do I reference or point to a keyframe that contains the last slide as the background with buttons and hyperlinks? Perhaps, I also need a way to not showing this slide until the last? How do I do that? This last slide with buttons and links are on it's own layer.
The other route would be to create the buttons and hyperlinks in the AS3 code instead of design time. If so, how do I do on the last slide?

What are some of the best ways to create a slide show (more like a season greeting flash) with the last photo having links and buttons for the viewer to click?
I already have the code for the slide show. What I need now is how do I reference or point to a keyframe that contains the last slide as the background with buttons and hyperlinks? Perhaps, I also need a way to not showing this slide until the last? How do I do that? This last slide with buttons and links are on it's own layer.
The other route would be to create the buttons and hyperlinks in the AS3 code instead of design time. If so, how do I do on the last slide?

PSE9 Can't create a slideshow with .jpg photo and .mov video

Hi
I don't find some informations how to make a slideshow where I can use my .jpg photos AND my .mov vidoes - both are coming from my Panasonic Digitalcamera.
I bought PSE9 because everywhere is written that this is the right product to create a slideshow / Diashow... with photos and vidoes.
But if I want use the "Diashow" I get the information that this is only for windows player and all my .mov videos which I can play in the PSE9 are NOT in the Diashow.
Knows everyone how I can come further with my holidayvideo???
Thanks in advance
Herlinde

guess PRE will work fine for your mov files. ...

Creating a slideshow with 500+ photos

I am trying to create a slideshow that will run continuously with over 500 photos and burn it to a DVD. Is there any way to do this in iDVD? I want to be able to use the titles of the photos also. I tried doing it in iMovie, but when I added a title to the photo, it did not keep the title on the photo for the entire time. It split the photo into 2 parts, with the title and without.

I put all of the photos into iMovie, added a title to each photo using the "Music Video" title and it split the photo. I tried to edit it and make it last the lenght of the clip and everything got completely messed up. Only parts of the title would show up on some, a photo would just flash in-between regular photos, and many other errors.
Is there any way for me to do the same in iDVD? I know it limits the number of photos to 99 per slideshow, but can I make them run continuously?
Thank you,
Julie

Need help with DW photo gallery

I'm learning DW the hard way, trial & error. I've created
my photo album & uploaded it. It looks find, but when I click
on the pictures to enlarge them I get the message "ooops no page
found". What do I do to resolve this issue? I know I'm missing a
step.
Please help me!!! Thanks, Barbara

Look at the path to the larger image. Is the path correct?
Did you upload
the larger photos?
Can you post a URL to your site?
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
"whuzthere" <[email protected]> wrote in
message
news:fs4591$6ir$[email protected]..
> I'm learning DW the hard way, trial & error. I've
created my photo album
> &
> uploaded it. It looks find, but when I click on the
pictures to enlarge
> them I
> get the message "ooops no page found". What do I do to
resolve this
> issue? I
> know I'm missing a step.
>
> Please help me!!! Thanks, Barbara
>

How to create a signature with a photo in Imail

I am trying to create a signature for emails and want to include a photo as part of it. How do i do this?

i answered by myself.

HELP with Flash Photo Gallery

I have no clue how to program these flash galleries....My
site www.al-burke.com contains a flash web gallery that I purchased
online and I have been able to upload it to the site but its says
movie not loaded. I have all the neccessary files in place I
believe (gallery.xlm, main.html, main.swf) all under a folder. Can
anyone please help me out? Thanks

I went to al-burke.com, but the site doesn't actually load.
Do the files that you have work on your computer?

Creating arrow navigation with a photo gallery

Similar Messages

Maybe you are looking for