Display Images once you click on Thumbnail

[David]

I just replied to your email. As I said there, the error is thrown because you haven't specified an instance name for the component.

[bbhtigger]

Thanks David for the response!! I do have another question, I would like to have one of the big images appear before cliking on a Thumbnail image preferably using the first image in the thumbnail scoller.

[David]

Here's some code to display the first image:

Code: Select all

myScroller.addEventListener(ScrollerEvent.ITEM_START, itemLoadStartHandler);

function itemLoadStartHandler(event:ScrollerEvent):void
{
   if (event.index == 0)
   {
      myScroller.removeEventListener(ScrollerEvent.ITEM_START,itemLoadStartHandler);
      
      // load the big image
      loadBigImage(event.data.bigImage);
   }
}

[bbhtigger]

David I am so sorry for asking another question or asking for help. Everything works great I just can not get all the big images to center only the first one will center.
Great product! and support is outstanding.
// import the ThumbnailScroller class
import com.flashotaku.scroller.ThumbnailScroller;

// import the GreyEffect class
import com.flashotaku.effects.collection.GreyEffect;


import com.flashotaku.events.ScrollerEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.display.Loader;



// the loader for the big image
var bigImageLoader:Loader = new Loader();
showBigImage();

var myEffect:GreyEffect = new GreyEffect();

//listen when the big image is loaded
bigImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bigImageCompleteHandler);

myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, itemClickHandler);


function itemClickHandler(event:ScrollerEvent):void
{
// select the clicked item
myScroller.select(event.index);

// load the big image
loadBigImage(event.data.bigImage);
}
myScroller.addEventListener(ScrollerEvent.ITEM_START, itemLoadStartHandler);

function itemLoadStartHandler(event:ScrollerEvent):void
{
if (event.index == 0)
{
myScroller.removeEventListener(ScrollerEvent.ITEM_START,itemLoadStartHandler);

// load the big image
loadBigImage(event.data.bigImage);
}
}


function loadBigImage(path:String):void
{
// load the image
bigImageLoader.load(new URLRequest(path));
}


function bigImageCompleteHandler(event:Event):void
{
// center the big image
bigImageLoader.x = 500;(stage.width - bigImageLoader.width) / 2;
bigImageLoader.y = -150;(myScroller.y - bigImageLoader.height) / 2;
}


function showBigImage():void
{
addChild(bigImageLoader);
}

// set the effect
myScroller.effect = myEffect;

function hideBigImage():void
{
removeChild(bigImageLoader);
}

[David]

When you set the big image's position, in the bigImageCompleteHandler function, try using these lines:

Code: Select all

bigImageLoader.x = (stage.stageWidth - bigImageLoader.width) / 2;
bigImageLoader.y = (stage.stageHeight - bigImageLoader.height) / 2 - 100;

[David]

...and don't feel sorry when you ask for support ...it's part of your purchase :)

[bbhtigger]

Thank you so much for your support! And answering all my questions.

[David]

You're welcome. :)

[bbhtigger]

Question

When I change screen resolution or use a differnet computer with a different resolution the images are not centered.

Code: Select all

// import the ThumbnailScroller class
import com.flashotaku.scroller.ThumbnailScroller;

import com.flashotaku.events.ScrollerEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.display.Loader;



// the loader for the big image
var bigImageLoader:Loader = new Loader();
showBigImage();

//listen when the big image is loaded
bigImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bigImageCompleteHandler);

myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, itemClickHandler);


function itemClickHandler(event:ScrollerEvent):void
{
   // select the clicked item
   myScroller.select(event.index);
   
   // load the big image
   loadBigImage(event.data.bigImage);
}
myScroller.addEventListener(ScrollerEvent.ITEM_START, itemLoadStartHandler);

function itemLoadStartHandler(event:ScrollerEvent):void
{
   if (event.index == 0)
   {
      myScroller.removeEventListener(ScrollerEvent.ITEM_START,itemLoadStartHandler);
     
      // load the big image
      loadBigImage(event.data.bigImage);
   }
}


function loadBigImage(path:String):void
{   
   // load the image
   bigImageLoader.load(new URLRequest(path));
}


function bigImageCompleteHandler(event:Event):void
{
// center the big image
bigImageLoader.x = (stage.stageWidth - bigImageLoader.width) / 2;
bigImageLoader.y = (stage.stageHeight - bigImageLoader.height) / 2 - 80;
}


function showBigImage():void
{
   addChild(bigImageLoader);
}



[David]

Hi,

Please post a screen shot with the images unentered, if possible.Thanks.