Making a scrolling image gallery?

hello,
I am just learning HTML and am stuck. I have been trying to make an image gallery that will scroll horizontally, however all my images keep stacking vertically they do not scroll and they don't remain "hidden" I have my images in a div tag and its styled, I've copied some script from the net as well to make them auto scroll...  and they still do the same thing no matter what I try. What am I missing?

jQuery Smooth Div Scroll - smooth content scrolling jQuery plugin - Thomas Kahn
that is where I got this code from
this is what my page looks like
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<link href="maincss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv2 {
    position:absolute;
    width:58px;
    height:39px;
    z-index:600;
    left: 31px;
    top: 10px;
#scrollable div.scollablearea {
    position:relative;
    disply:block;
    float:left;
    margin:0;
    padding:0;
h3 {
    word-spacing: 100px;
</style>
<script type="text/javascript">
    $(document).ready(function (){
        $("#makemescrollable").smoothdivscroll({
            mousewheelscrolling: "alldirections", manualcontinuousscrolling: true, autoscrollingmode: "onstart"
    </script>
</head>
<body>
<div class="container">
    <div class="header">Clarendon Miller Community Archives<br />
  </div>
<div class="sidebar1" id="menu">
        <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
    <li><a href="documents.html">Documents</a></li>
      <li id="menu"><a href="">Photos</a>
          <ul>
            <li><a href="plevna.html">Plevna</a></li>
            <li><a href="ompah.html">Ompah</a></li>
            <li><a href="ardoch.html">Ardoch</a></li>
            <li><a href="fernleigh.html">Fernleigh</a></li>
            <li><a href-="snow road.html">Snow Road</a></li>
        </ul>
          </li>
        <li><a href="books.html">Books</a></li>
             <li><a href="">Events</a>
             <ul>
             <li><a href="pastevents.html">Past Events</a></li>
             <li><a hfref="futureevents.html">Future Events</a></li>
             </ul>
             </li>   
    </ul>
    </div>
  <div class="content">
    <h2>Churches</h2>
    <h4>Holy Trinity Anglican Church</h4>
<h6>History-</h6>
    <h6>Gallery-</h6>
    <div id="scrollable">
    <img src="image/plevna/church/anglican/holytrinityoutside1small.jpg" alt="holy trinity plevna" id="holytrinity6"/>
   <img src="image/plevna/church/anglican/holytrinityoutside2small.jpg" alt="holy trinity plevna" id="holytrinity7"/>
   <img src="image/plevna/church/anglican/holytrinityoutside3small.jpg" alt="holy trinity plevna" id="holytrinity8"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity9"/>
   <img src="image/plevna/church/anglican/holytrinityplevnamiddle.jpg" alt="holy trinity plevna" id="holytrinity10"/>
   </div>
    <h4>Plevna United Church</h4>
    <h6>History-</h6>
    <h6>Gallery-</h6>
</div>
  <div class="footer">
    <p> KFPL  <span class="justifyrt"> in partnership with Township of North Frontinac</span></p>
    <div id="apDiv2"><img src="kfpl.jpg" width="57" height="36" id="Image2" /></div>
  </div>
</div>
</body>
</html>

Similar Messages

  • Help with scrolling image gallery?

    Hi, using the code for a scrolling image gallery found here (Build an Infinite Scrolling Photo Banner With HTML and CSS | Design Shack). When I pasted in the CSS and HTML, it displayed all vertically and broke my title div. Not a professional, so I could use an expert eye to point out any mistakes. Trying to make title in vertical center of page, scrolling image gallery horizontal in the middle, and links directly below. HTML is below:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Marc Moss Art</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="../../../../style.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    </head>
    <body topmargin="600">
    <div id="wrapper">
    <div class="container">
      <header></header>
      <div id="content" style="height:300px;width:1000px;float:left;"><h1>art by marc moss</h1>
    </div>
        <!-- Each image is 350px by 233px -->
        <div class="photobanner">
            <img class="first" src="../../../../mosspictures/DSCN0038.JPG" alt="">
            <img src="../../../../mosspictures/DSCN0040.JPG" alt="">
            <img src="image-3.jpg" alt="">
            <img src="image-4.jpg" alt="">
            <img src="image-5.jpg" alt="">
            <img src="image-6.jpg" alt="">
            <img src="image-1.jpg" alt="">
            <img src="image-2.jpg" alt="">
            <img src="image-3.jpg" alt="">
            <img src="image-4.jpg" alt="">
        </div>
        <nav>
        <div id="navigation">
        <ul>
        <li><a href="#">bio</a></li>
        <li><a href= "#">inspiration</a></li>
        </ul>
        </div>
        </nav>
    <!-- end .content --></article>
      <footer>
    </footer>
      <!-- end .container --></div>
      </div>
    </body>
    </html>

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

  • Scrolling image gallery problems

    I am creating a scrolling image gallery using thumbnails.  I have 36 thumbnails that are 100 x 100 px.  I cannot figure out the x y coordinates to line up the images correctly.  They are overlapping.  I've put in the first x coordinate at 0 and the first image goes to the left, and that is fine, it is when I click the last image to put in a number, which I thought would be 36 x 100, they do not line up, they over lap.  Does anyone have a clue how to fix this?  I am working on this site for a very pushy client who wants it done NOW...Thanks,

    If you crerate a Sprite or Movieclip 3600 x 100 you can place then one after another on that container then you only have 1 object to place and scroll.

  • Newbie Scrolling Image Gallery

    can someone help me figure out why my site isn't loading an
    external image gallery? the tutorial i used can be found here:
    http://www.oman3d.com/tutorials/flash/imagegallery/
    they made the image gallery is completely done with
    actionscript and it works in the .swf for the gallery, but as soon
    as i call it to be loaded into the home .swf it doesn't work.
    here's the link to the sites homepage:
    (oh and dont worry i know the pics are pixelated and some
    things need fixed, i'm just trying to get the site working first)
    http://lightboy101.110mb.com/bootleg/Splash.swf
    --- here is the gallery----
    http://lightboy101.110mb.com/bootleg/Gallery.swf
    if anyone can help me, please let me know. or if you know a
    tutorial with a better scrolling image gallery, that would be
    great. thanks.

    awesome! thanks! but now i seem to have another problem... =/
    the far left and far right images are cut off. it's as if the
    gallery width is being set to the stage of the entire site, and not
    the gallery.swf height/width. i think it has something to do with
    this code:
    myThumb_mc._x = (i-1)*myThumb_mc._width;
    myThumb_mc._y = (Stage.height-myThumb_mc._height)/2;
    and
    large_mc._x = (Stage.width-large_mc._width)/2;
    large_mc._y = (Stage.height-large_mc._height)/2;

  • Image gallery with scrolling thumbnails?

    Hi All,
    I am trying to build an image gallery that will contain 1 big picture and a Horizental strip of thumbnails that will allow scroll trough the thumbnails
    anyone can explain or point out a good tutorial for this?
    Thanx,
    Adi

    Hi Adi,
    do you really ask us for a tutorial, 'cause there are so many nice ready made solutions (with source code, which you could use as a tutorial too), like these:
    http://www.efectorelativo.net/laboratory/noobSlide/ Sample 7
    http://www.electricprism.com/aeron/slideshow/
    http://opiefoto.com/articles/photoslider#example
    http://sandbox.scriptiny.com/javascript-slideshow/
    and so on...
    Hans-Günter

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

  • Scrolling XML Gallery

    Howdy,
    I would like to create an sliding xml drivin photo gallery,
    similar to
    this
    one at flashkit but all linear and only previous and next
    buttons, no numbers. Any ideas?
    Thanks,
    Conrad

    Hi --
    I clicked on the link for your gallery and the images load??
    Both when I
    click on the image or when I click the "next" and "previous"
    buttons --
    although the "hit" area for the buttons is below the actual
    text so you
    should adjust that on those buttons. I would also recommend
    not making the
    text selectable so the cursor won't change to the "I bar"
    Rich
    "joesavy" <[email protected]> wrote in
    message
    news:fcp3qi$4ak$[email protected]..
    >I created an XML scrolling thumbnail gallery using a
    >
    http://www.kirupa.com/developer/mx2004/thumbnails.htm
    >
    > I then had to alter the action script to get my
    thumbnails to display
    > properly
    > -- they were spaced out or overlapping each other and
    not in the sequence
    > specified in the XML file. The new code works great
    locally, but the
    > thumbnails
    > and larger image refuse to load remotely in every
    browser i've tried. Any
    > thoughts on how to alter the action script to load the
    gallery?!?! I'm not
    > much
    > experienced in Flash so any help would be most
    appreciated.
    >
    > You can find the page with my unloadable gallery
    >
    http://www.sullivancreative.com/clients/se-07-7-24/se_website/gallery.html
    >
    > You can see my action script in my
    >
    http://www.sullivancreative.com/clients/se-07-7-24/se_website/xml_photogallery_s
    > crollthms_fix.fla
    >
    > Thanks!
    > Joe.
    >
    >

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

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

  • Help with scrolling photo gallery

    I'm using the code below to for a scrolling photo gallery. I got this from another forum on Adobe. My problem is that I can't get my images to upload. I uploaded this for an image but it's not working:
    <img src="images/baca_poster_small.jpg" data-cycle-title="image1">
    Can someone please help me with getting my pictures to work in this?
    Thanks!
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 document with Cycle2</title>
    <!--Latest jQuery Core Library-->
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    <!--Cycle2 Plugin Script-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
    <style>
    .cycle-slideshow, .cycle-slideshow * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0 auto;
    width:45%; /**adjust width as required**/
    .cycle-slideshow img {width: 100%;}
    </style>
    </head>
    <body>
    <h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Slideshow</h1>
    <!--begin slideshow-->
    <div class="cycle-slideshow"
        data-cycle-pause-on-hover="true"
        data-cycle-speed="700"
    >
    <!--your images go here-->
    <img src="http://malsup.github.com/images/beach1.jpg" data-cycle-title="beach1">
    <img src="http://malsup.github.com/images/beach2.jpg" data-cycle-title="beach2">
    <img src="http://malsup.github.com/images/beach3.jpg" data-cycle-title="beach3">
    <img src="http://malsup.github.com/images/beach4.jpg" data-cycle-title="beach4">
    <img src="http://malsup.github.com/images/beach9.jpg" data-cycle-title="beach9">
    <!--end slideshow-->
    </div>
    </body>
    </html>

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

  • 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 or Lightbox that works for DW CS6?

    Help! I need an image gallery or lightbox that works! I tried the Lightbox Gallery in Widgets and while it works for the most part, the nav buttons don't show up and I've put the files in every directory (path) possible. Does anyone have a fix for this - I've perused forums for hours about this. OR is there something else that's easy and fast and that works? And hopefully free?
    Thank you so much!

    The page is not live, so here is the code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <head>
        <meta http-equiv="Content-Type" content=
        "text/html; charset=utf-8" />
        <title>
          HLG - Flagstone Driveways Walkways Paths
        </title>
        <style type="text/css">
    /*<![CDATA[*/
        body,td,th {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            font-size: 18px;
            color: #000;
        body {
        margin:10px;
        background-color:#f0f0f0; 
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
        overflow-y:scroll;
        body {
            background-image: url(images/background2.gif);
        /*]]>*/
        </style>
        <link href="!-css-style.css" rel="stylesheet" type=
        "text/css" />
        <style type="text/css">
    /*<![CDATA[*/
        a:link {
            color: #FFF;
        /*]]>*/
        </style>
        <link href="css/lightbox.css" rel="stylesheet" type=
        "text/css" />
        <link href="css/sample_lightbox_layout.css" rel="stylesheet"
        type="text/css" />
        <script src="scripts/jquery.js" type="text/javascript">
    </script>
        <script src="scripts/lightbox.js" type="text/javascript">
    </script>
        <script type="text/javascript">
    //<![CDATA[
        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_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_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">
    /*<![CDATA[*/
        /* BeginOAWidget_Instance_2127022: #gallery */
                    .lbGallery {
                            /*gallery container settings*/
                            background-color: #910000;
                            padding-left: 2px; 
                            padding-top: 4px; 
                            padding-right: 2px; 
                            padding-bottom: 4px; 
                            width: 550px;
                            height: auto;
                            text-align:center;
                    .lbGallery ul { list-style: none; margin:0;padding:0; }
                    .lbGallery ul li { display: inline;margin:0;padding:0; }
                    .lbGallery ul li a{text-decoration:none;}
                    .lbGallery ul li a img {
                            /*border color, width and margin for the images*/
                            border-color: #ffffff;
                            border-left-width: 4px;
                            border-top-width: 4px;
                            border-right-width: 4px;
                            border-bottom-width: 20px;
                            margin-left:10px;
                            margin-right:10px;
                            margin-top:5px;
                            margin-bottom:5px:
                    .lbGallery ul li a:hover img { 
                            /*background color on hover*/
                            border-color: #ffcc66;
                            border-left-width: 4px;
                            border-top-width: 4px;
                            border-right-width: 4px;
                            border-bottom-width: 20px;
                    #lightbox-container-image-box {
                            border-top: 0px solid #000000;
                            border-right: 0px solid #000000;
                            border-bottom: 0px solid #000000;
                            border-left: 0px solid #000000;
                    #lightbox-container-image-data-box {
                            border-top: 0px;
                            border-right: 0px solid #000000;
                            border-bottom: 0px solid #000000;
                            border-left: 0px solid #000000;
        /* EndOAWidget_Instance_2127022 */
        /*]]>*/
        </style>
        <script type="text/xml">
    <![CDATA[
        <!--
        <oa:widgets>
        <oa:widget wid="2127022" binding="#gallery" />
        </oa:widgets>
        -->
        ]]>
        </script>
      </head>
      <body onload=
      "MM_preloadImages('buttons/directionsover.png','buttons/contactover.png','buttons/gallery over.png','buttons/homeover.png')">
      <table width="980" border="1" bordercolor="#000000" align=
      "center" cellpadding="0" cellspacing="0">
          <tr>
            <td>
              <table width="980" border="0" cellspacing="0"
              cellpadding="0">
                <tr>
                  <td height="40" align="center" bgcolor="#910000"
                  class="MaroonBanner">
                    <p>
                      Heartland Landscape Group, Inc.| Osage Beach,
                      Missouri | (573) 302-8855 | <a href=
                      "mailto:[email protected]" class=
                      "MaroonBannerEmail">[email protected]</a>
                    </p>
                  </td>
                </tr>
                <tr>
                  <td width="980" height="182" align="center" bgcolor=
                  "#000000">
                    <img src="images/plant1smlogo.jpg" width="980"
                    height="180" alt="Heartland Landscape Group" />
                  </td>
                </tr>
                <tr>
                  <td height="40" align="center" bgcolor="#910000">
                    <img src="images/escape_bnnr.png" alt=
                    "Escape the ordinary with greener landscape solutions"
                    width="980" height="40" />
                  </td>
                </tr>
                <tr>
                  <td valign="top">
                    <table width="980" border="0" cellspacing="0"
                    cellpadding="0">
                      <tr>
                        <td width="213" valign="top">
                          <table width="200" border="0" cellspacing="0"
                          cellpadding="0">
                            <tr>
                              <td height="46" colspan="2" valign=
                              "middle">
                                <a href="index.html" onmouseout=
                                "MM_swapImgRestore()" onmouseover=
                                "MM_swapImage('Homepage','','buttons/homeover.png',1)">
                                <img src="buttons/home.png" alt=
                                "Homepage" width="210" height="45" id=
                                "Homepage" border="0" /></a>
                              </td>
                            </tr>
                            <tr>
                              <td height="43" colspan="2" valign="top">
                                <a href="services.html"><img src=
                                "buttons/servicesover.png" alt=
                                "Services" width="210" height="45"
                                border="0" /></a>
                              </td>
                            </tr>
                            <tr>
                              <td height="43" colspan="2" valign="top">
                                <a href="beforeafter.html" onmouseout=
                                "MM_swapImgRestore()" onmouseover=
                                "MM_swapImage('Before &amp; After Gallery','','buttons/galleryover.png',1)">
                                <img src="buttons/gallery.png" alt=
                                "Before and After Gallery" width=
                                "210" height="45" id=
                                "Before_and_After_Gallery" border=
                                "0" /></a>
                              </td>
                            </tr>
                            <tr>
                              <td height="43" colspan="2" valign="top">
                                <a href="directions.html" onmouseout=
                                "MM_swapImgRestore()" onmouseover=
                                "MM_swapImage('Directions','','buttons/directionsover.png',1)">
                                <img src="buttons/directions.png" alt=
                                "Directions" width="210" height="45"
                                id="Directions" border="0" /></a>
                              </td>
                            </tr>
                            <tr>
                              <td height="43" colspan="2" valign="top">
                                <a href="contact.html" onmouseout=
                                "MM_swapImgRestore()" onmouseover=
                                "MM_swapImage('Contact Us','','buttons/contactover.png',1)">
                                <img src="buttons/contact.png" alt=
                                "Contact Us" width="210" height="45"
                                id="Contact_Us" border="0" /></a>
                              </td>
                            </tr>
                            <tr>
                              <td colspan="2" align="center"> 
                              </td>
                            </tr>
                            <tr>
                              <td width="53">
                                <a href=
                                "https://www.facebook.com/pages/Heartland-Landscape-Group-Inc/230076883731915"
                                target="_blank"><img src=
                                "images/fb_logo.png" alt=
                                "Follow Us on Facebook" width="50"
                                height="50" border="0" /></a>
                              </td>
                              <td width="147" valign="top" class=
                              "BodyTextsm">
                                Follow us on Facebook for project
                                ideas, tips and landscaping news!
                              </td>
                            </tr>
                            <tr>
                              <td colspan="2"> 
                              </td>
                            </tr>
                            <tr>
                              <td colspan="2" class="Textmed">
                                This Web site is best viewed with
                                Mozilla Firefox or Google Chrome.
                              </td>
                            </tr>
                          </table>
                        </td>
                        <td valign="top" class="Heading">
                          <table width="765" border="0" cellspacing="0"
                          cellpadding="0">
                            <tr>
                              <td valign="top" class="Heading">
                                <p>
                                  Our Services - Flagstone Driveways,
                                  Walkways &amp; Paths<br />
                                  <img src="images/line.png" width=
                                  "757" height="3" alt=
                                  "Horizontal Line" />
                                </p>
                                <p class="BodyText">
                                  Whether replacing or building a new
                                  driveway, walkway or path, naturally
                                  beautiful flagstone is the perfect
                                  alternative to concrete or brick
                                  pavers. Depending on the individual
                                  taste of the homeowner, there are
                                  many sizes, colors, shapes, and
                                  styles of natural stone to select
                                  from, and lend themselves to the more
                                  "natural" landscapes.<br />
                                </p>
                                <table width="550" border="0" align=
                                "center" cellpadding="0" cellspacing=
                                "0">
                                  <tr>
                                    <td align="center">
                                      <div id="gallery" class=
                                      "lbGallery">
                                        <ul>
                                          <li>
                                            <a href=
                                            "images/flagstone/images/garden_pathways.jpg"
                                            title=
                                            "Garden Pathway"><img src=
                                            "images/flagstone/thumbnails/garden_pathways.jpg"
                                            width="72" height="72" alt=
                                            "Flagstone Entrance Patio" /></a>
                                          </li>
                                          <li>
                                            <a href=
                                            "images/flagstone/images/pa_stepper_path.jpg"
                                            title=
                                            "Pennsylvania Stepper Path">
                                            <img src=
                                            "images/flagstone/thumbnails/pa_stepper_path.jpg"
                                            width="72" height="72" alt=
                                            "Pennsylvania Stepper Path" /></a>
                                          </li>
                                          <li>
                                            <a href=
                                            "images/flagstone/images/black_hills_rustic_path.jpg"
                                            title=
                                            "Black Hills Rustic Path"><img src="images/flagstone/thumbnails/black_hills_rustic_path.jpg"
                                            width="72" height="72" alt=
                                            "Black Hills Rustic Path" /></a>
                                          </li>
                                          <li>
                                            <a href=
                                            "images/flagstone/images/flagstone_path_with_firepit.jpg"
                                            title=
                                            "Flagstone Path With Firepit">
                                            <img src=
                                            "images/flagstone/thumbnails/flagstone_path_with_firepit.jpg"
                                            width="72" height="72" alt=
                                            "Flagstone Path With Firepit" /></a>
                                          </li>
                                          <li>
                                            <a href=
                                            "images/flagstone/images/flagstone_with_gravel.jpg"
                                            title=
                                            "Flagstone With Crushed Creek Gravel">
                                            <img src=
                                            "images/flagstone/thumbnails/flagstone_with_gravel.jpg"
                                            width="72" height="72" alt=
                                            "Flagstone With Gravel" /></a>
                                          </li>
                                        </ul>
                                      </div><script type=
                                      "text/javascript">
    //<![CDATA[
                                      // BeginOAWidget_Instance_2127022: #gallery
                                      $(function(){
                                      $('#gallery a').lightBox({
                                      imageLoading:                   '/images/lightbox-ico-loading.gif',            // (string) Path and the name of the loading icon
                                      imageBtnPrev:                   '/images/lightbox-btn-prev.gif',                       // (string) Path and the name of the prev button image
                                      imageBtnNext:                   '/images/lightbox-btn-next.gif',                       // (string) Path and the name of the next button image
                                      imageBtnClose:                  '/images/lightbox-btn-close.gif',              // (string) Path and the name of the close btn
                                      imageBlank:                             '/images/lightbox/lightbox-blank.gif',                  // (string) Path and the name of a blank image (one pixel)
                                      fixedNavigation:                true,           // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
                                      containerResizeSpeed:   400,                     // Specify the resize duration of container image. These number are miliseconds. 400 is default.
                                      overlayBgColor:                 "#000000",              // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
                                      overlayOpacity:                 0.75,           // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
                                      txtImage:                               'Flagstone Patios',                             //Default text of image
                                      txtOf:                                  'of'
                                      // EndOAWidget_Instance_2127022
                                      //]]>
                                      </script>
                                    </td>
                                  </tr>
                                </table><br />
                                <table width="485" border="0"
                                cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td colspan="3" valign="top" class=
                                    "BodyText">
                                      <p>
                                        - <a href="design.html" target=
                                        "_self" class=
                                        "Emailblack"><span class=
                                        "Email">Landscape Design
                                        Services</span></a>
                                      </p>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td colspan="3" valign="top">
                                      <span class="BodyText">-
                                      Landscape Services:</span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td colspan="2" valign="top">
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Ornamental Gravel &amp;
                                      Mulches</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td colspan="2" valign="top">
                                      <span class="BodyText">-
                                      Retaining Walls:</span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td width="391">
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Block</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td>
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Natural
                                      Stone</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td colspan="2" valign="top">
                                      <span class="BodyText">-
                                      Patios</span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td>
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Brick</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td>
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Flagstone</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td colspan="2" valign="top">
                                      <span class="BodyText">-
                                      Driveways, Walkways &amp;
                                      Paths</span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td>
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Brick</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td>
                                      <span class="BodyText">- <a href=
                                      "flagstonewalks.html" target=
                                      "_self" class=
                                      "Emailblack"><span class=
                                      "Email">Flagstone</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td colspan="2" valign="top">
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Landscape
                                      Steps</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td colspan="2" valign="top">
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Plantings &amp;
                                      Sod</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" valign="top"> 
                                    </td>
                                    <td colspan="2" valign="top">
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Water
                                      Features</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td width="45" height="32" valign=
                                    "top"> 
                                    </td>
                                    <td colspan="2" valign="top">
                                      <span class="BodyText">- <a href=
                                      "index.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Outdoor Living
                                      Fun</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td height="30" colspan="3" valign=
                                    "top">
                                      <span class="BodyText">- <a href=
                                      "irrigation.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Irrigation</span></a></span>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td colspan="3" valign="top">
                                      <span class="BodyText">- <a href=
                                      "lighting.html" target="_self"
                                      class="Emailblack"><span class=
                                      "Email">Lighting</span></a></span>
                                    </td>
                                  </tr>
                                </table><br />
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              <table width="980" border="0" cellspacing="0"
              cellpadding="0">
                <tr>
                  <td width="211"> 
                  </td>
                  <td width="486" align="center">
                    <span class="Copyright">Copyright © 2013 Heartland
                    Landscape Group, Inc.</span>
                  </td>
                  <td width="283"> 
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>

  • Adding "loading" movieclip to dynamic image gallery?

    Hello again,
    I've completed my XML-driven image gallery, however upon live testing I'd realized I made a rookie mistake and not put some kind of placeholder "loading" movie clip loop while the thumbnails—and subsequent full-size images—are being loaded. The images will randomly appear when loaded and I would like to be able to insert a placeholder movie clip while they load, and swap them up with the thumbnails/images after it has been loaded. The placeholder movie clip is in my library (loadingLoop), but I'm having problems getting it to work correctly.
    Below is the original function that processes the XML and adds the thumbnail images; this is where I'm trying to insert the placeholder movie clip per XML child node (every attempt I've made just keeps throwing more errors, so I've omitted my attempts to avoid confusion), and I've attached the XML file for testing. And insight or help would be appreciated.
    //Locate the external XML file and trigger xmlLoaded when complete
    xmlLoader.load(new URLRequest("data/artGallery.xml"));
    xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
    //Load the XML and process the image locations
    function xmlLoaded(event:Event):void {
        xml = XML(event.target.data);
        //parse the nodes in the XML file
        xmlList = xml.children();
        //count the number of nodes in the XML file via XMLList
        trace(xmlList.length());
        //loop to load all of the thumbnails, based on the number of nodes in XMLList
        //"i" = every child node in the XML file
        for (var i:int = 0; i < xmlList.length(); i++) {
            //Add loadingLoop movie clip per node and wait for thumnail to load before swapping out with imageLoader thumbnail images <-- help!!
            //for every node, create a new instance to be put on stage
            imageLoader = new Loader();
            //load each thumbnail from its location per XML node's "thumb" attribute
            imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
            //position of thumbnail instances per XML node (horizontally across stage)
            imageLoader.x = i * 110 + 10;//thumbs are 100 x 100 so, +10 to the width, plus +10 from left edge
            //imageLoader.y = 10;
            //for each node in XML list, name the instance with the path to the location of the full size image
            imageLoader.name = xmlList[i].attribute("source");
            //for each node in the XML list, add a drop shadow
            imageLoader.filters = [thumbDShadow];
            //add thumbnails to stage
            addChild(imageLoader);
            dropTween = new Tween(imageLoader, "y", Bounce.easeOut, -100, 10, 1, true);
            //set up thumbnails to wait for a click to execute showPicture
            imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
            //set up thumbnails to scale when rolled over
            imageLoader.addEventListener(MouseEvent.ROLL_OVER, sizeUP);

    Somehow I had a feeling this wouldn't be a copy-and-paste job for the full-size images. Sorry to be a bother. This is the showPicture function that is fired off when the thumbnail image is clicked (from our previous example). Two errors are thrown:
    When the thumnail is clicked:
    "Error #2007: Parameter child must be non-null.
        at flash.display::DisplayObjectContainer/removeChild()
        at MethodInfo-51()"
    But the full-size image loads nonetheless. The second loading loop (loadingLoop2) is not removed. Below is the showPicture function:
    //Load the full-size images and place onto the stage
    function showPicture(event:MouseEvent):void {
        //add new movie clip container
        var mc2:MovieClip = new MovieClip();
        addChild(mc2);
        //clear the fullLoader—this is to help clear any full-size images that may already be on the stage (they have two options, click a new thumbnail, or close the current full-size image
        fullLoader.unload();
        //re-create the fullLoader, if there was one cleared
        fullLoader = new Loader();
        //load each full size image from its location per XML node's "source" deliniated by mc.ldr's "source" attribute
        fullLoader.load(new URLRequest(event.target.name));
        //add the loder to the container
        mc2.addChild(fullLoader);
        //create new instance of second loading loop
        mc2.fsloop = new loadingLoop2();
        //add the second loading loop to the container
        mc2.addChild(mc2.fsloop);
        //for each container, add a drop shadow
        mc2.filters = [fullDShadow];
        //set the container's position center on stage, making it the size of the loading loop until the full-size images are loaded
        mc2.x = (stage.stageWidth - mc2.fsloop.width) * 0.5;
        mc2.y = (stage.stageHeight - mc2.fsloop.height) * 0.5;
        //place container on stage
        addChild(mc2);
        //fade in each container
        fadeTween = new Tween(mc2, "alpha", None.easeNone, 0, 1, 0.5, true);
        //check to see if the image has been loaded completely—this is to make sure the image's attributes can be used to re-center on stage and remove fsloop
        fullLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, removeLoop2);
        //set field to multiline so that the <br> HTML tags can be used
        imageTextField.multiline = true;
        //add text frame for description
        imageTextField.x = 10;
        imageTextField.y = 125;
        //for each full-size image, load the description text from the XML child nodes
        for (var j:int = 0; j < xmlList.length(); j++) {
            //check to make sure that the correct full-size image matches the text node when clicked
            if (xmlList[j].attribute("source") == event.target.name) {
                //add each child node as a separate line in the same text field; added HTML tags for CSS application
                imageTextField.htmlText = "<p><span class = 'projectName'>" + xmlList[j].child("projectName") + "</span><br>"
                + "<span class = 'toolsUsed'>" + xmlList[j].child("toolsUsed") + "</span><br><br>"
                + xmlList[j].child("projText") + "<br>"
                + "<span class = 'liveURL'>" + xmlList[j].child("liveURL") + "</span></p>";
        function removeLoop2(event:Event):void {
            //re-position the container to center on stage to accomodating the full sized image
            mc2.x = (stage.stageWidth - fullLoader.width) * 0.5;
            mc2.y = (stage.stageHeight - fullLoader.height) * 0.5;
            //Add the text field
            addText();
            //hide instructional text, already on stage
            galleryInfo_mc.alpha = 0;
            //remove the full-sized loading loop
            event.target.loader.parent.removeChild(MovieClip(event.target.loader.parent).loadingLoop2 );
        //set up full-size images to "self close" by clicking on it
        mc2.addEventListener(MouseEvent.CLICK, clearStage);
    The second error gets thrown when the container is clicked and the function clearStage is executed, which does not remove the container:
    "TypeError: Error #2007: Parameter child must be non-null.
        at flash.display::DisplayObjectContainer/removeChild()
        at artGallery_v1_5_fla::MainTimeline/clearStage()"
    This is the clearStage function:
    //Allow full-size image to "self close" by clikcing on it and removing the text description
    function clearStage(event:MouseEvent):void {
        //clear the fullLoader
        fullLoader.unload();
        //remove the container
        event.target.parent.removeChild(MovieClip(event.target.parent).mc2);
       //remove the text field
        removeChild(imageTextField);
        //show the instructional text that is on-stage
        galleryInfo_mc.alpha = 1;
    Help!

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

Maybe you are looking for

  • Arch and Win 8.1 on the same SSD

    Hi everyone, i'm using Arch on my notebook for quite some time now and it is great. Now i want to install it on my desktop machine. The problem is that Win 8.1 is installed on there on an SSD. I can't just erase Win unfortunately because -> games :-D

  • Does TREX have a Database?

    I just started to use TREX 7.0. It seems to me that TREX7.0 does not use any database. Would you please help confirm this? Thanks!

  • Adobe: ActiveX vs Native in web dynpro

    Hello, has there recently (the last week or so) been an update on Adobe Reader or windows xp that makes the adobe forms not work anymore with web dynpro? Last week i had a simple form (activeX) in my web dynpro that was working fine. The form had two

  • Not getting messages due to ICS upgrade!!!!!!!!Help!!!!!

    I hate the ICS "downgrade!"  I cannot get my messages to open.  My phone buzzes when I get a message but when i click on it, it just says please wait......indefinately!  And when i try to open pics sent to me on my go sms pro app. it wont open them i

  • Nice Small App To Keep MacBook Pro Running With Lid Closed

    Found a nice little app, NoSleep that keeps the MacBook Pro running even when the lid is shut, so I use it alone with Caffeine and MacLock. I had found that my system was crashing on a continuing basis and with No Sleep it hasn't.