Advance image gallery in as3.0

hey folks i am just new to as3.0, any one mind telling me how to create a gallery like this site www.yodabaz.com

Then you may need to hire someone to do it for you if you do not have the skills to do it yourself and cannot look for a tutorial to teach you.

Similar Messages

XML Image Gallery

I'm creating my first xml driven image gallery in AS3 and could use some help. It's a pretty basic gallery that consists of a large image with thumbnails below it. You should see the large version of the thumbnails when you click on them, they should rotate chronilogically on it's own (use timer event?), and you should be able to scroll left or right in order to view additional thumbnails.
Below is what I have so far. My first task is to get the thumnails to line up correctly. I got the y value correct, but I need to space them out by 10px appropriatley. How can I do this? Thanks!
Jesse
import flash.events.Event;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
import flash.events.ProgressEvent;
var myXML:XML;
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("images.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
var myImagePreloader:mcPreloader = new mcPreloader();
myImagePreloader.x = stage.stageWidth / 2;
myImagePreloader.y = stage.stageHeight / 2;
myImagePreloader.width = 75;
myImagePreloader.height = 75;
var container_mc:MovieClip;
var xCounter:Number = 0;
function processXML(event:Event):void
    myXML = new XML(myXMLLoader.data);
    myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
    myXMLLoader = null;
    //createContainer();
    loadThumbs();
function createContainer():void
    container_mc = new MovieClip();
    //container_mc.x = my_x;
    container_mc.y = 510;
    addChild(container_mc);
    /*container_mc.addEventListener(MouseEvent.CLICK, callFull);
    container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
    container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);*/
    container_mc.buttonMode = true;
    /*preloaders_mc = new MovieClip();
    preloaders_mc.x = container_mc.x;
    preloaders_mc.y = container_mc.y;
    addChild(preloaders_mc);*/
function loadThumbs():void
    var thumbLoader:Loader = new Loader();
    for(var i:Number = 0; i < myXML.image.length(); i++)
        var thumbURL = myXML.image[i].@thumb;
        thumbLoader.load(new URLRequest(thumbURL));
        thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
        thumbLoader.y = 510;
        //trace(imageWidth);
function loadFull():void
    var fullImageLoader:Loader = new Loader();
    //var imageURL = myXML.image[i].@file;
    /*fullImageLoader.load(new URLRequest(imageURL));
    fullImageLoader.contentLoaderInfo.addEventListener(Event.OPEN, addPreloader);
    fullImageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, preloadImages);
    fullImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);*/
/*function addPreloader(event:Event):void
    addChild(myImagePreloader);
function preloadImages(event:ProgressEvent):void
    var percent:Number = Math.round(event.bytesLoaded / event.bytesTotal * 100);
    percent_txt.text = percent + "%";
function imageLoaded(event:Event):void
    var myLoadedImage:Loader = Loader(event.target.loader);
    addChild(myLoadedImage);
    new Tween(myLoadedImage, "alpha", Strong.easeIn, 0, 1, 0.5, true);
    percent_txt.text = "";
    removeChild(myImagePreloader);
    event.target.loader.removeEventListener(Event.OPEN, addPreloader);
    event.target.loader.removeEventListener(ProgressEvent.PROGRESS, preloadImages);
    event.target.loader.removeEventListener(Event.COMPLETE, imageLoaded);
function thumbLoaded(event:Event):void
    var myLoadedThumb:Loader = Loader(event.target.loader);
    addChild(myLoadedThumb);

What you will want to do is maintain a placement variable that you adjust for each new thumbnail you add. So the first might go at xValue = 0. Once that thumbnail is processed you then add the width of that thumbnail plus the 10 pixels space you want.
If you know that the widths will all be the same and what that value is, then you can assign the location for the thumbnail loader prior to it loading like you do for the y property.
Otherwise, you will need to wait until the thumbnail has loaded before you can determine the width... which would mean you will need to load the thumbnails sequencially rather than using a for loop since they will not necessarily load in the order they are executed to do so. It is basically somewhat like what relaxatraja provided except using the width property.

Anyone have a good tutorial for an AS3-XML image gallery?

I'm a pretty good Flash developer, but I've never worked with XML in Flash. I'm looking for a good tutorial on creating an XML driven image gallery, but I have yet to really find anything. Does anyone out there have a good tutorial? Thanks!
Jesse

Your best bets for getting something more specific to your needs will either be to...
- search Google using terms like "AS3 XML gallery tutorial" and "AS3 XML slideshow tutorial"
- take one fairly complicated tutorial and learn how it works down to understanding each element of what is being done. Once you a proper level of understanding you should be able to reason out how to create one of your own with whatever different features you prefer

Image Gallery Issue in As3

Hi,
     I am trying to implement a simple image gallery with alpha transition using as3. But an issue is occuring with this. After each image alpha transition, the stage becomes blank. The code i have used for image Gallery is following.CAn anybody help me. I am trying this for a week. but still i have a hope for make this working. So please help me.
import flash.display.Loader;
import flash.display.*;
import gs.TweenLite;
const TIMER_DELAY = 2000;
var totImages:Number;
var index:Number = 0;
var imgArr:Array = new Array();
var currentContainer:MovieClip = holder0;
currentContainer.alpha = 0;
var transTimer:Timer = new Timer(TIMER_DELAY);
//transTimer.addEventListener(TimerEvent.TIMER, startTransition);
var imgLoader:Loader = new Loader();
var myXML:XML = new XML();
var XML_URL:String = "images.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
function xmlLoaded(event:Event):void{
    myXML = XML(myLoader.data);
    processXML(myXML);
function processXML(xml){
    totImages = xml.children().length();
    for(var i=0;i<totImages;i++){
        var tempVar = xml..item[i]..image;
        imgArr.push(tempVar);
    //transTimer.start();
    currentContainer = holder0;
    loadImage();
function loadImage(){
    var url = imgArr[index];
    //ImgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressStatus);
    imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeInImg);
    var fileRequest:URLRequest = new URLRequest(url);
    imgLoader.load(fileRequest);
    currentContainer.addChild(imgLoader);
function fadeInImg(e:Event){
    TweenLite.to(currentContainer,3,{alpha:1,delay:2,onComplete:switchClip});
function switchClip(){
    if(index < totImages){
        index++;
    } else {
        index = 0;
    if(currentContainer == holder0){
        currentContainer = holder1;
    } else {
        currentContainer = holder0;
    currentContainer.alpha = 0;
    MovieClip(this.root).swapChildren(holder0, holder1);
    loadImage();
Thanks and Regards,
                     Sreelash

Hi Adrei, I have implemented the thumbnail button also. Its working but the problem is that thumbnail buttons and controls are placing behind the image container. How can i place the thumbnail buttons and control buttons over the image. You can view the result in the following url:
http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test/scrllGallAnd.html
The working swf is with the following url:
http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test/scrllGall.html
The code that i used for creating thumbnail is following
import flash.display.DisplayObject;
import flash.display.*;
import flash.display.Loader;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.text.*;
import flash.net.*;
import flash.utils.Timer;
import gs.TweenLite;
import gs.easing.*;
var xmlURL:String = "http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test1/images.xml";
var loadedImages:Array = [];
var imageURLs:Array = [];
var thumbArr:Array = [];
var imageLoader:Loader;
var prevImage:DisplayObject;
var currentImage:DisplayObject;
var thumbContainer:MovieClip;
var currThumb:MovieClip;
var prevThumb:MovieClip = null;
var showTimer:Timer;
var timerDuration:int = 5000;
var tweenDuration:int = 2;
var currentIndex:int = 0;
var activIndx:Number = 0;
var slidesHolder:Sprite;
var prvFlag:Boolean = false;
var nxtFlag:Boolean = false;
var twnFlag:Boolean = false;
var rt_lt_Flag:Boolean = true;
var myXMLURL:URLRequest = new URLRequest(xmlURL);
var xmlLoader:URLLoader = new URLLoader(myXMLURL);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(myXMLURL);
var a:int = 90;
ctrlBox.btnPlay.buttonMode = true;
ctrlBox.nextImg.buttonMode = true;
ctrlBox.prevBtn.buttonMode = true;
ctrlBox.btnPause.buttonMode = true;
ctrlBox.btnPlay.visible = false;
ctrlBox.btnPause.addEventListener(MouseEvent.CLICK,stopScroll);
ctrlBox.btnPlay.addEventListener(MouseEvent.CLICK,startScroll);
ctrlBox.nextImg.addEventListener(MouseEvent.CLICK,shwNext);
ctrlBox.prevBtn.addEventListener(MouseEvent.CLICK,shwPrev);
function xmlLoaded(e:Event):void {
     var a:int = 45;
     e.target.removeEventListener(Event.COMPLETE, xmlLoaded);
     processXML(XML(e.target.data));
function processXML(xml:XML):void {
     var len:int = xml.children().length();
     var tempVar:String;
     for (var i:int = 0; i < len; i++) {
          tempVar = "http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test1/" + xml..item[i]..image;
          //trace(tempVar)
          imageURLs.push(tempVar);
     preload();
     createThumbs();
function createThumbs():void{
    thumbContainer = new MovieClip();
    addChild(thumbContainer);
    for(var i:int=0;i<9;i++){
        var thmbHolder:MovieClip = new MovieClip();
        thumbContainer.addChild(thmbHolder);
        //MovieClip(this.root).swapChildren(currentImage, ctrlBox);
        thmbHolder.buttonMode = true;
        var thmb:thumbClass = new thumbClass();
        thmbHolder.addChild(thmb);
        thumbArr.push(thmbHolder);
        thmbHolder.name = i.toString();
        thmb.imgNum.text = (i+1).toString();
        thmbHolder.addEventListener(MouseEvent.CLICK,showImage)
        //trace(thmb.imgNum.text)
        thmbHolder.x = i*(thmbHolder.width+5)+5;
    thumbContainer.y = stage.stageHeight - thumbContainer.height;
function showImage(e:MouseEvent):void{
    var imgIndx:Number = e.target.parent.parent.name;
    prevThumb = currThumb;
    currThumb = e.target.parent.parent;
    currThumb.buttonMode = false;
    if(activIndx != imgIndx){
        prevThumb.buttonMode = true;
        currentIndex = imgIndx-1;
        shwNext(null);
        activIndx = imgIndx;
    } else {
        stopScroll(null);
function preload():void{
     var len:int = imageURLs.length;
     for (var i:int = 0; i < len; i++) {
          imageLoader = new Loader();
          imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPreloadComplete);
          loadedImages.push(imageLoader);
          imageLoader.load(new URLRequest(imageURLs[i]));
function onPreloadComplete(e:Event):void {
     e.target.removeEventListener(Event.COMPLETE, onPreloadComplete);
     if (!showTimer && loadedImages[0].content &&   loadedImages[1].content ) startShow();
function startShow():void{
     currentImage = loadedImages[0];
     currentImage.alpha = 0;
     slidesHolder = new Sprite();
     var slideMask:Sprite = new Sprite();
     var gr:Graphics = slideMask.graphics;
     gr.beginFill(0xff0000);
     gr.drawRect(0, 0, currentImage.width, currentImage.height);
     gr.endFill();
     addChild(slidesHolder);
     addChild(slideMask);
     slidesHolder.x = slideMask.x = 0;
     slidesHolder.y = slideMask.y = 0;
     slidesHolder.mask = slideMask;
     slidesHolder.addChild(currentImage);
     TweenLite.to(currentImage, 10, { alpha: 1 } );
     showTimer = new Timer(timerDuration);
     showTimer.addEventListener(TimerEvent.TIMER, slideTransition);
     showTimer.start();
function slideTransition(e:TimerEvent):void{
     var nextImage:int;
     if(rt_lt_Flag == true){
         if(nxtFlag == true){
             showTimer.stop();
             nxtFlag = false;
         nextImage = currentIndex < loadedImages.length - 1 ? currentIndex + 1 : 0;
         if (loadedImages[nextImage].content) {
              currentIndex = nextImage;
              loadedImages[currentIndex].x = slidesHolder.width;
              slidesHolder.addChildAt(loadedImages[currentIndex], slidesHolder.getChildIndex(currentImage));
              prevImage = currentImage;
              currentImage = loadedImages[currentIndex];
              showCurrent();
     } else {
         if(prvFlag == true){
             showTimer.stop();
             prvFlag = false;
         nextImage = currentIndex > 0 ? currentIndex - 1 : loadedImages.length - 1;
         if (loadedImages[nextImage].content) {
             currentIndex = nextImage;
             loadedImages[currentIndex].x = -(stage.stageWidth);
             slidesHolder.addChildAt(loadedImages[currentIndex], slidesHolder.getChildIndex(currentImage));
             prevImage = currentImage;
             currentImage = loadedImages[currentIndex];
             showCurrent();
     activIndx = currentIndex;
     //trace(currentIndex)
function showCurrent():void{
     // make sure they have proper alphas
     //prevImage.alpha = 1;
     //currentImage.alpha = 0;
     //TweenLite.to(prevImage, tweenDuration, { x: -slidesHolder.width } );
     twnFlag = true;
     if(rt_lt_Flag == true){
         TweenLite.to(currentImage, tweenDuration, { x: 0, onUpdate:onTweenProgress, onComplete: removePrevious } );
     } else {
         TweenLite.to(currentImage, tweenDuration, { x: 0, onUpdate:onTweenProgress, onComplete: removePrevious } );
function onTweenProgress():void{
    if(rt_lt_Flag == true){
         prevImage.x = currentImage.x - prevImage.width;
    } else {
        prevImage.x = currentImage.x + prevImage.width;
function removePrevious():void {
     if (slidesHolder.contains(prevImage)) slidesHolder.removeChild(prevImage);
     twnFlag = false;
function stopScroll(e:MouseEvent):void{
    ctrlBox.btnPlay.visible = true;
    ctrlBox.btnPause.visible = false;
    showTimer.stop();
function startScroll(e:MouseEvent):void{
    rt_lt_Flag = true;
    ctrlBox.btnPlay.visible = false;
    ctrlBox.btnPause.visible = true;
    resetListener(timerDuration=5000,tweenDuration=2)
function shwNext(e:MouseEvent):void{
    if(twnFlag == false){
        rt_lt_Flag = true;
        stopScroll(null);
        nxtFlag = true;
        resetListener(timerDuration=0,tweenDuration=1)
function shwPrev(e:MouseEvent):void{
    if(twnFlag == false){
        rt_lt_Flag = false;
        stopScroll(null);
        prvFlag = true;
        resetListener(timerDuration=0,tweenDuration=1)
function resetListener(timerDuration,tweenDuration){
        showTimer.removeEventListener(TimerEvent.TIMER, slideTransition);
        showTimer = new Timer(timerDuration);
        showTimer.addEventListener(TimerEvent.TIMER, slideTransition);
        showTimer.start();
Can you help me on how can i swap the depth of images and control buttons.
Thanks and regards,
Sreelash

Image gallery. How to click on image to advance to next image?

Flex 4, flash builder 4.6.
This gallery has a row of numbers. When you click on a number, a photo displays above. Each number represents a photo from data.xml. Works good. Now I want to click on a photo that is already displayed and cause the next photo in the series to display. How do I go about doing this? Thanks.
<s:Application creationComplete="service.send()">
<fx:Declarations>
        <s:HTTPService id="service" url="data.xml" result="serviceHandler(event)"></s:HTTPService>
</fx:Declarations>
<fx:Script>
        <![CDATA[
               import mx.collections.ArrayCollection;
               import mx.rpc.events.ResultEvent;
               [Bindable]
               private var images:ArrayCollection;
               private function serviceHandler(event:ResultEvent):void{
                    images = event.result.gallery.image;
        ]]>
</fx:Script>
<s:Image source="assets/poster/{imagesList.selectedItem.pic}" />
<s:List id="imagesList" dataProvider="{images}">
     <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:Label text="{data.number}" fontSize="12" />
                </s:ItemRenderer>
            </fx:Component>
      </s:itemRenderer>
</s:List>
</Application>
data.xml
<gallery>
    <image>
        <number>01</number>
        <pic>photo01.jpg</pic>
    </image>
    <image>
        <number>02</number>
        <pic>photo02.jpg</pic>
    </image>
</gallery>

Hi..
i have a simaliar problem, can anyone help..
Ive made a gallery using xml and the sparks list component. that displays images in a horz list which ofcourse can be clicked to see the larger image, but then ofcourse to view the to other images or the next image you have to hit the back button and then select another.
How can i swipe on the large image for move to the next item without having to go back to list.    Thanks.
here is what ive got so far..
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        title="Page {id1}"
        destructionPolicy="never"
        actionBarVisible="true"
        viewActivate="init()">
    <fx:Script>
        <![CDATA[
            import valueObjects.Bookpage;
            [Bindable]private var id1:String;
            [Bindable]private var thumbimage:String;
            [Bindable]private var largeimage:String;
            private function init():void
                pgImage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
                this.addEventListener( TransformGestureEvent.GESTURE_SWIPE, handleSwipe );
                var thisbpage:Bookpage = data as Bookpage;
                id1 = thisbpage.id;
                largeimage = thisbpage.largeimage;
            private function onZoom(event:TransformGestureEvent):void
                var mySprite:Sprite = pgImage as Sprite;
                if(mySprite.scaleY.valueOf() >= 1)
                    mySprite.scaleX *= event.scaleX;
                    mySprite.scaleY *= event.scaleY;
                else
                    mySprite.scaleX = 1;
                    mySprite.scaleY = 1;
            private function handleSwipe(event:TransformGestureEvent):void
                // Swipe was to the right
                if (event.offsetX == 1 ) {
                    // push the PreviousView without any data using default
                  some help here. pls ..swipe to prev image if any
                    // Swipe was to the left
                else if (event.offsetX == -1 ) {
                    // push the NextView withour any data using
                    some help here. pls ..swipe to next in list
                // Swipe was to the down
                if (event.offsetY == 1 ) {
                    // push the PreviousView without any data using default
                    // ViewTransition
                    this.actionBarVisible = true;
                    // Swipe was to the up
                else if (event.offsetY == -1 ) {
                    // push the NextView withour any data using
                    this.actionBarVisible = false;
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:SlideViewTransition id="slideUp" duration="300" direction="up" transitionControlsWithContent="false"/>
    </fx:Declarations>
    <s:states>
        <s:State name="portraitPhone" stateGroups="phone,portrait"/>
        <s:State name="landscapePhone" stateGroups="landscape,phone"/>
    </s:states>
    <s:actionContent>
        <s:HGroup>
        <s:Button icon="assets/qsearch.png" click="navigator.popView(slideUp)"/>
        <s:Button icon="assets/prev.png"/>
        <s:Button icon="assets/next.png"/>
        </s:HGroup>
    </s:actionContent>
    <s:Scroller x="0" y="0" width="100%" height="100%" >
        <s:HGroup>
            <s:Image id="pgImage" left="0" top="11" source="assets/gallery/{largeimage}" />
        </s:HGroup>
    </s:Scroller>
</s:View>

How can I create an image gallery with "next" buttons?

So I am almost done with my portfolio site (YES!)..now I just need the actual content (the images). My site is written in AS3.
I've watched many tutorials on how to create an image gallery (auto scrolling ones, scrolling ones that require mouse hover, etc etc), but those aren't what I am looking for.
I want a gallery that looks exactly like this one here:
http://jalbum.net/res/help/integrating-tutorial.html
I have a lot of work to display in my porfolio so there must be arrows at the end of the thumbnails so I can add more stuff. So I am just stumped on how to make the image gallery work with the ability to scroll for more photos with the click of the arrows.
Any ideas? Thank you.

Watching tutorials and learning from them are two different things. If you have learned from them you should be able to use what you have learned to devise a gallery such as the one you link to. If you have learned from them and cannot use what you learned, then you probably need to find/learn more.
If you study the design you linked you should be able to reason out what elements you need to devise... it is not overly complicated.
For the large picture you could have a Loader into which you load whatever image is selected from the thumnails. To get a brief transition you could just set the alpha of the Loader to 0 when an image change is occuring and gradually fade it in after the image has loaded.
The greatest challenge you are likely to face is in getting the thumbnails to advance back and forth depending on which is selected. All of the thumbs would be placed in a container (movieclip or sprite) and that would be masked so that only a portion of them is visible.
All thumbs that are not selected have their alpha property set to some value less than 1. Selecting one calls for the file it associates with to be loaded into the Loader. If the choice happens to lie off screen, then you need to move the movieclip that contains all of the thumbs some set value in the right (+x) or left (-x) direction.
If you want the thumbnails to wrap infinitely then when one leave the thumbnails area for movement in a direction, you need to take that thumb and relocate it to the other end of the thumbs in the container.

Is there a way to create a CSS image gallery with caption?

Hi everyone,
Ive been using the disjoint rollover, but I only have one
thing that I want to add to it—a caption right underneath an
image.
Besides using that Project Seven plug-in, is there a way to
create an image gallery without using layers? Or is layers the only
way to do it? All I want (words of doom, huh?) is a thumbnail to be
able to switch and image and add a caption to it. Can anyone point
me in the right direction? Or is that Project Seven plug-in deal my
best bet? What about Set Text of Layer in DW.
Oh yeah, Im still using DW with CSS sprinkled in..any help?
Thanks in advance.
-C

> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers?
Of course.
> What about Set Text of Layer in DW.
That would do it, and it's not necessary that the layer stay
a layer after
you have done it, either. I do this frequently - make a
layer, apply the
behavior, and then remove the position:absolute from the div,
and place it
where I want it.
See the demo here -
http://dreamweaverresources.com/tutorials/settextoflayer.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"psypent81" <[email protected]> wrote in
message
news:eus555$lac$[email protected]..
> Hi everyone,
>
> Ive been using the disjoint rollover, but I only have
one thing that I
> want to
> add to it?a caption right underneath an image.
> Besides using that Project Seven plug-in, is there a way
to create an
> image
> gallery without using layers? Or is layers the only way
to do it? All I
> want
> (words of doom, huh?) is a thumbnail to be able to
switch and image and
> add a
> caption to it. Can anyone point me in the right
direction? Or is that
> Project
> Seven plug-in deal my best bet? What about Set Text of
Layer in DW.
>
> Oh yeah, Im still using DW with CSS sprinkled in..any
help?
>
> Thanks in advance.
>
> -C
>

Creating an image gallery

Hi all,
I am trying to work out how to create an image gallery on a
page whereby there is a set of thumbnails to the side and the
relevant large image opens adjacent to the thumbnails when they are
moused over.
I have done this using the hide/show layers function but the
output appears incosistently in different browsers and/or window
sizes. I had in mind some adaptation of the "swap image" behaviour
that would open the swap in a different position? Or alternatively
making the layers approach display consistently?
The layers version of the page can be
viewed
here
Any suggestions or guidance would be greatly appreciated,
thanks in advance,
Graham

On Thu, 1 Feb 2007 15:25:09 +0000 (UTC), "hydroculture"
<[email protected]> wrote:
>I don't know the answer - wish I did, but I have been
using a substitute where
>I click on the thumbnail - which via a hyperlink takes me
to a page where the
>large image appears. Not as neat as what we both want ,
but gets the same
>effect,
If clicking a thumbnail is an option then this is a better
solution -
a free extension from PVII:
http://www.projectseven.com/tutorials/images/showpic/index.htm
Steve
steve at flyingtigerwebdesign dot com

How do you build an image gallery in Flash CS3 actionscript3?

I am building my entire website in flash cs3, actionscript3
but I really need help building an image gallery. What I need is a
horizontal scroll bar that contains thumbs within it and then loads
the full size image right above the scroll bar. Anyone has any
suggestions for books, tutorials or even safe places to purchase
the fla that I can customize it?

if you want help understanding as3 check:
http://www.senocular.com/flash/tutorials/as3withflashcs3/
if you want to purchase a custom fla that does exactly what
you want send me an email via my website.

Need help with Image Gallery tutorial.

Hi all,
No response from Apex Listener Forum...moved here....
Apex Listener - 2.0.2.133.14.47
Apex - 4.2.2.00.11
When running Image Gallery application as per tutorial, page just show a blank screen with no image upload button.
Am using Firefox 22.0 and Chrome 28.0.1500.72.
Firebug does not display any script error.
Had recreated tutorial on apex.oracle.com with same result as above.
http://apex.oracle.com/pls/apex/f?p=4550:1:::::F4550_P1_COMPANY:HANAMIKE
Workspace: HANAMIKE
Username: [email protected]
Password: yesla
Using username= resteasy_admin, Password=resteasy_admin to run on apex.oracle.com.
Had modified tutorial JS below :
var workspace_path_prefix = 'resteasy'; => var workspace_path_prefix = 'hanamike';
Another odd problem was when trying out the RESTFUL service as per tutorial when clicking the 'TEST' button, encountered error 404.
Problem due to extra workspace name in URL as below:
http://apex.oracle.com/pls/apex/hanamike/hanamike/gallery/images/
Had to manually modify it to:
http://apex.oracle.com/pls/apex/hanamike/gallery/images/
Notice that the Listener version on apex.oracle.com is:
APEX_LISTENER_VERSION
2.0.3.165.10.09
Thanks in advance.
Zack
Message was edited by: Zack.L

Hi Zack,
Thanks for providing the login credentials to your workspace. I took a look at your RESTful Service and associated application, and noticed that there was something missing - the "Upload Image" button! So it looks like the 'Create the Gallery Application' section is missing a step to create a HTML region, with region template "Button Region without Title", and with its region source set to the following:
<a class="button" id="upload-btn">Upload Image</a>
You'll see in the JS that there's a reference to #upload-btn, but no such object existed on your page. I created a copy of your app, which includes this new HTML region, and you'll see that I've uploaded an image as a demo. I've contacted the APEX Listener team re the missing instruction, so that will hopefully be rectified in the next release. Apologies for the confusion, but hopefully you're back on track now. As for the behaviour you've noticed with the URL generated by the 'Test' utility, thanks for bringing this to our attention. I'll do some further investigation there, and log a bug if required.
Regards,
Hilary

Help! I need a special image gallery!!

Hello!
anyone know if you can make an image gallery with thumbnails and where each one is linked to a photo slide? Also require that the thumbnails act as a color button, not appear like a thumbnail photo. I need help! Thanks in advance!
PD: sorry for my english skills!!!

Hello,
You can use Blank Composition Widget to achieve this.
Seems like you are trying to create something similar to : http://muse.adobe.com/widgets/composition/slideshow-ouatt.html
You can insert your images in the Target containers and can use Fill colors for different states of trigger containers.
Please refer to the video which might help : http://tv.adobe.com/watch/muse-feature-tour/muse-trigger-target/
Regards,
Sachin

Image gallery in SAP EP

Hi folks,
I'd like to receive some comments on the topic "Image gallery in SAP EP" as quite often there is a need for storing content in form of images in the KM and the standard renderers available do not satisfy advanced scenarios or non-SAP standard environments.
As there is heaps of image gallery libraries around for usage in standard web pages and open portals - mostly based on Java or Javascript - I wonder if these can be easily used within SAP EP.
So my question: Did anyone integrate a free image gallery software into SAP EP and are there any drawbacks/experiences or remarks you might want to share with me?!
The gallery should sport thumbnails previews, tagging, additional attributes, convenience functions (mass-renaming, mass-resizing), flashy previews, etc.
Thanks for your help!
regards,
Christian

Well, we are surprised we haven't seen this before but here's
what we discovered.
Safari converts uppercase letters in attributes to lowercase.
Since XML is case sensitive, therefore IMAGEID becomes
imageid. Since your data references are still uppercase, they fail
to match and you get undefined.
Uppercase attributes are rare, hence this is the first we
have seen of this error.
To see this in action, try this in your page:
<script>
var rows = datasetname.getData();
if (rows && rows.length)
alert(Spry.Utils.serializeObject(rows));
</script>
To solve this, convert your XML files to use lowercase
attribute names.
We will write this up somewhere.
Thanks for posting.
We are pleased to see a good use of Spry data, effects and
widgets on one site. I will add your site to our wiki page, if you
don't mind.
http://labs.adobe.com/wiki/index.php/Spry:SprySites
Thanks,
Donald Booth
Adobe Spry Team

User-managed image gallery in template-based html site?

I've created a simple, template-based html/css site for a client and they've asked for a set of sales pages for their vans and cars. The idea is that there'll be an entry page, which has an itemised list (thumbnail pic, title and a couple of sentences), which then links to individual template-based pages on which the full information is listed.
So far I've given the client a copy of Macromedia Contribute. No problems there. However, it would be great to have a relatively simple image gallery which will display up to, say, 10 pix.
The problem is that without a complex back-end CMS, I need to find a user-friendly (ie, not technical) gallery system which I can either embed into the template, or set up so it can be easily added to a page.
Am I being overly optimistic here, or is there an option (ideally free, of course!) which someone can recommend? My ideal is something that could be accessed and updated through Contribute, but if there's a standalone app which can do it once the page has been created in Contribute, that would be fine.
Thanks in advance.
Trent

I've created a simple, template-based html/css site for a client and they've asked for a set of sales pages for their vans and cars. The idea is that there'll be an entry page, which has an itemised list (thumbnail pic, title and a couple of sentences), which then links to individual template-based pages on which the full information is listed.
So far I've given the client a copy of Macromedia Contribute. No problems there. However, it would be great to have a relatively simple image gallery which will display up to, say, 10 pix.
The problem is that without a complex back-end CMS, I need to find a user-friendly (ie, not technical) gallery system which I can either embed into the template, or set up so it can be easily added to a page.
Am I being overly optimistic here, or is there an option (ideally free, of course!) which someone can recommend? My ideal is something that could be accessed and updated through Contribute, but if there's a standalone app which can do it once the page has been created in Contribute, that would be fine.
Thanks in advance.
Trent

Image gallery around text

Hi there,
I'm new to web design and not 100% sure if I should be asking this in a Dreamweaver or Flash forum, but I'm hoping someone would be able to advise me on what to do.
I want to incorporate an image gallery into a Dreamweaver page. I've made the gallery in Flash. When rolling over small images at the bottom, an enlarged version will appear on top. Next to the enlarged image will be text. From what I understand, for search engine purposes, usability etc it would be better if this text was not in Flash. In fact, I would like the layout in terms of how the pics and text are positioned to be in a similar fashion as this site: http://www.calcotmanor.co.uk/meetings_events/barn.htm where the text sits next to and above the Flash elements.
I have tried this using tables in Dreamweaver and inserting the swf however I do not know how to incorporate this so that the image gallery and the enlarged image form an 'L' shape around the text. I'm not set on using Flash necessarily - if there is another way I can do this using Dreamweaver (I don't need the images to change by themselves, just to show the enlarged version when user hovers over thumbnails) then I would appreciate tips on that!
Many thanks in advance for your help!

On Sat, 18 Jan 2014 17:58:33 +0000, StonyArc [MVP] wrote:
>Couldn't you similate this behaviour for the time being with a horizontal gallery and loading each item specifically for that area.
>
>E.g. paragraph per item and sideload the images in another gallery
>
>It's not entirely what's needed but it will make it a bit more userfriendly.
I actually tried that and hated it. I'd be better off with manual navigation at
the bottom of each page (these are sub pages)
-- Barb Bowman

Image gallery using FancyBox

Hi there,
Does anyone knows how and where to implement code on the page in order to get image gallery within the same page using FancyBox. FancyBox can be downloaded at .net
I want to have a group of thumbnails, click on them and
the box pops up, and be able to click through to the next one.
Im using iWeb '06 and MassReplaceIt.
Thanks in advance,
Goran

Jon Fritz II wrote:
Maybe turn off the entire fancybox gallery's container and turn on a simplified gallery container when the screen hits the right size.
Hi Jon,
I did think along those lines but really wanted to find a more steamlined solution, which I think the jQuery option may provide if not then I may have to have a re-think and deploy an alternative gallery, as you suggest, with fewer images.
Thanks for your input.
Is it just me constantly coming up against problems which you just cannot see until they hit you smack in the face or is this happening to everyone else.
I'm going to have to triple my quotes in future!

Advance image gallery in as3.0

Similar Messages

Maybe you are looking for