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

Similar Messages

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

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,

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.

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...

First Time using Parallax Scrolling!

So I've been doing a new landing page for DJBigdad.com - I have included both project file and published files with in this zip to better explain myself.
Just finished my album animation with parallax scrolling but the overall published result shows nothing!
Here is the file! http://www.djbigdad.com/ParallaxProjects/LandingPageDJBigdad/DJBigdadLandingPage.zip
I love this edge animate stuff its great but sometimes it doesnt work... Probably a operator error lol
I would greatly appreciate any advice on how to fix this!
Thanks a ton
DJBigdad

to activate iphone, you should connect your iphone to your computer which should have itunes via your usb cable provided with your iphone problem. and you don't need to register an account to activate the iphone. but you need to register to download apps for iphone.
it have to be unlocked to work with other country's normal sim card. you should have a malaysian mini sim card to make a normal at&t iphone work in malaysia and other countries.
if you want to know about unloked phones, go to this webpage-> http://www.tgdaily.com/mobility-opinion/33600-unlocking-the-iphone-what-does-it- mean definition for unlocking--->
Unlocked is the term used to describe mobile phones that are not tied to a particular service provider in order to be used. Many cell phones are tied to a single cellular provider at their introduction, but are later unlocked for use on many networks.

Using parallax scrolling on a browser fill shape?

Hi everyone,
Is it possible to apply parallax scrolling onto a shape that is extended to horizontally fill up the browser? I'm creating a single page scroll website and a want a shape to cover up a certain fraction of the bottom of the browser (I can't use pin because then the shape will move with the bottom of the browser depending on the size of the window.) Parallax works fine on the shape until I extend it to the browser borders and then parallax grays out. Will this be supported in a future update? Is there another way for me to achieve this effect? Thanks!
Jackie

From Muse Release Notes - http://helpx.adobe.com/muse/release-note/adobe-muse-release-notes.html.
Note Scroll Motion Effects are not available for 100% browser width objects, pinned objects, items that are inline within text, items within a group or items within a widget.
You would also find a similar note in the information tooltip for Scroll Motion under the Effects panel in the Control strip. Please feel free to submit it as a feature request in our Ideas section.
Thanks,
Vinayak

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

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.

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.

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

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;

Dynamic Photo Gallery in Flash using AS3.0 and XML, but it doesn't work and missed up my app.

Hi,
I am creating an iPad app using AS3. The app contains three sections.
One of those sections (chocolate sources)contains Dynamic Photo Gallery using XML. The photos, thumbnails, and text in this section are loaded from XML.
I faced may issue when I tried to run this app:
The gallery photos didn't show up
The thumbnails (buttons to navigate the photo gallery) didn't show up at all. (The thumbnails should show up under the photo gallery box.)
The text doesn't show up (the text should be in every photo as describtion)
I want to include Swipe in the photo gallery, how can I do that?
When I click on "Chocolate Sources" button, the photo gallery appears in every section, here are print screens describe what I mean:
The photo gallery covers the home screen too.
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<sources>
          <section>
                    <details>
                                        Cocoa tree exists in the tropics area, such as Central and South America.
                              </details>
                                        <image>
                                                  <url>coca1.jpg</url>
                                                  </image>
                                                  </section>
          <section>
                    <details>
                    Cocoa is supplied in many countries such as Indonesia, Ghana, Brazil, Ecuador and Cameroon.
                    </details>
                              <image>
                              <url>coca2.jpg</url>
                              </image>
                                        </section>
          <section>
                              <details>
                              Dark chocolate helps to relax and reduce the stress and blood pressure because it has antioxidants elements, which helps in vasodilatory process.
                              </details>
                                        <image>
                                        <url>coca3.jpg</url>
                                                  </image>
                                                            </section>
          <section>
                    <details>
                    Chocolate provides energy and hyperactive sometimes because it contains high level of caffeine and sugar.
                    </details>
                              <image>
                              <url>coca4.jpg</url>
                                        </image>
                                                  </section>
          <section>
                    <details>
                    Chocolate could be mixed with many different flavors, such as mint, strawberry, orange, banana, vanilla, hazelnut, almond, coconut, and etc.
                    </details>
                              <image>
                              <url>coca5.jpg</url>
                              </image>
                                        </section>
          <section>
                    <details>
                              Chocolate is expressing of well hospitality and good time due to its lovely taste.
                              </details>
                                        <image>
                                        <url>coca6.jpg</url>
                                                  </image>
                                                            </section>
</sources>
And here is my Action Script for "Chocolate Sources" section:
stop();
function Choco1(evt:MouseEvent): void {
          gotoAndStop('16');
choco_btn.addEventListener(MouseEvent.CLICK,Choco1);
function Souc1 (evt:MouseEvent): void {
          gotoAndStop ('31');
souc_btn.addEventListener(MouseEvent.CLICK,Souc1);
function ShopIn1 (evt:MouseEvent):void {
          gotoAndStop('46');
shops_btn.addEventListener(MouseEvent.CLICK,ShopIn1);
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.MovieClip;
import flash.display.Loader;
import fl.motion.MotionEvent;
import flash.events.MouseEvent;
import flash.sampler.NewObjectSample;
import flash.text.TextFormat;
var xmlLoader: URLLoader = new URLLoader (new URLRequest("sources.xml"));
xmlLoader.addEventListener(Event.COMPLETE, finishedXmlLoader);
var xmlFile:XML;
var xextend:int = 10;
var gal:galary = new galary ();
          gal.x = 85;
          gal.y = 165;
          addChild(gal);
var txfe: TextField = new TextField ();
txfe.x = 25;
txfe.y = 45;
var tformat:TextFormat = new TextFormat ();
tformat.bold = true;
tformat.color = 0xFFFFFF;
tformat.size = "18";
tformat.font = "Arial";
txfe.defaultTextFormat = tformat;
addChild(txfe);
function finishedXmlLoader (e:Event): void{
          xmlFile = new XML (xmlLoader.data);
          var leng:int = xmlFile.image.length();
          txfe.text = xmlFile.image.details[0];
          for (var i:int = 0;i<leng;i++){
                    var b:thumbs = new thumbs ();
                    b.x = xextend;
                    b.y = 480;
                    b.buttonMode = true;
                    b.details = (i+1).toString();
                    addChild(b);
                    b.addEventListener(MouseEvent.MOUSE_OVER, theMosover);
                    b.addEventListener(MouseEvent.MOUSE_OUT, theMosout);
                    b.addEventListener(MouseEvent.CLICK, onMosClick);
                    var bloader:Loader = new Loader();
                    bloader.load(new URLRequest("thumbs/" + (i+1) + ".jpg"));
                    b.addChild(bloader);
                    xextend += b.width + 50;
var loader:Loader = new Loader ();
loader.load(new URLRequest ("pictures/coca1.jpg"));
gal.addChild(loader);
function theMosover(m:MotionEvent):void{
          m.currentTarget.alpha = 0.5;
function theMosout (m:MouseEvent):void{
          m.currentTarget.alpha = 1.0;
function onMosClick(m:MouseEvent):void{
          var loader:Loader = new Loader();
          loader.load(new URLRequest("pictures/" + m.currentTarget.details + ".jpg"));
          gal.addChild(loader);
          txfe.text = xmlFile.image.details[int(m.currentTarget.details) -1];
I need an urgent help to fix the errors and make this section work well.
thanks.

try:
txfe.text = xmlFile.section[int(m.currentTarget.details) -1].details;
instead of
txfe.text = xmlFile.image.[int(m.currentTarget.details) -1];
and add your thumbs to gal, not the stage. when you're done with the gallery, remove gal.

Photo gallery using parallax scrolling?

Similar Messages

Maybe you are looking for