Horizontal Photo Gallery

Hi All,
Considering that the Stage limit is 10,000px, what would be the best practice to build a much longer horizontal photo gallery. If I am not using a large Stage, does it mean I should hand code my own scroll bar and swipe actions? Any suggestions or links ?
Thanks

You could have a 2 image holders for transitions from one to another and change the image source based on the user action.

Similar Messages

Horizontal Photo Scroll/Swipe Gallery

Hi All,
I am making a horizontal Photo Gallery larger than 10,000 px in width. Users should be able to Swipe (on touch devices) and Scroll on Pc.
I came across some previous posts like this, but i dont know where to begin.
https://forums.adobe.com/message/5247759#5247759#5247759
Things I am confused about:
1 - I cant make the stage go wider than 10,000px, Does it mean I should place pics next to each other and navigate through them via code?
2 - I dont know how to make Swipe actions that are sensitive to intensity/distance/duration of users touch. I can only code the image to move for a fixed number of pixels
3 - I am not sure what would be the best/simplest approach to make my own scrollbar in this case (without starting from ground zero).
I appreciate any links or overall guidelines so i can start on right path.
Thanks

You could have a 2 image holders for transitions from one to another and change the image source based on the user action.

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

Help with code for inserting horizontal scroll bar in photo gallery in Business Catalyst site?

Hi,
I am using Business Catalyst and Dreamweaver to create a trial site.
I am not sure if this is the correct forum to post this request but anyway I have inserted a photo gallery module at the bottom of the sidebar in the homepage of my test site.
Can anyone advise on whether jquery or any other code can be inserted into the page or module code that will replace the "next" hyperlink below the first 4 photos with a horizontal scroll bar at bottom of the gallery so users can just scroll through all 12 images ?
Kind Regards, Matt.
http://craftime-bs6.businesscatalyst.com/

Alyssa,
Have you tried putting this rule back as it was originally:
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto; /*was 9px*/
    color: #EF9CCF;
    background-color: #FFF;
That is, changing your 9px back to auto.
And giving us a link (as you did) is much better than printing out the code for us! Thanks!
Beth

Trying to create a photo gallery... with little knowledge of Flex

Hey Guys,
I am trying build a photo gallery and I am having the hardest time.
Is there anything out there that helps people from scratch ?
I need help learning where to store the images... IE... jpegs
and the right syntax to call up the code...
Path info etc...
I tried to hack two of the following programs but in the case below the program could not find the files...
I am looking for an easy way to get started any help would be great
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalScrollPolicy="off" horizontalScrollPolicy="off"   initialize="init()" applicationComplete="startitup()" backgroundGradientColors="[0xffffff, 0x00808C]" >
<mx:HTTPService id="movieRequest" url="data/otrdata.xml" result="movieHandler(event)"/>
<mx:Glow id="glowImage" duration="200"
        alphaFrom="1.0" alphaTo="0.5"
        blurXFrom="0.0" blurXTo="15.0"
        blurYFrom="0.0" blurYTo="15.0"
        color="0x00FF00"/>
    <mx:Glow id="unglowImage" duration="200"
        alphaFrom="0.3" alphaTo="1.0"
        blurXFrom="15.0" blurXTo="0.0"
        blurYFrom="15.0" blurYTo="0.0"
        color="0x0000FF"/>
<mx:Fade
    id="fade"
    target="{myImage}"
    duration="400"
    alphaFrom="0"
    alphaTo="1"/>
<mx:TextArea x="463" y="156" height="326" width="387" id="myText" fontSize="14" editable="false"/>
    <mx:Image x="23" y="157" width="432" height="325" id="myImage" scaleContent="true"   complete="fade.play()"/>
<mx:Tile direction="horizontal" borderStyle="inset"
            horizontalGap="10" verticalGap="15"
            paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10" x="62" y="70" width="750" height="77">
            <mx:Repeater id="rp" dataProvider="{movieData}">
                <mx:Image height="49" width="50" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" toolTip="{rp.currentItem.subtitle}" source="{rp.currentItem.icon}" click="mygothere(event.currentTarget.getRepeaterItem ())" />
            </mx:Repeater>
            </mx:Tile>
                                    <mx:Label x="78" y="485" id="sourceTag0" width="333" textAlign="center" fontSize="14"/>
<mx:Label x="23" y="24" id="sourceTag1" fontSize="18" fontWeight="bold" width="281"/>
<mx:Image x="801" y="14" id="navimage1" source="@Embed(source='images/icons/Urbm.jpg')" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" width="43" height="32" click="myMainget('All'),myNumfind(0)"/>
<mx:Label id="labelall" x="813" y="50" text="All" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" width="43" height="18" click="myMainget('All'),myNumfind(0)" />
<mx:Image x="383" y="14" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage2" click="myMainget('Home'),myNumfind(0)"/>
<mx:Label x="382" y="49" text="Home" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}" click="myMainget('Home'),myNumfind(0)"/>
<mx:Image x="435" y="14" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" source="@Embed(source='images/icons/buildingjob.jpg')" width="45" height="32" id="navimage3" click="myMainget('City Life and Rhetoric'), myNumfind(0)"/>
<mx:Label x="430" y="49" text="Rhetoric" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" width="56" height="19"   click="myMainget('City Life and Rhetoric'), myNumfind(0)"/>
<mx:Image x="491" y="14" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" source="@Embed(source='images/icons/slums.jpg')" width="46" height="32" id="navimage4" click="myMainget('3 Perspectives'), myNumfind(0)" />
<mx:Label x="494" y="49" text="3 Pers" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" width="46" height="19"   click="myMainget('3 Perspectives'), myNumfind(0)"/>
<mx:Image x="550" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage5"/>
<mx:Label x="547" y="49" text="History"/>
<mx:Image x="602" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage6"/>
<mx:Label x="601" y="49" text="Today"/>
<mx:Image x="650" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage7"/>
<mx:Label x="648" y="50" text="Future"/>
<mx:Image x="700" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage8"/>
<mx:Label x="693" y="50" text="Opinions"/>
<mx:Image x="751" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage9"/>
<mx:Label x="746" y="50" text="Builders"/>
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import flash.events.Event;
        import mx.events.DropdownEvent;
        public var mynewnum:String="Home";
         private function changeEvt(event:Event):void {
         mynewnum=event.currentTarget.selectedItem.label;
         trace(mynewnum);
               filterByCategory2();
public function startitup():void{
myImage.source ="images/Buddy.jpg";
myText.htmlText="<b>Over-the-Rhine</b> is not only at the center of the Cincinnati community, but it is also at the center of a lot of controversies. This area has become a breeding ground for social issues. Issues of equality, crime, affordible housing, poverty, violence, and economic growth have recently been argued. Although these topics are the current issues facing Over-the-Rhine, this is not the first time many of these issues have been see by Over-the-Rhine. It seems that history is repeating itself once again. So where does the community go from here? Are there any answers. The questions one must consider are simple. Will Over-the-Rhine be in the same position thirty years from now? Is the current Over-the-Rhine community being treated fairly by the city? Do the urbanist movement, the people's movement, and the CDC have the best interests of the community in mind? How can the city deal with these issues without causing a fight within the community? Can Over-the-Rhine become a community where everyone is happy?";
sourceTag1.text = "Home";
sourceTag0.text ="A Look into the Over-the-Rhine Community";
public function myNumfind(num:Number):void{
myImage.source =movieData[num].image;
myText.htmlText=movieData[num].text;
sourceTag1.text = movieData[num].title;
sourceTag0.text =movieData[num].subtitle;
public function mygothere(event:Object):void{
myImage.source =event.image;
myText.htmlText=event.text;
sourceTag1.text = event.title;
sourceTag0.text = event.subtitle;
public function myMainget(myhere:String):void{
mynewnum=myhere;
filterByCategory2();
public function filterByCategory2():void
movieData.filterFunction = catFilter2;
movieData.refresh();
public function catFilter2(item:Object):Boolean
if(mynewnum=="All"){
return true;
}else{
return item.cat == mynewnum;
[Bindable]
private var movie:String;
[Bindable]
    public var selectedItem:Object;
[Bindable]
public var movieData:ArrayCollection;
private function init():void
movieRequest.send();
private function movieHandler(event:ResultEvent):void
movieData = event.result.otrdata.mydata;
filterByCategory2();
private function formatPositionToolTip(value:int):String{
var result:String = (value % 60).toString();
        if (result.length == 1){
            result = Math.floor(value / 60).toString() + ":0" + result;
        } else {
            result = Math.floor(value / 60).toString() + ":" + result;
        return result;
]]>
</mx:Script>
<mx:Label x="316" y="39" text="Menu" fontSize="12" fontWeight="bold" fontStyle="italic" color="#000000"/>
<mx:HRule x="364" y="49" width="480" strokeWidth="2" strokeColor="#000000"/>
</mx:Application>

I'd recommend linking your flex app to a PHP file, it'll automatically handle all the photos for you without you having to embed them all. Keeps the app size small and lets you add more pictures without having to alter any code. Here's the example code of a very simply image gallery that i'd build on if i was making a photogallery.
Flex:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="getPictures.send()">
    <mx:HTTPService id="getPictures" url="getPictures.php" method="POST" showBusyCursor="true"/>
    <mx:TileList dataProvider="{getPictures.lastResult.Pictures}" width="500" height="500" x="349" y="129">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Image width="200" height="200" source="{data.imagePath}"/>
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
</mx:Application>
PHP:
<?php
    foreach (glob("*.png") as $filename)
        print "<Pictures><imagePath>".$filename."</imagePath></Pictures>";
?>

HELP with photo gallery in a table

I have a table that is acting as my photo gallery.
Each thumbnail pressed trigers the image to expand into the first column of the table. However, depending on whether I select a vertical or horizontal image, the rest of the thumbnails get shifted over to accommodate room for the large image.
My question is: is there a way to somehow FIX the dimensions of that first column so that the thumbails will stay in place??
Thanks.

Use CSS floats and margins to set up your gallery (view source to see the code).
http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml
Nancy O.

How to add a slider to a photo gallery?

I have dozens of photos in a gallery. Scrolling lets you move along the line of photos but you cannot now use scrolling to independently move around the page. Can I add a slider to the gallery thumbnails to move through them quickly while retaining the scrolling feature for use on the entire page. As it stands now a person viewing my page on a laptop cannot see all of the info and cannot move around the page. Help!

To be specific about what I am trying to do is as follows:
I have a Muse slideshow (photo gallery( with the large picture window
and a LONG row of thumbnails that will go off the page (either
vertically or horizontally).
Right now I have the large picture window (and text around it)
locked/pinned in position while a long vertical column of thumbnails
scroll so you can select what picture you want to click to see in the
large window.
For someone viewing on a laptop, for instance, part of the large window
and locked text around are off screen and as the large screen and
related text are locked the person viewing cannot scroll around to bring
them into view.
I think what I need is to unlock the large screen (and related text) but
have some separate way to move the long row/column of thumbnails so
folks can click/select the picture they want to view on the large screen
Ken

Photo gallery navigation Master/Detail

I am trying to make a photo gallery with Master/Detail pages
in one - which is working up to a point.
I have 2 recordsets:
- A: one with all records which displays thumbnail icons in a
horizontal looper.
- B: another with a single url-parsed value.
With the help of Tom Muck's Detail Page Navigation Suite, I
can have First/Prev?Next?Last navigation set to the recordset B
and I can have the full set of thumbs with links to the
correct pic.
What I can't figure out is how to get the thumbnail icons to
have a 'Down' state based on the URL variable. I have tried onload
image swaps based on the dynamic id of the thumbnail images, to no
avail.
Any suggestions much appreciated.

what code are you using that's failing? copy and paste only the relevant code, not all the code used in your app.

Photo gallery settings

Hi All,
I have a couple of quick questions about photo gallery settings: google and forum searches haven't shown up anything useful!
- The photo gallery seems to be optimized for "square" photo's, whereas my DSLR produces more "rectangular" images. So, I'm left with large areas of blank space between rows of photos. Does anyone know of a way to adjust the vertical spacing without changing the horizontal spacing?
- Ideally, I'd like the user to be able to click on a photo, and directly show the hi-res image. Does anyone know if it's possible to set this up? I.e. clicking on an image would give the same results as the "download" button.
Thanks,

The photo page and album page galleries will take any size ratio image you give it. Where are you seeing the square issue?
If you want to manually put a thumbnail image on a page and link it to a full sized image to be opened in a new, separate window see this demo page: Opening Item in a New, Precisely Sized Window. It can be done with and without a button.
OT

Filename in Photo Gallery

Since updating my iPad2 to iOS 8, the filenames have vanished from the photo gallery. I am a designer and I used to take the filename of photos as reference for my clients. I have more than 8000 pictures in the gallery. Please HELP
Hate Apple so much for ruining my work.

I Can't ever recall seeing file names in the default Photos app. Perhaps you were using iphoto on your iPad which is no longer supported? Check the App Store for other photo handling apps To find one that shows the file names. I use Photo Manager Pro to show photos to my clients. It does a better job of that than the Photos app. you can set the preferences there to display the file name.

Photo gallery with Thumbnail View in Flex 3

Hello everyone
I very urgently need an answer to a very simple qeuestoon. I have been trying really hard since days to get a solution to this simple problem but in vain.
I am building an application in Flex 3. I simply want to create a photo gallery with a thumbnail where when the user clicks on a thumbnail, the image is shown in the canvas/tab navigator box next to it. The images are stored in a local folder (in src) are ARE NOT on available on any web link.
The Vbox with the thumb image and the .xml file has been created. But when I click on the thumbnail, the full image cannot be seen in the application. I dont know if this is a problem with data binding or what.
Please help!!!
Thanks a ton.

Check the folder structure
Flash is not able to get some file thats why the IO Error.
trace the url path just before u load the file and u will be abel to find whether that file is in specified folder or not.
http://www.darshanrane.com

Photo Gallery not showing photos in computer Web browser

None of my photo gallery photos are showing up in a computer's Web browser? They show up fine when you click "View Web Journal in Safari" on an iPad 2, but when I publish them to iCloud and Share the Web Journal Link, the photos don't show up?? It's happening with all of my Journals. It doesn't work on a Mac or Windows? What gives??
You try it:https://www.icloud.com/iphoto/projects/#1;CAEQARoQdoVWsxptdYjcSQD-Rg1QVg;B692688 8-A220-4FF7-848F-6383BB15A5DB

Arrrrrrrrrrrrrrrrgh, matey. They all show for me in Safari but require several page refreshes to get them all to display. Those that don't display will if I click on it and then go back to the page. However, when retuning to the first page will put be back at square one and require multiple refreshes to get them to display, but not always.
Also, the page links are all messed up. Clicking on them just returns me to the first page. If I Option click on a page link from Page 1 I will get to the right page.
I am unable to get Firefox or Chrome to work at all on your gallery.
Send a bug report to Apple via http://www.apple.com/feedback/iphoto.html. You can include the URL to this topic in order to include my comments and findings.
OT

Photo Gallery bug in IE7

http://labs.adobe.com/technologies/spry/demos/gallery_pe/dynamic/index.html
On mouseover, selected thumbnail expands behind other
thumbnails instead of hovering over them. Works fine in FF.
Is there a way to fix/override this?

@Kin
The gallery demo files do not put an anchor link around the
thumbnails. The article you list is describing how to alter the
files for (newer?) examples that require about 8 different include
files -- which, given the already HUGE download hit required to run
a photo gallery, seems excessive.
Can adobe not write up a solution that works for the sample
files for the gallery that only requires 3 includes + 1 css file
(which can be added to your own style sheet to avoid yet another
file download)?
Or, is there someway to grow the thumbnails from the bottom
right corner, thus avoiding any overlap by subsequent thumbs? I
tried setting the grow from center to false in SpryEffects but it
appeared to have no effect on the function in the gallery.

Photo gallery problems in Vista IE

Hi there,
I've made Spry Photo Gallery which works fine on Mac(Safari, Opera, Firefox) on Windows 2000 pro IE but don't work on Vista IE.
I can not find a problem. Can anyone help!

It is an HP dv6040ca that has vista 64-bit on it. It has a NVIDIA sata driver, that I have tried to up date today.
Drat. HP has been offering a Microsoft Standard Dual Channel PCI IDE Controller Update/Rollback that has been helping with this sort of thing on desktop models (32-bit), but they aren't offering it on notebooks.
Are you up to date on that BIOS update they are offering? (They don't say what it does, but it might be worth a crack.)
Software & Driver downloads: HP Pavilion dv6040ca Notebook PC (Vista 64-bit)

Photo Gallery Database in Dreamweaver Help

Can anyone offer advise on a simple solution for a photo gallery based on a database that can be intergrated to a website that I'm creating in Dreamweaver. Does anyone know of any widget like options and or templates? Thanks in advance.

I have a PHP script that dynamically populates the page with images from a folder. I don't keep images in a database.
http://alt-web.com/GALLERY/GalleryTest.php
Nancy O.

Horizontal Photo Gallery

Similar Messages

Maybe you are looking for