Simple Image Gallery for iWeb

Hi there,
Hoping someone can help. I've been searching high and low for an incredibly simple image web gallery generator. It simply has to have a larger image to the left and 3/4 smaller thumbnails to the right which, when clicked on, will appear in the bigger window. That's it! I don't want any text on it at all - just on a white background. The intention is to then upload the individual galleries of my work and use iFrames within my iWeb created website to point towards the galleries.
Please can anyone help and point me in the direction of a good bit of software that will allow me to do this. I have no HTML experience to speak of.
Thanks
Sam

Sam ~ This +"HTML Picture Viewer"+ would be easiest to implement using iWeb '08's +HTML Snippet+ window:
http://web.mac.com/catucker/InsideOutside/PictureViewer.html
...it has the larger image to the right, but I suppose someone here could tell you how to reverse that. And the image changes not on a click of a thumbnail, but on mouseover.

Similar Messages

Flash simple image gallery problem

Hello I have what I think is an easy problem to solve but I
can´t find a solution.
I´m creating an image gallery with thumbnails on the
right inside a symbol so that
they can all fade in at the same time, and the bigger images
on the left that also fade in.
I can only fit 8 thumbnail images at a time, and want to have
more than that.
So I´ll add an arrow below the thumbs so that when you
click on it, you can see the other thumbs.
I have the first 8 thumbs on the first frame of a symbol and
the rest on the second frame.
My problem is that the symbol that contains the thumbs is a
graphic symbol, so that the thumbs in it, that are button symbols
can be clicked on. I tried using button and movie clip symbols for
the thumbnails container but then the buttons (thumbs) can´t
be clicked any more.
That was not a problem till I had to add more than 8 thumbs,
cause i need to give the container an instance name, and graphic
symbols can´t have one.
Here is the link to download the .fla
www.ginkgo.com.uy/old/downloads/handheld_pink.fla
In case I didn´t make my self clear, what I need is to
know if there´s a way to have a movie clip or button symbol
that can have buttons in it that can be clicked on.
I hope I didn´t give you a headache.
Thanks a lot, Marcelo.

thanks.
that´s what i thought but, if i convert the container to
a button symbol the thumbs can´t be clicked anymore.
And if I convert the container to a movie clip like you
suggested, then if I click on any part of the container it
just goes to the second frame of the movie clip container, if
i click again it goes back to the first frame and so on.
But there is no action script for the container at all,
please try it out with the fla i uploaded.
i can´t figure it out.
thanks

Simple Image Editing for Mac

Hey,
under Windows I used Ulead Photo Impact for simple image editing. Is there something comparable for OS X?
Thanks

GraphicConverter:
http://lemkesoft.de/
It does cost about $30 but most features are enabled in trial mode. It is very capable of drawing. You'll find it so useful you'll want to pay for it!

Optimum Image Sizes for iWeb 08?

I'm trying to find an optimum size for images for an online portfolio. . I have the photos in their native resolution, and I'm wondering what size should I downsize them to for the slideshow view. . . any and all suggestions are welcome and appreciated.

It really depends on how many photos you want to load and what quality you need.
You have to trade of these against the download speed of your webpage.
The iWeb Photos or Albums pages are not the best way to present your work.
Have a look at flash.....
http://www.airtightinteractive.com/viewers/
http://jalbum.net/

How to make a simple image gallery with click through?

Hello,
I'm wanting to make a webpage that showcases some images, very much like this one   :    http://www.steviedance.com/?page_id=3868#1
I want button where you can click to the next image, and have only the next image load, not the whole page like the link above....
Can this be done in dreamweaver? Or is this something do to in flash? What should I be seraching for when looking for a tutorial for this?
Any help would be greatly appreciated
Thanks !!
Lucy

If your read your Plug-in's documentation, they provide code examples on this page to get you started:
http://slidesjs.com/#overview
<!doctype html>
    <head>
        <title>Title</title>
        <style type="text/css" media="screen">
            .slides_container {
                width:570px;
                height:270px;
            .slides_container div {
                width:570px;
                height:270px;
                display:block;
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="slides.js"></script>
        <script>
            $(function(){
                $("#slides").slides();
        </script>
    </head>
    <body>
        <div id="slides">
            <div class="slides_container">
                <div>
                    <img src="image1.jpg">
                </div>
                <div>
                    <img src="image2.jpg">
                </div>
                <div>
                    <img src="image3.jpg">
                </div>
                <div>
                    <img src="image4.jpg">
                </div>
            </div>
        </div>
    </body>
</html>
Nancy O.

The best Free Flash Image Gallery

Which is the best free flash image gallery for Iweb?

There is no best. That's because they are all different from each other and each brings different properties to the table. Here are some to consider:
SimpleViewer and Flash Album Exporter
Flash Album Exporter Postcard and AutoViewer Slideshow Themes
Jalbum Examples - Jalbum has over 100 skins/themes to choose from.
OT

Need Help With Image Gallery

Hey all, I need a simple image gallery to load when you click a button. I've tried shadowbox but have had absolutely zero luck. I'm not sure how to load it from a flash file and I know there is work that has to be done outside of flash like in the root folder. All I need is for a simple image gallery, nothing fancy, to open when I hit a button. If anyone could explain how to use shadowbox in lamens terms or knows how to easily script a gallery that would be amazing.

What script version is your target? AS2 or AS3

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

Flash Image Gallery load problem

This a familiar problem that has been put up here a thousand
times I'm sure but as yet I haven't been able to find a solution
for it. I've put together a simple image gallery using Flash and an
XML file. It works perfectly on my system but there are issues with
the images loading properly when I put them onto my site. I know
very little Flash, I've been using a pre-made gallery that I
downloaded but since it works on my computer I assume I should be
able to get it to work online too. The thumbnails for the file seem
to work fine and the information from the XML file is obviously
being accessed, however the main images are not loading. I've
included all the code below (Actionscript, XML and the Web coding),
if someone could help me before I put my fist through a wall that
would be great:
Actionscript
stop();
//specify the url where folder is located below (if
applicable)
toadd="";
t = 0;
l = 0;
theside = 1;
galxml = new XML();
galxml.load(toadd+"flash/fashion/easy-xml-gallery-2.xml");
galxml.ignoreWhite = true;
galxml.onLoad = function(success) {
if (success) {
maxnum = galxml.firstChild.childNodes.length;
for (n=0; n<maxnum; n++) {
specs = galxml.firstChild.childNodes[n];
//TEXT FOR SIDE NAV
duplicateMovieClip(side.thumbs.thumbsb, "thumbs"+n, n);
thumbclip = eval("side.thumbs.thumbs"+n);
thumbclip._x = n*100;
thumbclip.thetitle = specs.attributes.name;
thumbclip.theurl = specs.attributes.theurl;
thumbclip.thecaption = specs.attributes.caption;
thumbclip.thenum = n+1;
thumbclip._alpha = 100;
loadMovie(toadd+"/flash/fashion/images/"+(n+1)+"b.jpg",
thumbclip.thumbload.thumbload2);
play();
side.thumbs.thumbsb._visible = false;
mainperc.onEnterFrame = function() {
if (mainperc.perc<98) {
mainperc._alpha += 5;
mainperc.perc = Math.round(l/t*100);
mainperc.perctext = mainperc.perc+"%";
mainperc.ltext = "OF THUMBNAILS LOADED
("+Math.round(t/1024)+"kb)";
if (mainperc.perc>98) {
//mainperc._alpha -= 5;
if (mainperc._alpha<-50) {
delete mainperc.onEnterFrame;
XML
<gallery>
<pic1 name="ONE">
<pic2 name="TWO"/>
<pic3 name="THREE"/>
<pic4 name="FOUR"/>
<pic5 name="FIVE"/>
<pic6 name="SIX"/>
<pic7 name="SEVEN"/>
<pic8 name="EIGHT"/>
<pic9 name="NINE"/>
<pic10 name="TEN"/>
</gallery>
Webpage coding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>shorty designs</title>
<style type="text/css">

</style>
<script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<p class="Sections"><img src="images/version5.jpg"
alt="shorty logo" width="166" height="85" /><span
class="contact">Contact by email:
[email protected]</span></p>
<p class="Sections">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','536','height','518','align','right','src','/flash/fashion/fashion','quality','high',' pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Shockwa veFlash','movie','/flash/fashion/fashion'
); //end AC code
</script>
<noscript>
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
width="536" height="518" align="right">
<param name="movie" value="/flash/fashion/fashion.swf"
/>
<param name="quality" value="high" />
<embed src="/flash/fashion/fashion.swf" width="536"
height="518" align="right" quality="high" pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash"></embed>
</object>
</noscript>
</p>
<p class="section_back">Fashion</p>
<p class="section_reg"><a
href="travel.html">Travel</a></p>
<p class="section_reg"><a
href="wedding.html">Wedding</a></p>
<p class="section_reg"><a
href="layout.html">Layout</a></p>
<p class="section_reg"><a
href="personal.html">Personal</a></p>
</div>
</body>
</html>

Yep, these are the directions:
this is very easy to update. You only need to edit the simple
xml file and add images to the images folder.
step 1.
add as many images as you like at the size 536 x 403
step 2.
create thumbnails for the above images at size 100x75
step 3.
update the xml file with the name url and caption for each
image. (to take the url off just click through to the button on the
main picture and delete the script that says getURL(theurl)
step 4.
open flash file and change the 'toadd' variable to the folder
where the flash file and image folder is located on your site.
thats it done.
The frustrating thing now is that the files are finally being
found but the thumbnail function has decided to mess up.

Image gallery From an XML file...

Will flash reconize an XML file that is parameter based (Call
Functions) into a database to create a type of listing service to
show homes for sale?
My client is wanting a basic image gallery for now that will
later become a a fullfledged interactive document later down the
road for showing options in the homes they build. First, they have
Spec homes that they want to showcase (simply put these are homes
they already built and are sitting on the property that are move in
ready).
Step 1:
The end user would visit an HTML (CFM) document where they
would choose there search criteria.
Step 2:
then another page would show with an exterior photo of the
home, and a breif description where the user would select the home
they want to view more infomation.
Step 3:
This then would load the image viewer which is the flash
file, that would call to the XML file to load the parameters to
which home model to show.
The home will have a unique home model name in which the
photos are labeled accordingly the same way...
Exterior = ModelHomeName.jpg
Image 1 = ModelHomeName_1.jpg
Image 2 = ModelHomeName_2.jpg
Image 3 = ModelHomeName_3.jpg
Image 4 = ModelHomeName_4.jpg
Image 5 = ModelHomeName_5.jpg
etc...
Is there a certain way flash has to read the XML file with
parameters to translate it? Or what is the quickest possible way?
Thanks,
Eric

Any luck anyone?

Image gallery issue

If a mod could delete my other post as I am quite far on from that and now having different issues. Thanks.
I am really stuck. I will try my best to explain things clearly. I am making an image gallery and I got the code from this gallery here.
http://www.flashmo.com/preview/flashmo_122_3d_curve_gallery
I made some changes to make it how I wanted it, nothing drastic though. So now I have a nice gallery.
Explaining what I am trying to do will better help explain things. I am creating a modelling agency website. The gallery I created above will display an individual image of every model in the agency (which it does). Now when one of the model images is clicked, I then need it to load another image gallery which contains the complete set of images for that model, plus some of their information etc.
The way I am approaching it at the moment is to create an individual image gallery for every model in its own fla file. If say the first model is clicked (image 1) it will load the corresponding swf (1.swf). I am not sure how good it is loading an swf into what I already have, but couldnt think of another way. So now I have a seperate image gallery just to test things out, and I need to load it into my original image gallery.
So, I will show the code for the first gallery (which displays the individual images of each model). The important methods are p_click (which hides the first gallery and loads the external swf), and on_pic_loaded (which displays the external swf).
I hope you understand what I am attempting, as I dont know if I have explained it right as my brain is going dead! (although I am liking the challenge).
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import caurina.transitions.*;
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;
var container_x:Number = stage.stageWidth * 0.5;
var container_y:Number = stage.stageHeight * 0.5 + 160;
var container:Sprite = new Sprite();
container.x = container_x;
container.y = container_y;
addChild(container);
var scene:Scene3D = new MovieScene3D(container);
var cam:Camera3D = new Camera3D();
cam.zoom = 6;
tn_url_target.visible = false;
tn_title.text = "";
tn_desc.text = "";
tn_url.text = "";
loading_info.text = "";
url_button.visible = false;
var no_of_ring:Number = 1;
var angle:Number = 0;
var p_dict:Dictionary = new Dictionary();
var pa:Array = new Array();
var filename_list = new Array();
var url_list = new Array();
var url_target_list:Array = new Array();
var title_list = new Array();
var description_list = new Array();
var folder:String = "photos/thumbs/";
var i:Number;
var total:Number;
var flashmo_xml:XML = new XML();
var pic_loader:Loader = new Loader();
var mLoader:Loader = new Loader();
var xml_loader:URLLoader = new URLLoader();
xml_loader.load(new URLRequest("thumbnail_list_5.xml"));
xml_loader.addEventListener(Event.COMPLETE, create_thumbnail);
function create_thumbnail(e:Event):void
    flashmo_xml = XML(e.target.data);
    total = flashmo_xml.thumbnail.length();
    var angle_per:Number = Math.PI * 2 * no_of_ring / total;
    for( i = 0; i < total; i++ )
        filename_list.push( flashmo_xml.thumbnail[i][email protected]() );
        url_list.push( flashmo_xml.thumbnail[i][email protected]() );
        url_target_list.push( flashmo_xml.thumbnail[i][email protected]() );
        title_list.push( flashmo_xml.thumbnail[i][email protected]() );
        description_list.push( flashmo_xml.thumbnail[i][email protected]() );
        var bfm:BitmapFileMaterial = new BitmapFileMaterial(
            folder + flashmo_xml.thumbnail[i][email protected]());
        bfm.oneSide = false;
        bfm.smooth = true;
        var p:Plane = new Plane(bfm, 100, 100, 2, 2);
        scene.addChild(p);
        var p_container:Sprite = p.container;
        p_container.name = "flashmo_" + i;
        p_dict[p_container] = p;
        p_container.buttonMode = true;
        p_container.addEventListener( MouseEvent.ROLL_OVER, p_rollover );
        p_container.addEventListener( MouseEvent.ROLL_OUT, p_rollout );
        p_container.addEventListener( MouseEvent.CLICK, p_click );
        p.rotationY = - (i * angle_per) * (180/Math.PI) + 90;
        p.x = Math.cos(i * angle_per) * 300;
        p.z = Math.sin(i * angle_per) * 300;
        p.y = Math.floor( i / 22 ) * 5;
function startLoad()
    var mLoader:Loader = new Loader();
    var mRequest:URLRequest = new URLRequest("/subgallery/1.swf");
    mLoader.load(mRequest);
function p_rollover(me:MouseEvent)
    var sp:Sprite = me.target as Sprite;
    Tweener.addTween( sp, {alpha: 0.5, time: 0.5, transition:"easeOutExpo"} );
function p_rollout(me:MouseEvent)
    var sp:Sprite = me.target as Sprite;
    Tweener.addTween( sp, {alpha: 1, time: 0.4, transition:"easeInExpo"} );
function p_click(me:MouseEvent)
    var sp:Sprite = me.target as Sprite;
    var s_no:Number = parseInt(sp.name.slice(8,10));
    var mRequest:URLRequest = new URLRequest("subgallery/1.swf");
    mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_pic_loaded);
    mLoader.load(mRequest);
    Tweener.addTween( container, { y: 1200, time: 0.6, transition:"easeInExpo" } );
function goto_URL(me:MouseEvent)
    navigateToURL(new URLRequest(tn_url.text), tn_url_target.text);
function on_open(e:Event):void
    loading_info.text = "Loading... 0%";
function on_progress(e:ProgressEvent):void
    var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
    loading_info.text = "Loading... " + percent + "%";
function on_pic_loaded(e:Event):void
    addChild(e.currentTarget.content);
    //addChildAt(mLoader, 1);
    mLoader.x = Math.round(stage.stageWidth - mLoader.width) * 0.5;
    mLoader.y = Math.round(stage.stageHeight - mLoader.height) * 0.5;
    //mLoader.addEventListener(MouseEvent.CLICK, remove_pic);
    Tweener.addTween( mLoader, { alpha: 1, time: 0.8, transition:"easeInExpo" } );
    removeEventListener(Event.ENTER_FRAME, render);
function remove_pic(e:Event):void
    Tweener.addTween( pic_loader, { alpha: 0, time: 1, onComplete:function() { removeChild(this); } } );
    Tweener.addTween( container, { y: container_y, time: 1, delay: 1, transition:"easeOutExpo"} );
    addEventListener(Event.ENTER_FRAME, render);
    tn_title.text = "";
    tn_desc.text = "";
    tn_url.text = "";
    url_button.visible = false;
addEventListener(Event.ENTER_FRAME, render);
function render(e:Event):void
    var distance_x:Number = (stage.mouseX - 400) * 0.0001;
    angle += distance_x;
    cam.x = - Math.cos(angle) * 150;
    cam.z = Math.sin(angle) * 150;
    scene.renderCamera(cam);
Current issues as the moment is firstly, I dont know if this is the best way to achieve what I want. Maybe there is a better option someone could tell me about, but you have to remember that each image displayed here will have multiple images to go with it.
In terms of what I am attempting above, I currently get
Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: file:///C|/Users/Nick/Desktop/gallery/gallery.xml
    at _1_fla::MainTimeline/frame1()
I assume its a url error so I changed all urls in both fla's to contain the whole url path. Didnt seem to work though unless I missed something.
Any advise on absolutely anything will be so appreciated.
Many thanks
Nick

Sorry about that. If you can check my history, I normally always thank people who have helped, and I was intending to go back on the last few to sort them out. Just got my first job so it has been rather hectic and been stressing out to much. Also, I do things slightly different to other people. If I receive a correct answer (which I normally do thank), I tend not to actually reply but to thank instead, mainly because if I reply I am pushing unanswered questions further down the list and eventually out of view. I will go back and sort out the thanks I owe.
In terms of asking the mods, other forums I visit are normally moderated by the community, so I assumed that someone like yourself might be the moderator.
I tottally understand what you are saying, and as I say, I am normally on top of this. Will go back now and sort out the thanks.
Sorry for the delay.
Nick

Image gallery tweening issue

Hi,
I use this smooth, nice (and simple) image gallery, and I am very happy with it. However sometimes some of the images stops when rolling in, and I have to press Fw again to jump to the next one. I can't figure out where the bug lies, as I mentioned it appears rarely but it blows up the whole thing.
Maybe somone could take a look at it:
Thanks!
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.utils.Timer;
import flash.events.TimerEvent;
var currentImg:uint = 0;
image_2.x=-1500;
var imgArrayFw:Array = new Array(image_2, image_1, image_3, image_4, image_5, image_6);
var imgArrayBw:Array = new Array(image_2, image_1, image_3, image_4, image_5, image_6);
buttonFw_btn.addEventListener(MouseEvent.CLICK, doNextTween);
function doNextTween(e:MouseEvent):void
    imgArrayFw[currentImg].x = -imgArrayFw[currentImg].width;
    var myTween:Tween = new Tween(imgArrayFw[currentImg], "x", Strong.easeInOut, imgArrayFw[currentImg].x,0, 2, true);
    addChild(imgArrayFw[currentImg]);
addChild(buttonFw_btn);
addChild(buttonBw_btn);
currentImg = (currentImg+1)%imgArrayFw.length;
buttonBw_btn.addEventListener(MouseEvent.CLICK, doPrewTween);
function doPrewTween(e:MouseEvent):void
    imgArrayBw[currentImg].x = imgArrayBw[currentImg].width;
    var myTween:Tween = new Tween(imgArrayBw[currentImg], "x", Strong.easeInOut, imgArrayBw[currentImg].x,0, 2, true);
    addChild(imgArrayBw[currentImg]);
addChild(buttonBw_btn);
addChild(buttonFw_btn);
currentImg = (currentImg+1)%imgArrayBw.length;

I'd recommed never using the included Tweening classes and start using a good tweening engine like TweenLite/TweenMax from greensock.com. The Adobe ones are slow and problematic - one of the issues they have is tweens stopping like you described. It should be pretty simple to swap out to using tweenlite and once you do, you'll find the syntax much easier.

Image Gallery picture orientation

Is there a way to have a gallery where all of the pictures are rotated 90°? I have pictures that are taller than they are wide, so I would like them to be display sideways.

Hi Bruton
Siena does not currently support the ability to rotate pictures. However if you have images that are taller than wide, you could use an image gallery for which the template height is greater than its width. You should be able to see several images next to
each other.

Image gallery approach for additional details and add to cart option?

With efficiency and minimalist downloads for smartphone users I would appreciate advice on a product image gallery.
Currently I have an intro page and other simple information pages. My gallery pages ( four distinct pages for different leather goods) need either a pop up or a link to a new page for additional details and an option to add to cart.
Within the image gallery, How should I link each photo to the new detail/cart page? Can clicking the image itself be the action or do I need a button?

I made a mistake. I think I got it right this time. The pop up of the title box works but the images are all gone.
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Lapinel Arts Leatherwork</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link href='http://fonts.googleapis.com/css?family=Overlock:400,700|Simonetta:400,900|Marcellus|Junge' rel='stylesheet' type='text/css'>
<style>
box-sizing: border-box;
body {
margin: 0;
padding: 0;
background: #fff;
font: 14px/20px 'Lucida Sans',sans-serif;
.wrap {
overflow: hidden;
.box {
float: left;
position: relative;
width: 25%;
text-align: center;
margin-bottom: 24px;
.boxInner {
position: relative;
text-align: center;
margin: 0 12px;
overflow: hidden;
img {
max-width: 100%;
.titleBox {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: -70px;
background: #000;
background: rgba(0, 0, 0, 0.5);
color: #FFF;
padding: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
.titleBox h2 {
font-size: 16px;
margin: 0;
padding: 0 0 5px 0;
.titleBox a {
text-decoration: none;
color: #fff;
.boxInner:hover .titleBox {
margin-bottom: 0;
@media only screen and (max-width : 768px) {
.box {
width: 50%;
margin-bottom: 24px;
@media only screen and (max-width : 480px) {
.box {
width: 100%;
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 25%;
</style>
<style>
section, header, nav {
display: block;
    box-sizing: border-box;
body{
font-family: 'Marcellus', normal;
background-image: url(DRA-042010-LeatheryTexture-MBFT.jpg);
font-size: 90%;
line-height: 140%;
color: #555;
margin: 0;
padding: 0;
background-color: #FFF;
#hover-image {
background-color: #cfc6b0;
text-align: center;
img {
max-width: 100%;
height: auto;
.container {
width: 85%;
max-width: 1000px;
margin: 0 auto;
color: #000;
header h1 {
font-size: 300%;
line-height: 150%;
text-align: center;
letter-spacing: 4px;
padding: 20px 0;
color: #000;
font-weight: bold;
/* top level navigation */
nav {
    background-color: #E5E4E2;
nav ul {
display: block;
text-align: center;
margin: 0;
padding: 0;
nav li {
margin: 0;
padding: 0;
display: inline;
position: relative;
nav a {
    display: inline-block;
    text-decoration: none;
    padding: 10px 25px;
    color: #000;
nav a:hover {
    background-color: #cfc6b0;
    color: #000;
nav span {
display: none;
/* droplist navigation */
nav ul ul {
position: absolute;
z-index: 1000;
left: 0;
top: 2em;
background-color: #E5E4E2;
text-align: left!important;
display: none;
nav ul ul li a {
display: block;
width: 12em;
border-top: 1px dotted #ccc;
.about {
padding: 0 8%;
margin: 0 auto;
text-align: center;
background-color: #E5E4E2;
.about h2 {
    font-size: 260%;
    line-height: 200%;
    margin: 0;
    padding: 0;
    color: #000;
.about p {
font-size: 110%;
line-height: 150%;
margin: 0;
padding: 0 0 20px 0;
.productsWrapper {
background-color: #000;
overflow: hidden;
padding: 30px 25px;
.product {
float: left;
width: 25%;
padding: 12px;
text-align: center;
color: #fff;
.product img {
border: 1px solid #fff;
.view_details {
text-decoration: none;
display: inline-block;
padding: 15px 20px;
border-radius: 6px;
border: 1px dotted #ccc;
color: #555;
background-color: #fff;
.view_details:hover {
background-color: #E5E4E2;
#mobileTrigger {
padding: 10px 25px;
font-size: 120%;
display: none;
color: #000;
footer {
clear: both;
background-color: #cfc6b0;
padding: 30px;
color: #fff;
text-align: center;
overflow: hidden;
footer a {
text-decoration: none;
color: #000;
    float: left;
    width: 33.33%;
    color: #000;
    border: #000
.footerBox {
    float: left;
    width: 33.33%;
    color: #000;
@media screen and (max-width: 768px) {
    .container {
width: 100%;
.product {
width: 50%;
#mobileTrigger {
display: block;
text-align: right;
nav ul {
display: none;
nav li {
display: block;
text-align: left;
nav a {
display: block;
font-size: 120%;
border-top: 1px dotted #ccc;
nav span {
display: inline-block;
float: right;
font-size: 130%;
/* droplist navigation */
nav ul ul {
position: static;
nav ul ul li a {
width: 100%;
@media screen and (max-width: 480px) {
.product {
float: none;
width: 100%;
body,td,th {
font-family: Marcellus, normal;
#copyright {
color: #000;
font-weight: bold;
</style>
<script type="text/javascript" src="http://lapinelarts.com/JS/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="http://lapinelarts.com/JS/jquery.cycle2.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script>
$(document).ready(function() {
//activate mobile navigation icon when window is 768px
$('#mobileTrigger').css('cursor','pointer').click(function() {
$('#mobileTrigger i').toggleClass('fa-bars fa-times');
$('nav ul').toggle();
// show main desktop navigation onresize/hide sub navigation
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() > 768) {
$('nav ul').show();
$('nav ul ul').hide();
//listen for navigation li being clicked
$('nav ul li').click(function() {
$(this).find('ul').slideToggle();
//toggle font awesome icons
$(this).find('i').toggleClass('fa-bars fa-times');
//events if window is less than 768px
if ($(window).width() < 768) {
//stops submenu sliding up when mouse leaves mobile
$('nav ul ul').show();
else {
//activate desktop submenu on hover
$('nav ul li').mouseenter(function() {
$(this).find('ul').slideToggle();
//toggle font awesome icons
$(this).find('i').toggleClass('fa-bars fa-times');
//desktop submenu slides up when mouse leaves ul/li
$('nav ul ul').mouseleave(function() {
$(this).slideUp();
$('nav ul li').mouseleave(function() {
$(this).find('ul').slideUp();
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
</style>
</head>
<body onLoad="MM_preloadImages('810_0776_smaller.jpg')">
<header>
<h1>LAPINEL ARTS LEATHERWORKS</h1>
<nav>
<div id="mobileTrigger"><i class="fa fa-bars"></i></div>
<ul>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">PROCESS</a></li>
<li><a href="#">PRODUCTS<span><i class="fa fa-bars"></i></span></a>
<ul>
<li><a href="#">PURSES</a></li>
<li><a href="#">POUCHES</a></li>
<li><a href="#">TOTES</a></li>
<li><a href="#">WALLETS</a></li>
</ul>
</li>
<li><a href="#">CART</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
<section class="about">
<h2>PURSES</h2>
<p>There are several styles and sizes of purses available. Custom orders can be arranged but most of these purses are unique and with limited runs of art styles.</p>
<p>Please click on the detail button for larger and additional views and the opportunity to add the item to your cart.<strong></strong></p>
</section>
<div id="hover-image">
<div class="wrap">

<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>

</div>

<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>

</div>

<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>

</div>

<div class="box">
<div class="boxInner">
<img src="http://oddiant.poatemisepare.ro/wp-content/uploads/Viceroy-Butterfly-Limenitis-archippus.j pg" />
<div class="titleBox">
<h2>Butterfly</h2>
<a href="http://www.bbc.co.uk">View Details</a>
</div>
</div>

</div>

</div>

<footer>
<div class="footerBox"><a href="mailto:[email protected]">EMAIL CATHY </a></div>
<div class="footerBox"><a href="https://www.facebook.com/LapinelArtsLeatherwork"> FACEBOOK</a></div>
<div class="footerBox">COPYRIGHT 2015</div>
</footer>
</div>
</body>
</html>

Simple Image Gallery for iWeb

Similar Messages

Maybe you are looking for