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

Similar Messages

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!

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

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.

BC Photo Gallery thumbnails the same size proportionally

Hi
Is there a way to make all the tumbnails of a photo gallery the same size/proportion even if the original photos have different sizes/proportions without distorting them?
Thanks!

Yes, check the module information here:
http://docs.businesscatalyst.com/dev-assets/reference#!/module-reference/photo-galleries/m odule_photogallery.html

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!

Help - Photo Gallery

Hi, am new to web design...I
'm a volunteer for a animal charity and I am trying to design a new web site....I
want to imbed a photo gallery thumbnails that the home can have access to, to up
load new pictures, and stories of the animals etc.....something like
http://www.dogstrust.org.uk/sponsor/default.aspx can anyone help? I am using Dreamweaver 8 currently, much appreciated Jason

Has this charity got a budget at all, if only small? If so perhaps the best image gallery extentions come from a company claled PV11. I can highly recomend them and their supoort is good. They have their own user forum.
http://www.projectseven.com/products/galleries/hgmagic/features.htm
http://www.projectseven.com/products/galleries/ssm/ssm_03.htm
There are also loads of FREE solutions on the web BUT you have to be a bit code savy to get theses to work:
http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions
Heres a couple form the page above:
http://fancybox.net/
http://coffeescripter.com/code/ad-gallery/

Business Catalyst Help | Create and insert a form

This question was posted in response to the following article: http://helpx.adobe.com/business-catalyst/using/create-insert-form.html

I want to ask also if the opt-in forms in business catalyst can be embedded on a different website that's not hosted in BC. Like other email clients (mailchimp, aweber etc.) you can embed their forms to any website.
Is this possible for the BC email marketing forms?

Help with code for inserting horizontal scroll bar in photo gallery in Business Catalyst site?

Hi,
I am using Business Catalyst and Dreamweaver to create a trial site.
I am not sure if this is the correct forum to post this request but anyway I have inserted a photo gallery module at the bottom of the sidebar in the homepage of my test site.
Can anyone advise on whether jquery or any other code can be inserted into the page or module code that will replace the "next" hyperlink below the first 4 photos with a horizontal scroll bar at bottom of the gallery so users can just scroll through all 12 images ?
Kind Regards, Matt.
http://craftime-bs6.businesscatalyst.com/

Alyssa,
Have you tried putting this rule back as it was originally:
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto; /*was 9px*/
    color: #EF9CCF;
    background-color: #FFF;
That is, changing your 9px back to auto.
And giving us a link (as you did) is much better than printing out the code for us! Thanks!
Beth

Creating a photo gallery / portfolio for a client to manage (CMS & Business Catalyst)

I have been asked to create a website for a client, the client is a photographer and wants a site to promote her nursery school photography business. She would like to be able to manage the site herself using the BC dashboard, uploading images as and when needed. I use Muse to create sites and have informed the client that for any kind of CMS they need to host with Business Catalyst.
My issue is creating a relatively limitless photo gallery / portfolio. As I understand it a client can upload and change images on their site using the BC dashboard, providing there is a slot available to do so. I believe Business Catalyst has a photo gallery module on their Webmarketing package, would this be what I am looking for? Failing that are there any good workarounds available for my client using Muse alone?
In the future the client is looking for secure zones within the site and also an online ordering system, but right now it's a fairly simple promotional site with a good gallery of pics.
I posted a similar question last week, someone very kindly suggested Smugmug, I looked into a separate solution (including Smugmug) but it's not suitable in this case and I would rather stick to Muse, BC and Adobe.

Hi
Yes, you can use Photo Gallery module, where your client would be able to upload new images from site backend and update the module. Also with photo gallery there are other parameters which they can use for image display.
https://www.youtube.com/watch?v=x-MuLyhxS5o
https://www.youtube.com/watch?v=Hg8pB1cLvnk
For future preferences , your client can setup secure zones, online shop etc from site admin.
Let me know if you have any questions.
Thanks,
Sanjit

Export preset to Business Catalyst Photo Gallery Module

Does anyone know of a Export Preset to Business Catalyst Photo Gallery Module. Similar to the ones available for exporting to Smugmug or Zenfolio?

If you're a little familiar with Business Catalyst, you might find this widget helpful.
It's a BC Photo Gallery - Muse Widget, Its very easy to use and customize.
There is a training video on how to set it up.
However Brad is right, you'll need to upgrade to BC webMarketing Plan.

Can I add a business catalysts Photo Gallery module to Muse.

Can I add a business catalysts Photo Gallery module to Muse - As my client want to upload images themselves to the gallery.
I know that with the Muse plugin this is not possible. Therefore wanted to see if the photo gallery module in BC would work the same as the Blog Module?
Thanks

If you're a little familiar with Business Catalyst, you might find this widget helpful.
It's a BC Photo Gallery - Muse Widget, Its very easy to use and customize.
There is a training video on how to set it up.
However Brad is right, you'll need to upgrade to BC webMarketing Plan.

Lightroom not uploading web gallery to Business Catalyst

I generated a photo gallery in Lightroom to use on my Business Catalyst hosted site, but when I go to upload the gallery I get an "unknown error has occurred". After searching this on Google, it appears that this is a rather common problem that has been going on for some time. Any idea why it happens? And more importantly, is there a way to fix it?
Thanks!

Blank page or one from the “home template” files put fine.
But when I use the “default template” nothing happens.
says it is putting and that transfer is complete… but nothing is there… see this page:
http://htlv.businesscatalyst.com/abouthtl.html
log says:
Started: 5/5/2013 3:09 PM
Connected to HTL.
Path was: /_mm
Path was: /_mm
Templates\Default.dwt - Put operation successful
File activity complete.
Files updated: 1
Finished: 5/5/2013 3:09 PM
But nothing is actually put.

Photo gallery with Thumbnail View in Flex 3

Hello everyone
I very urgently need an answer to a very simple qeuestoon. I have been trying really hard since days to get a solution to this simple problem but in vain.
I am building an application in Flex 3. I simply want to create a photo gallery with a thumbnail where when the user clicks on a thumbnail, the image is shown in the canvas/tab navigator box next to it. The images are stored in a local folder (in src) are ARE NOT on available on any web link.
The Vbox with the thumb image and the .xml file has been created. But when I click on the thumbnail, the full image cannot be seen in the application. I dont know if this is a problem with data binding or what.
Please help!!!
Thanks a ton.

Check the folder structure
Flash is not able to get some file thats why the IO Error.
trace the url path just before u load the file and u will be abel to find whether that file is in specified folder or not.
http://www.darshanrane.com

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

Similar Messages

Maybe you are looking for