Continuous scrolling image thumbnail and slideshow component for Flex.

I’ve updated this to a proper component implementation that can be found here.

I’ve been working on improvements for this thumbnail/slideshow component. The way the continuous scroll flows is very nice. It provides a very fluid feel. I have it reading XML from SlideShowPro director. SSPD simply gives a structure of albums and images, so the component should work from essentially any XML source as long as it follows the same schema:

<gallery>
     <album id="0" description="DESCRIPTION" title="TITLE" tn="PATH" lgpath="PATH" tnpath="PATH">
          <img src="FILENAME" />
          ...
     </album>
</gallery>

There is still a good bit of work to do. Right now the slideshow is coupled with the thumbnail container. I think that should be seperated, because I can see various uses for thumbnails outside of a slideshow. It needs style and event metadata so that it will function as a proper Flex component. I am also going to roll it into mediated PureMVC components for inclusion in VE:Session.

The Continuous scrolling image thumbnail and slideshow component for Flex. by Joel Hooks, unless otherwise expressly stated, is licensed under a Creative Commons Attribution 3.0 United States License.

Mike

This is great. It helps me out quite a bit as a starting point. The are a few problems I see with this code (or it could just be me). I’m trying to fix it all myself, but wanted to point them out in case you were interested:

1) change the background from black to white and you see the canvases. I’m not sure yet why each picture has a smaller frame around it which is not visible when it is black.

2) If I try to restrict this to a boundary like a canvas which is 800 wide, it still renders the images outside of that region when a thumbnail is selected. Again, not sure why, but trying to fix this.

Any plans on posting an update version of this? If not, that’s OK, was just curious to see your own progress on this and again, thanks for posting this to begin with!
Joel

@Mike – at some point I really want to get in and make this a proper component, but it is a time issue and it works great in my application so the motivation is in short supply

The image display portion is just for representation of what it can do. Without looking at the code I’d say I put a border on the actual Image components just to offset it from the background a bit. Hopefully it is easy to discover and change for your needs :>
https://lancetsoftware.com George

I am getting a java.lang.NullPointerException any ideas? I am guessing it is not finding the images. I am using Flex 3.0. Thanks George
wpageiii

Has anyone solved the flicker when using only a few images between 3-9 images…I changed the “swap” function and that fixed the constant movement after loadup…But now the last image flickers for about 3 seconds then disappears after changing images…I noticed the comment above that talks about this problem…Is there a fix out there?
Big Bam

Much thanks to you for providing such a useful function, I do a lot of photography and I was seeking out an effective solution for showcasing it using flex.
L’Ollonais

Hi there,
This looks great. Any chance that a url can be added to the large image, say, to take you to another site?
Thanks
Adrian

Great Component!
Couple of questions though, is it possible to add a white border to each thumbnail image and fix the width of the thumbnail, regardless of the actually image height?
joelhooks

This was because the source was pointed at an XML datasource that was invalid. It is proper in the current version of the source.
https://joelhooks.com Joel Hooks

This was because the source was pointed at an XML datasource that was invalid. It is proper in the current version of the source.
Dan Bucholtz

Thanks mate this is very nice! I'm going to extend it a bit, and if it turns out to be decent I will shoot you back the source so you can compile and check it out. Thanks again!
https://joelhooks.com Joel Hooks

I'd love to see what you can improve upon, I know there is a lot of room for improvement. Fork it on Github, that way any beneficial modifications can be moved into the master repository. Cheers.
Dan Bucholtz

Thanks mate this is very nice! I'm going to extend it a bit, and if it turns out to be decent I will shoot you back the source so you can compile and check it out. Thanks again!
https://joelhooks.com Joel Hooks

I'd love to see what you can improve upon, I know there is a lot of room for improvement. Fork it on Github, that way any beneficial modifications can be moved into the master repository. Cheers.
https://wilianfiabani.wordpress.com/ Wilian Fiabani

bautifull!
Shoba

Hi Joel,
Thanks for the component and its a great work!!
I have created a link bar with different galleries and based on the gallery selected, I am trying to load the thumbnail. It works fine except for one problem. I am not able to reset the thumbnail images. When I select a different gallery, the thumbnail is getting updated with new images but at the background the previous thumbnail images appears transparent. Can you please help me to fix this issue.
Thanks a lot.
-Shoba c
Shoba

Hi Marcin,
I am having this problem as well. When I load the thumbnail with different galleries, they do not refresh properly (the old thumbnails remain transparent behind the new thumbnail images).

Please let me know how u fixed this problem.

Thanks a lot.
https://joelhooks.com Joel Hooks

I will look into this. The demo gallery wasn't written with multiple
galleries in mind, but my production implementation supports it so I
will see if I can fix it easily and put a new version up on Github.

Cheers
Shoba

Hi Joel,
Thanks for the component and its a great work!!
I have created a link bar with different galleries and based on the gallery selected, I am trying to load the thumbnail. It works fine except for one problem. I am not able to reset the thumbnail images. When I select a different gallery, the thumbnail is getting updated with new images but at the background the previous thumbnail images appears transparent. Can you please help me to fix this issue.
Thanks a lot.
-Shoba c
Shoba

Hi Marcin,
I am having this problem as well. When I load the thumbnail with different galleries, they do not refresh properly (the old thumbnails remain transparent behind the new thumbnail images).

Please let me know how u fixed this problem.

Thanks a lot.
https://joelhooks.com Joel Hooks

I will look into this. The demo gallery wasn't written with multiple
galleries in mind, but my production implementation supports it so I
will see if I can fix it easily and put a new version up on Github.

Cheers
shoba

Thank you very much Joel.

I think, every time I load a new gallery, a new instance of Navigator component is being created. So I think I have to make sure only one instance of Navigator is created and update it with the new gallery. I am working on it and will update you if I am able to fix it.

Once again,Thanks a lot!!!
shoba

I was trying to implement singleton pattern using static initializers to create just one instance of Navigator and using the single instance I was trying to initialize the thumbnails for different galleries but it doesn't seem to work.
shoba

Thank you very much Joel.

I think, every time I load a new gallery, a new instance of Navigator component is being created. So I think I have to make sure only one instance of Navigator is created and update it with the new gallery. I am working on it and will update you if I am able to fix it.

Once again,Thanks a lot!!!
shoba

I was trying to implement singleton pattern using static initializers to create just one instance of Navigator and using the single instance I was trying to initialize the thumbnails for different galleries but it doesn't seem to work.
abhishekchess1

how can we show title of image below image,
could we do same vertically image gallery
abhishekchess1

how can we show title of image below image,
could we do same vertically image gallery
Shoba

I have fixed this problem. All we have to do is when loadGalleryXML (in Imagescroll.mxml) is called I check if nav is null.If its not null then I remove the nav and make it null.

public function loadGalleryXML(xml_base_url:String):void
{
if(nav!=null){
canv.removeChild(nav);
nav=null;
}
var ssp_xml_base_url:String = xml_base_url;
var myXMLURL:URLRequest = new URLRequest(ssp_xml_base_url);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener(“complete”, galleryXmlLoaded);
//addEventListener(Navigator.INIT_COMPLETE, onNavInit);
}
https://joelhooks.com Joel Hooks

Thank you so much Shoba. I really wanted to get to this, but didn't
have the time. I will apply your patch to the project. Cheers.
Shoba

I have fixed this problem. All we have to do is when loadGalleryXML (in Imagescroll.mxml) is called I check if nav is null.If its not null then I remove the nav and make it null.

public function loadGalleryXML(xml_base_url:String):void
{
if(nav!=null){
canv.removeChild(nav);
nav=null;
}
var ssp_xml_base_url:String = xml_base_url;
var myXMLURL:URLRequest = new URLRequest(ssp_xml_base_url);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener(“complete”, galleryXmlLoaded);
//addEventListener(Navigator.INIT_COMPLETE, onNavInit);
}
https://joelhooks.com Joel Hooks

Thank you so much Shoba. I really wanted to get to this, but didn't
have the time. I will apply your patch to the project. Cheers.
turlockshubh

Hi, Firstly great application looks real good, I loved it so much I wanted to have a slide show in my website too, I Downloaded the source code and the project created nicely.
It compiles and everything is good. I am using Flex Builder 3.

I get an error when I try to run the VESlideshow on my PC I get a windows pop up message which states the following

“File not found: file:/C:/Documents%20and%20Settings/shubht/My%20Documents/Flex%20Builder%203/VESlideshow/bin-debug/VESlideshow.html”

I dont know how this file is generated it was not in the zip file I downloaded.
Any pointers would be great
Thanks
Turlock
turlockshubh

Hi, Firstly great application looks real good, I loved it so much I wanted to have a slide show in my website too, I Downloaded the source code and the project created nicely.
It compiles and everything is good. I am using Flex Builder 3.

I get an error when I try to run the VESlideshow on my PC I get a windows pop up message which states the following

“File not found: file:/C:/Documents%20and%20Settings/shubht/My%20Documents/Flex%20Builder%203/VESlideshow/bin-debug/VESlideshow.html”

I dont know how this file is generated it was not in the zip file I downloaded.
Any pointers would be great
Thanks
Turlock
Vardan

Hi,

I have created the xml locally and stored under assets directory but when I run the application I get :
Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
When I close the debug message photos work fine but it doesn't work on different machines at all.

Any idea how can I solve the problem?

Thanks.
Vardan

Hi,

I have created the xml locally and stored under assets directory but when I run the application I get :
Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.
When I close the debug message photos work fine but it doesn't work on different machines at all.

Any idea how can I solve the problem?

Thanks.
Shoba

I found a simple fix for this last thumbnail image flickering issue. We calculate the total width of the thumbnails by adding the individual thumbnail widths. This we do it in initializeThumbnails() method in Navigator.as class. We have to increase the total width so that if there are 5 images, the total width should be equal to 6 images. SO at the end of for loop, I have included the following.

for each( var image:ImageVO in album.images )
{
…
…
totalWidth+=navItem.width;
count = count + 1;
}
totalWidth+=navItem.width; // this is the additional line to be added to fix the last
thumbnail flickering issue.

Hope it helps.
https://joelhooks.com Joel Hooks

Awesome Shoba. I committed it to the repository:

https://github.com/joelhooks/Continuous-Scrollin…
Shoba

I found a simple fix for this last thumbnail image flickering issue. We calculate the total width of the thumbnails by adding the individual thumbnail widths. This we do it in initializeThumbnails() method in Navigator.as class. We have to increase the total width so that if there are 5 images, the total width should be equal to 6 images. SO at the end of for loop, I have included the following.

for each( var image:ImageVO in album.images )
{
…
…
totalWidth+=navItem.width;
count = count + 1;
}
totalWidth+=navItem.width; // this is the additional line to be added to fix the last
thumbnail flickering issue.

Hope it helps.
https://joelhooks.com Joel Hooks

Awesome Shoba. I committed it to the repository:

https://github.com/joelhooks/Continuous-Scrollin…
Shoba

I am trying to move the selected image by 1 position instead of moving it to the center of navigator. I am not sure how to do it? Please help me!
Shoba

I am trying to move the selected image by 1 position instead of moving it to the center of navigator. I am not sure how to do it? Please help me!
Pingback: Continuous Scrolling Thumbnail Component for Flex | Building Blocks