Tweaking Gallery Thumbnails

Hi
I have implemented the spry gallery into my site (the xml
version). As usual as soon as I get it working I want to tweak it.
I am displaying the thumbnails in a row at the top of the page
(rather than the box in the demo). I am trying to figure a way of
making the thumbnails "scroll" so that you see 10 thumbnails and
click to see the next 10 and so on. I have found this jquery script
http://gmarwaha.com/jquery/jcarousellite/index.php#demo
that more or less does what I want. It seems to want HTML to work
on so I have not been able to get to work with my site. I was
wondering if anyone has a clue how to do this with Spry.
Thanks in advance.

U mean this..
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html

Similar Messages

Photo Gallery thumbnails in business catalyst render in different sizes in different browsers

Photo Gallery thumbnails in business catalyst render in different sizes in safari and chrome but are fine in firefox. What is the issue with Safari? I have tried the different algorithm options such as fill_proportional etc and firefox is the only browser that displays correctly. I thought safari was the most standards compatible browser - what's the problem here?

Hi,
If you have seperate XML file but with the same basic structure then you can change the XML a Spry dataset refers to and regenerate the spry region without reloading the full page.
So on my photo gallery page I can change the album the photos are shown from via the seturl sprydata function as below. dsPhotos being my Spry dataset that points to the relevant XML dataset with my image references and captions etc. My XML is actually dynamically generated from Picasa RSS feeds (and RSS feeds are XML) but the principle will be the same with your static XML.
First I add an event listener for when someone clicks on an album (the li tag within my div with the id "albums" holds a photo and title for each album.)
function Albums()
var myalbums = Spry.$$("#albums li", "TabbedPanels1")
var rows = dsAlbums.getData();
var setListener = function( element, value )
Spry.Utils.addEventListener( element, "click", function(){ showAlbum( value ); },false );
for( var i = 0, length = myalbums.length; i < length; i++ )
setListener( myalbums[i], i );
Then this is the code which changes the photo album to be shown. (when the user clicks the relevant album)
function showAlbum(i)
pauseShow();
pImage = 'No';
var rows = dsAlbums.getData();
var albumid = rows[i]["albumid"];
var url = "xml/PicasaAphotoFeed.asp?albumid=" + albumid;
dsPhotos.setURL(url);
dsPhotos.loadData();
var rowcount = dsAlbums.getRowCount() - 1;
var nextalbum;
var navnext;
var n;
The page is here www.thehmc.co.uk/photo5.html is you want to see it in context.
In your case showAlbum would switch between Frank.xml or Wolfie.xml depending on how you decide to name your xml datasets.
Regards
Phil

Customise button wording for 'NEXT' that appears with Photo Gallery Thumbnails

Is it possible to customise the wording of the 'NEXT' button that appears with the photo gallery thumbnails? ie, if you only have 5 thumbnails on page, but the gallery has more pics, a NEXT button is generated, but we'd like it to say MORE IMAGES instead....

thank you!

Web gallery thumbnails missing

when I publish a web gallery it seems to work. I can go to the gallery online and view photos.
When I go to another one of my computers to work in iPhoto the gallery shows up, but the thumbnails are showing up as question marks. What's up with that?
Am I missing something?
Thanks

I am having the same problem. On my second computer (ibook), when I go to iPhoto, I see the Web Galleries created through the first computer (imac), but I do not see all the thumbnails, only the dotted outlines. I have five galleries. One has all thumbnails, two have some of them (and outlines) and two have only the outlines.
I went to iphoto>Preferences>Web Gallery. Then I clicked the "Check Now" button to the right of Check for Updates (top row). Not sure if this is a program error, user error, or maybe even network error as I'm using my ibook on a different (and perhaps weaker) wireless network.

Image size/quality on N79 gallery: thumbnails only...

On my N79, if I use the gallery to browse through my pictures, it shows thumbnails correctly, but if I try to view an image at full-screen, or zoom in on it, all I get is the thumbnail-sized image! Should I be waiting for images to buffer or is this something else that will have to wait for the next Software Update.
(Images are being saved at the correct size, they look fine on my computer or in the camera app.)
Help I'm trapped in a sig factory.

Turns out I just had to wait a moment or two longer, it works fine.
Help I'm trapped in a sig factory.

Dynamic Spry Photo Gallery Thumbnails

I'm implementing the XML version of the Spry Photo Gallery. I
need to edit the size of of the thumbnails and make them larger,
roughly 100x130 or maybe a little smaller. Since I have so many
photos, I was planning to use CSS to handle the overflow with a
scrollbar. I noticed sizing occurs in the Index file, Gallery.js,
and in the XML file. Are there any others that im missing? I'm
having a problem with resizing them, they dont resize when I adjust
the size in those places. Any suggestions would be appreciated.
Thanks
link (select Tattoo from the dropdown):
http://www.bugsartwork.com/beta/gallery/index.html

I overlooked screen.css, there was some css that was setting
the thumbnail img tag.

Web Gallery - thumbnails link to the wrong photos

anyone else got this issue? Ive uploaded various galleries, and it seems .mac is a bit confused. See, I have many photos in iPhoto that are titled e.g. CIMG09878. That was never a problem. Now though on the net, in the web gallery, if I click on one of the thumbnails with that title, it opens a photo from another gallery. Any idea how I can get around this without having to rename hundreds of photos?

Thank you, joev and Bob,
Update to the text below: I just realized that documentation explains how to call some file from the HTML content of the Web Content Overlay, not how to get the HTML content inside the Web Content Overlay. I can probably do redirect to the train1.html from plain HTML code inserted into Web Content Overlay. So there is no way to use link to the file as for the http://webServerPath/Cartoons/train1.html?
We have 1 html file that uses 1 image file, both files inside the folder inside HTMLResources.zip and I need to display that html, so:
HTMLResources.zip/Cartoons/train1.html
HTMLResources.zip/Cartoons/train1.png - referenced inside train1.html
If I use http URL, e.g.
http://webServerPath/Cartoons/train1.html
then everything works, if I try to set that URL to the HTMLResources:
../../../HTMLResources/Cartoons/train1
or
../../../HTMLResources/Cartoons/train1.html
I'm getting an error, even documentation explains what link should be used.
Workaround when we just use the local HTML folder also works.
Thank you!

Increase LR 5 Web Gallery Thumbnails

Hi,
I had control over the size of the thumbnails in Photoshop 7.X, but it appears that the LR 5 thumbnails are a fixed size when you create a gallery and post them to the server. How do you control the size of the thumbnails in the posted web galleries?
Thank you,
PP

it is possible to adjust the size of the thumbnails by getting into the code behind the scenes... There's a fairly involved bit of math which works out spacing, etc but it should be possible to work out for your specific instance.
HTH
Rob

Gallery thumbnails wrong

Hi All, After loading some photos from a SD card and later deleting them, the Gallery program still shows the thumbs from those deleted pics for the new pictures taken by the Thrive camera. I've tried deleting the thumbs in the DCIM/.thumbnails to no avail. Anyone got an idea what's happening?

I have been shuffling and shuffling and things get worse. Mis-matched thumbnails and inverted mis-matched thumbnails. Is there an alternative to this dreadful program? I need something that will give accurate thumbnails, allow me to sequence the pictures, and allow me to put the pictures in albums. I have tried Toshiba Media Player but it is slow and fails to let me view pictures one by one. I bought PicFolio but it is more for viewing and uploading pictures on Picasa Web. Is there a non-web version of Picasa?
JVH

Photo gallery thumbnails quality

Hi guys
Please see this link:
http://stsstone.businesscatalyst.com/gallery-by-stone-beige-limestone
The thumbnails render in low quality. How can I fix that?
Thanks
Micha

Hey Micha:
{module_photogallery,ID,rowLength,targetFrame,resultsPerPage,Width,Height,UseStandardMetho d}
You can add additional parameters to the Photo Gallery module to customize it further:
{module_photogallery,ID,rowLength,targetFrame,resultsPerPage,Width,Height,UseStandardMethod}
The following parameters are accepted:
ID - System generated ID (Do not change this number.)
rowLength - Set the number of photos displayed per row
targetFrame - Set the destination frame where the photos will open (such as _blank)
resultsPerPage - Set the number of photos displayed per page
Width/Height - Set the width and height of the thumbnail images. The default value is 80 pixels wide by 80 pixels high.
UseStandardMethod - Use the standard Thumbnail Generation. Set to False for better thumbnail quality (with increased file size).
Examples
This updated module tag displays 4 photos per line and a maximum of 12 photos per page. The thumbnail size has also been set to 120x120 pixels:
{module_photogallery,id,4,,12,120,120,true}
Note: If an image is 640 pixels wide x 400 pixels high and you set the thumbnail size to 120 x 120 pixels the thumbnail image will have a maximum width of 120 and a smaller height. Proportions are respected when creating the thumbnail image. Alternatively if the image dimensions are 400 pixels wide x 640 pixels high then the height will be 120 pixels and the width smaller. The thumbnail size dictates the maximum width or the maximum height of the image.
Knowledgebase has all this stuff so it is a good place to always check for the otions:
http://kb.worldsecuresystems.com/134/bc_1345.html#main_Photo_Gallery_Modules

Gallery Thumbnails Disappeared

I am working on a book that has several image galleries in it. All of them have been working fine, until I just recently added a new one. The new one works perfectly, but suddenly all the others show blank squares where the thumbnail images should be displayed. All the full-sized images display properly, and tapping on the thumbnail squares brings up the correct image in the main window, just no thumbnails. I tried deleting the book preview from my iPad and reloading it, and deleting the newest image gallery, but nothing seems to work. Anyone experience this or have a suggestion how to fix this?

None of the images is over 1024 pixels (many are less), they are all cropped and otherwise edited before loading, all are JPG, etc. The thumbnails work perfectly in the last gallery added, but just suddenly stopped in all the others, and even after deleting the last gallery, the thimbnails are still missing from the others. They appear as a preview is loading but disappear the moment the preview finishes downloading.

Gallery Thumbnails

Hello Everyone,
I have to design a gallery with more than 50 images.
After uploading the files, Muse is displaying all the 50 thumbnails. This looks really messy!
Is there a way to showcase only a maximum number of thumbnails, lets say the first 5..
and go to the next 5, by clicking on a button or arrow?

Hello
At this stage, with the Muse slideshows, either all the thumbnails will be shown, or you can disable the thumbnails, and then none of the thumbnails will be shown. There's no option to show a selected number of thumbnails.
Parikshit

Flash Image Gallery Thumbnails

Ok...
So i built myself an image gallery where you could click a
next button and the next image would be displayed. VERY simple. Now
i have decided to make thumbnails. I have an xml file, and i want
to automatically load each thumbnail onto the stage where i want
it. If possible i want these thumbnails not to be a seperate image,
but a scaled down version of the original. Also, i obviously want
to be able to scroll, i dont care how (buttons or scrollbar etc.),
the thubnails if there are too many thumbnails to fit.
How would i go about doing something like this?
Cheers

BUMP!

XML Driven Flash Photo Gallery Thumbnails

Hi,
I need to make a XML Driven Photo slide in Flash CS5.
It needs to have a Box that contains 5 Thumbnails(by XML) act as buttons.
The Box sits on top of the Main photo area and shrinks (or close out) when user click its close button. And it opens out by clicking on a open button.
I'm sure it can be done by using timeline, Tweening or you name it..But what about the Thumbnails that run from the XML file?
Can they disappear with the Box and retrieve when it opens? is it possible?
If yes, what would be the best way to do that?
Any comment would be greatly appreciated!
Here is the ActionScript.
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
import fl.controls.Button;
import flash.display.Shape;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.text.TextField;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.Shader;
var hasloaded:Boolean = false;
var firstLoaded:Boolean = false;
var barWidth:int;
var barHeight:int;
var images;
var imageCount:int;
var thumbnailArray:Array = new Array();
var bigImageArray:Array = new Array();
var descriptionArray:Array = new Array();
var xmlLoader:URLLoader = new URLLoader();
var imageXML:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("slideshow.xml"));
function LoadXML(e:Event):void {
    imageXML = new XML(e.target.data);
    ParseImages(imageXML);
Populates the arrays with the image values
and the text for each picture.
function ParseImages(imageInput:XML):void {
    var iconList:XMLList = imageInput.image.icon;
    var mainImageList:XMLList = imageInput.image.mainimage;
    var descriptionList:XMLList = imageInput.image.description;
    for (var i:int = 0; i < iconList.length(); i++) {
        var imageElement:XML = iconList[i];
        //trace(imageElement);
        thumbnailArray[i] = imageElement;
    for (var j:int = 0; j < mainImageList.length(); j++) {
        var mainimageElement:XML = mainImageList[j];
        //trace(mainimageElement);
        bigImageArray[j] = mainimageElement;
    for (var l:int = 0; l < descriptionList.length(); l++) {
        var descriptionElement:XML = descriptionList[l];
        //trace(descriptionElement);
        descriptionArray[l] = descriptionElement;
    loadImages();
function loadImages():void{
    trace("inside of loadimages function.");
    trace(thumbnailArray.length);
    for(var i:int=0; i < thumbnailArray.length; i++){
        trace(thumbnailArray[i]);
        populateContainers(thumbnailArray[i], i);
        //populateContainers2();
        trace("Loaded " + thumbnailArray[i]);
var loader:Loader;
var xStart = -210;
var ypos = -34;
var currentPos = xStart;
var incrementValue = 66;
This takes in the name of the image file and
displays it within the newly created movie clip
function populateContainers(file:String, pos:int):void{
    //create a movie clip to hold the image
    var mc:MovieClip = new MovieClip();
    mc.graphics.beginFill(0xFFFFFF);
    mc.graphics.drawRect(0, 0, 50, 51);
    mc.graphics.endFill();
    mc.buttonMode = true;
    mc.x = currentPos;
    mc.y = ypos;
    mc.name = "thumb_" + pos;
    mc.addEventListener(MouseEvent.CLICK, clickHandler);
    loader = new Loader();
    //loader.mask = imagemask;
    var url:URLRequest = new URLRequest(file);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadInitialImage);
    loader.load(url);
    //add the image to the movie clip
    mc.addChild(loader);
    this.imageBar.addChild(mc);
    //increment the currentPos
    currentPos += incrementValue;
function clickHandler(e:MouseEvent):void{
    var str:String = e.currentTarget.name;
    var index:int = int(str.substr(6,1));
    if(hasloaded) {
        this.mainWindow.removeChild(loader);
    loader = new Loader();
    loader.load(new URLRequest(bigImageArray[index]));
    this.mainWindow.addChild(loader);
    TransitionManager.start(this.mainWindow,{type:Fade, direction:Transition.IN, duration:2, easing:Regular.easeOut});
    //setChildIndex(loader, 0);
    hasloaded = true;
    loadText(index);
function loadText(index:int):void {
    Object(this).imageBar.txtdescription.text = descriptionArray[index];
function loadInitialImage(event:Event):void {
    if(!firstLoaded) {
        loader = new Loader();
        loader.load(new URLRequest(bigImageArray[0]));
        this.mainWindow.addChild(loader);
        TransitionManager.start(this.mainWindow,{type:Fade, direction:Transition.IN, duration:2, easing:Regular.easeIn});
        //setChildIndex(loader, 0);
        hasloaded = true;
        loadText(0);
    firstLoaded = true;
/* This section defines the buttons that control the image bar */
Object(this).imageBar.btnBarOpen.addEventListener(MouseEvent.MOUSE_UP, openImageBar);
function openImageBar(event:MouseEvent):void {
    this.gotoAndPlay(1);

thank you!

XML Driven Flash Photo Gallery Thumbnails Control

Hi, I need to make a XML Driven Photo slide in Flash CS5.
It needs to have a Box that contains 5 Thumbnails(by XML) act as buttons.
The Box sits on top of the Main photo area and shrinks (or close out) when user click its close button. And it opens out by clicking on a open button.
I'm sure it can be done by using timeline, Tweening or you name it..But what about the Thumbnails that run from the XML file?
Can they disappear with the Box and retrieve when it opens? is it possible?
If yes, what would be the best way to do that?
Any comment would be greatly appreciated!
Here is the ActionScript.
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
import fl.controls.Button;
import flash.display.Shape;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.text.TextField;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.Shader;
var hasloaded:Boolean = false;
var firstLoaded:Boolean = false;
var barWidth:int;
var barHeight:int;
var images;
var imageCount:int;
var thumbnailArray:Array = new Array();
var bigImageArray:Array = new Array();
var descriptionArray:Array = new Array();
var xmlLoader:URLLoader = new URLLoader();
var imageXML:XML = new XML();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("slideshow.xml"));
function LoadXML(e:Event):void {
    imageXML = new XML(e.target.data);
    ParseImages(imageXML);
Populates the arrays with the image values
and the text for each picture.
function ParseImages(imageInput:XML):void {
    var iconList:XMLList = imageInput.image.icon;
    var mainImageList:XMLList = imageInput.image.mainimage;
    var descriptionList:XMLList = imageInput.image.description;
    for (var i:int = 0; i < iconList.length(); i++) {
        var imageElement:XML = iconList[i];
        //trace(imageElement);
        thumbnailArray[i] = imageElement;
    for (var j:int = 0; j < mainImageList.length(); j++) {
        var mainimageElement:XML = mainImageList[j];
        //trace(mainimageElement);
        bigImageArray[j] = mainimageElement;
    for (var l:int = 0; l < descriptionList.length(); l++) {
        var descriptionElement:XML = descriptionList[l];
        //trace(descriptionElement);
        descriptionArray[l] = descriptionElement;
    loadImages();
function loadImages():void{
    trace("inside of loadimages function.");
    trace(thumbnailArray.length);
    for(var i:int=0; i < thumbnailArray.length; i++){
        trace(thumbnailArray[i]);
        populateContainers(thumbnailArray[i], i);
        //populateContainers2();
        trace("Loaded " + thumbnailArray[i]);
var loader:Loader;
var xStart = -210;
var ypos = -34;
var currentPos = xStart;
var incrementValue = 66;
This takes in the name of the image file and
displays it within the newly created movie clip
function populateContainers(file:String, pos:int):void{
    //create a movie clip to hold the image
    var mc:MovieClip = new MovieClip();
    mc.graphics.beginFill(0xFFFFFF);
    mc.graphics.drawRect(0, 0, 50, 51);
    mc.graphics.endFill();
    mc.buttonMode = true;
    mc.x = currentPos;
    mc.y = ypos;
    mc.name = "thumb_" + pos;
    mc.addEventListener(MouseEvent.CLICK, clickHandler);
    loader = new Loader();
    //loader.mask = imagemask;
    var url:URLRequest = new URLRequest(file);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadInitialImage);
    loader.load(url);
    //add the image to the movie clip
    mc.addChild(loader);
    this.imageBar.addChild(mc);
    //increment the currentPos
    currentPos += incrementValue;
function clickHandler(e:MouseEvent):void{
    var str:String = e.currentTarget.name;
    var index:int = int(str.substr(6,1));
    if(hasloaded) {
        this.mainWindow.removeChild(loader);
    loader = new Loader();
    loader.load(new URLRequest(bigImageArray[index]));
    this.mainWindow.addChild(loader);
    TransitionManager.start(this.mainWindow,{type:Fade, direction:Transition.IN, duration:2, easing:Regular.easeOut});
    //setChildIndex(loader, 0);
    hasloaded = true;
    loadText(index);
function loadText(index:int):void {
    Object(this).imageBar.txtdescription.text = descriptionArray[index];
function loadInitialImage(event:Event):void {
    if(!firstLoaded) {
        loader = new Loader();
        loader.load(new URLRequest(bigImageArray[0]));
        this.mainWindow.addChild(loader);
        TransitionManager.start(this.mainWindow,{type:Fade, direction:Transition.IN, duration:2, easing:Regular.easeIn});
        //setChildIndex(loader, 0);
        hasloaded = true;
        loadText(0);
    firstLoaded = true;
/* This section defines the buttons that control the image bar */
Object(this).imageBar.btnBarOpen.addEventListener(MouseEvent.MOUSE_UP, openImageBar);
function openImageBar(event:MouseEvent):void {
    this.gotoAndPlay(1);

thank you!

Tweaking Gallery Thumbnails

Similar Messages

Maybe you are looking for