BC Photo Gallery - Center Thumbnail Image
How to edit BC Photo Gallery Module
so thumbnail image is centered
Example a square photo next to a tall rectangle image
The tall image is align left - how to make it so image is centered in thumbnail area?
Message was edited by: WillzShireDDC
When you look at most galleries around you will notice they all keep the same aspect ratio for uniformaty. That is one thing and something you can set in the gallery module paramaters.
In terms of positioning etc it is a simple matter of CSS and what you do in that CSS is what ever you like.
Target the elements and apply CSS to them to style them.
Very easy
Similar Messages
-
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 -
How to transfer photo gallery with thumbnails from Fireworks?
Hi
I am trying to create a website. I am using Dreamweaver CS3
and for my main homepage I used one of their templates.
From my main page I give a link to photo gallery. I intend to
build a gallery in Fireworks as I will need a thumbnails for my
photos.
My question is how can I transfer the created gallery to
Dreamweaver CS3? I need the same template I used for my homepage
for my gallery?
Please help!
Thanksjcdesigns wrote:
> I am assuming you are building a photo gallery like you
can in photoshop. In
> Fireworks, are you going to something like:
File>Automate>Web Photo Gallery,
> and pointing to the folder where the images are located,
and Fireworks builds
> the pages, thumbnails and larger images by itself? If
this is the case, then
> you just need to make a link on your home page to the
gallery page.
>
> If you are building this all by hand, meaning you are
making and resizing all
> of the thumbnails and images yourself, you will need to
create a second page
> and place all the thumbnails on that, and link them to
the larger image files
> or pages with those images.
>
> www.projectseven.com has a REALLY good photo gallery for
Dreamweaver and
> Fireworks for a good price. That is the way to go.
Especially if you plan on
> making more photogalleries.
>
Resize your photos as needed to cut down their size use jpg
or png format.
save then in an outside folder.
next inside the directory you use for your web files create a
directory
with either the sme name as the outside folder or name
desired open that
directory.
Open up Dreamweaver and create a Blank HTML page.
Now go to Commands menu and and choose create web Photo
album...
next a menu will pop up and ask directory where images are
located. Then
will ask the destination directory browse to the new
directory you
created. You will also settings for Thumbnail size and
whether to use
captions if you do use captions it will use the file name of
of each
image and you will have to go in and edit the caption names
for the
photos as desired when everything is setup fireworks will
takeover and
create the album. it will create three subdirectories one
with the full
size photos , one with the thumbs, and one with the html
information for
each photo. Plus three other files in main directory one
being an html
file. once completed and Fireworks returns editing back to
Dreamweaver
close and don't save the blank html file. the index file
needed will be
created by Fireworks.
open the index file inside you album directory and edit
cations as needed.
Remember if you do this you'll need a total of 3 times files
of the
photos you use for example.
if you have 30 photos it will be a total of four directories
and 93 files.
for 20 it would be 63 files, for 10 33 files and so on.
If you need to add photos or take away photos the method is
to start
over from scratch and use you FTP program to do a recursive
delete on
the directory then re-upload.
Phillip M. Jones, CET |LIFE MEMBER: VPEA ETA-I, NESDA, ISCET,
Sterling
616 Liberty Street |Who's Who. PHONE:276-632-5045,
FAX:276-632-0868
Martinsville Va 24112 |[email protected], ICQ11269732, AIM
pjonescet
If it's "fixed", don't "break it"!
mailto:[email protected]
<
http://www.kimbanet.com/~pjones/default.htm>
<
http://www.kimbanet.com/~pjones/90th_Birthday/index.htm>
<
http://www.kimbanet.com/~pjones/Fulcher/default.html>
<
http://www.kimbanet.com/~pjones/Harris/default.htm>
<
http://www.kimbanet.com/~pjones/Jones/default.htm>
<
http://www.vpea.org> -
Photo gallery with thumbnail and caption
Hi,
am looking for a good photo gallery extention or application with thumbnails and captions, preferbly free or willing to pay for good working application, please help - would like to incorporate into website gallery page
thank youhello,
There is a web photo gallery extension called:
Web Photo Album 2.1 for Dreamweaver MX
You will need a copy of Fireworks to run it though.
Sometimes, I use Photoshop's automate web galelry and then use that file inside of my site.
If have to incorporate it into an existing page, I just copy and paste the code.
babs -
Photo Gallery - Load Detail Image
How can I load a different image other than the first one
listed in the XML file?
Example, let's say I have 20 photos in my XML file. The first
detail image (large) to load is the first one in the list, how can
I show the 15th one in the list when the page loads? The order of
the thumbnails must be in the order they appear in the XML file.
Hopefully that makes sense. Thanks.When you look at most galleries around you will notice they all keep the same aspect ratio for uniformaty. That is one thing and something you can set in the gallery module paramaters.
In terms of positioning etc it is a simple matter of CSS and what you do in that CSS is what ever you like.
Target the elements and apply CSS to them to style them.
Very easy -
Blurry Photos in Photo gallery and Interactive image widget--(iBooks Author)
The pictures that I put in my photogallery and in my interactive image widget were at first clear and would get bigger when I tapped on them (in preview mode on my iPad), and then all of the sudden, they all are blurry, and now when I tap on them, they don't get bigger/zoom! How do I fix this??
The iBook is about 80 pages, and there is an average of one widget per page, sometimes 2. There are a few galleries in which there are more than one picture, but many of them are simply with one picture (because this is the only way to make it get bigger when you tap on it when on the iPad). For the Interactive Image widgets, I took a screenshot of a google maps route, and then focused on different stops to show directions on my iBook. I just redid all of the photo galleries that were blurry, and they are fixed now (no longer blurry). BUT the interactive images are still blurry....maybe I just need to go back and redo them?
-
Making a lightbox photo gallery with thumbnails for 100+ photos
I have been trying to make the above (all is in an accordion). I started by merely using a thumbnail slide show, but that didn't work because I couldn't organise the thumbnails into multiple pages. So my solution was to first put a multiple page tooltip composition setup with position on lightbox, transition on horizontal and hide all intially unchecked. Then, within each tooltip slide I placed a lightbox slide show with 9 pictures. This way, there are multiple pages with 9 thumbnails on each, and clicking on one shows the enlarged picture. This presented 3 problems, which I need help to solve.
1) Appearance in design mode doesn't reflect appearance in browser preview. In design, everything is aligned and looks good, while in preview in browser it doesn't:
2) Upon clicking on thumbnail, the preview is behind the thumbnails:
3) Intially (in preview in browser) one must click on a target to show the tool tip slides.
Thanks in advance,
Chris
P.S: Also, my slideshow on the home page doesn't show in preview in browser mode, if you help with this it would also be aprecciated.Hi
Please check if thumbnails are placed in target container , as if thumbnails are placed in container then image with lightbox will also show the triggers.
If still same issue, please share the site url.
Thanks,
Sanjit -
Problem with mutiple photo gallery...
Hello,
I'm new to As3.0 (i'm a designer...) but I need to create a photo gallery, So I found a Tutorial On lynda.com.
I'm using a code that works perfectly, and modified it (copy and paste it) to have 2 SAME photo gallery (using different images) displayed on the page.
So I'm using a 2 thumbnails (one for each Gallery) and by scrolling on the X axis of each thumbnail you can see the differnet images availaible in the gallery. By clicking it displays the full size image in a container.
So far so good.
The problem is that when going form one gallery to another, the first viewed gallery doesnt allow the other gallery main size image to display simply because it is underneath it... Like if it was a layer under another top layer...
I would like to know if there is a way to make each gallery unload their full size image when clicking on the other gallery.
SORRY IF THIS IS A BIT UNCLEAR BUT CAN EXPLAIN IF YOU ASK...
HERE IS THE CODE
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
var container:MovieClip = new MovieClip();
var imageLoader:Loader;
var fullLoader:Loader = new Loader();
var frontIndex:int = 0;;
var containerMask:MovieClip = new MovieClip();
var segment:Number;
container.x = 115;
container.y = -185;
fullLoader.x = 275;
fullLoader.y = -185;
container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
container.addEventListener(MouseEvent.CLICK, showPic);
xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
function mcunload1(event:MouseEvent):void
fullLoader2.unload();
fullLoader.load(new URLRequest(xmlList[frontIndex].attribute("full")));
function xmlLoaded(event:Event):void
xml = XML(event.target.data);
xmlList = xml.children();
for(var i:int = 0; i < xmlList.length(); i++)
imageLoader = new Loader();
imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
container.addChild(imageLoader);
function changeThumb(event:MouseEvent):void
segment = container.width / container.numChildren;
frontIndex = Math.floor(container.mouseX / segment);
if(frontIndex <= container.numChildren - 1)
for(var j:int = 0; j < container.numChildren; j++)
container.getChildAt(j).visible = false;
container.getChildAt(frontIndex).visible = true;
function showPic(event:MouseEvent):void
fullLoader.unload();
fullLoader.load(new URLRequest(xmlList[frontIndex].attribute("full")));
addChild(fullLoader);
container.filters = [new DropShadowFilter()];
addChild(container);
//SECOND IMAGE GALLERY
//SECOND IMAGE GALLERY
var xml2:XML;
var xmlList2:XMLList;
var xmlLoader2:URLLoader = new URLLoader();
var container2:MovieClip = new MovieClip();
var imageLoader2:Loader;
var fullLoader2:Loader = new Loader();
var frontIndex2:int = 0;;
var containerMask2:MovieClip = new MovieClip();
var segment2:Number;
container2.x = 115;
container2.y = -80;
fullLoader2.x = 275;
fullLoader2.y = -185;
container2.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb2);
container2.addEventListener(MouseEvent.CLICK, showPic2);
xmlLoader2.load(new URLRequest("data/images2.xml"));
xmlLoader2.addEventListener(Event.COMPLETE, xmlLoaded2);
function mcunload(event:MouseEvent):void
fullLoader.unload();
fullLoader2.load(new URLRequest(xmlList2[frontIndex2].attribute("full")));
function xmlLoaded2(event:Event):void
xml2 = XML(event.target.data);
xmlList2 = xml2.children();
for(var i:int = 0; i < xmlList2.length(); i++)
imageLoader2 = new Loader();
imageLoader2.load(new URLRequest(xmlList2[i].attribute("thumb")));
container2.addChild(imageLoader2);
function changeThumb2(event:MouseEvent):void
segment = container2.width / container2.numChildren;
frontIndex2 = Math.floor(container2.mouseX / segment);
if(frontIndex2 <= container2.numChildren - 1)
for(var j:int = 0; j < container2.numChildren; j++)
container2.getChildAt(j).visible = false;
container2.getChildAt(frontIndex2).visible = true;
function showPic2(event:MouseEvent):void
fullLoader2.unload();
fullLoader2.load(new URLRequest(xmlList2[frontIndex2].attribute("full")));
addChild(fullLoader2);
container2.filters = [new DropShadowFilter()];
addChild(container2);This is just a quick guess. Whenever you call... fullLoader.unload(); also call fullLoader2.unload(); and vice versa.
-
Dw cs3: ho wto make rotating photo gallery
I would like to make a photo gallery where the images change every few seconds. How can I do this in Dreamweaver CS3/ Please respond here email me at [email protected] since it is the fastest way to reach me.
Nobody???
-
How do I only show thumbnails in the photo gallery without showing the Main Image?
Hello,
I need help customizing the Spry Photo Gallery Demo...
I would like for the Main Image To Be Hidden when the html
page loads. After the user clicks the thumbnail, I would like to
have the Main Image load centered on the page(with div containing
close button) on a z-index above the thumbnails. While the
thumbnails layer has a fade effect to 10%. After the user clicks
the close button the Main image disappears and the thumbnails layer
fades back to 100%. Then the user can click another thumbnail and
so on and so forth...
Is this possible? I have tried everything I can think of with
my limited knowlege of spry and cant get it to work. I just need
help with the Large image part. The close button and fades I can
handle.
Any help would be most appreciated. Please let me know if
further information is needed from me. Thank you in advance.There is a third-party program called Attachment Tamer that will do that for you. In the Terminal, you can type this:
defaults write com.apple.mail DisableInlineAttachmentViewing -bool yes
Also note that while Attachment Tamer does some things with the encoding that makes certain email clients display the item as an attachment, what shows up at the receiver's end is solely dependent on their email client and its settings. -
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 -
Hi. Is it possible to adjust the photo gallery module's code in a way that makes the image that gets displayed on selecting the thumbnail image display no larger than the browser? I have a client that's uploaded image that are pretty large and would prefer not to have to save them as smaller images if possible.
Thanks
GrantAre you by any chance saving as a JPEG or TIFF file?
The image size that Photoshop displays is the uncompressed file size - if you save in a format such as JPEG the image is compressed, which will result in a smaller file size.
Below is a comparison of the same image in Photoshop versus the compressed file saved to my computer:
Here's a more technical explanation of what's going on: http://photo.stackexchange.com/questions/15184/why-does-photoshop-show-my-jpeg-files-unusu ally-large
EDIT: If you want more accurate control over the image file size when saving, try going to File > Save for Web... You'll be able to choose your file format, and then see the resulting file size in the bottom left-hand corner of the window:
I hope this helps!
Cheers,
Kendall -
Troubleshoot Main Image for spry photo gallery
Hello, I am modifying some spry files to see if I can get the
hang of it using my images. I have taken the photo gallery files
gallery.js
SpryData.js
SpryEffects.js
xpath.js
The folder structure contains images and thumbnails on the
root folder as well as the ap.css sheet and photos.xml
The page is
http://www.proximita.com/learning/index.html.
Since I only have 1 photo gallery (and I did the getting
started tutorial and worked fine I wanted to add the slideshow
effect in the spry demo functionality) I only have one xml doc and,
as mentioned, the both image folders and the css sheet are on the
root, and the all the js files are in an includes folder.
The thumbnails show up fine, but, the main image does not
show up at all. I am almost sure this is a bad reference somewhere
or a begginners mistake but I cant find it.
I did modify the gallery.js because it referenced 2 or three
variables (like dsPhotos and dsGalleries that are used for the demo
I only have dsGallery) and I cahnged all of the other refrences to
dsGallery.
I think I am having problems here:
function ShowCurrentImage()
var curRow = dsPhotos.getCurrentRow();
SetMainImage("galleries/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
you can check out the whole code here:
http://proximita.com/learning/includes/gallery.js
Im unconcerned with appearance for the moment, and would just
like to see the main image and the slideshow functionality.
If you can help, please do. Thanks, Mario.yes, I suspect that is because the tutorial talks about
building this from scratch and uses that name for the "thumbnails"
div rather than what they actually use in the demo files...
confusing, to say the least.
It would be nice if there were a simple document with demo
files that didn't include other stuff unrelated to JUST the slide
show (gallery)... and if the whole layout were more simple,
css-layout-wise...
or, if the demo files were commented with what each bit is
for and how to modify it.
quote:
Originally posted by:
Dragos GEORGITA
Hi Mario,
I took a look at your sample and I've noticed you change the
ID of the container that holds the thumbnails (it was called:
"thumbnails". now it's "thumbContainer").
You need to open gallery.js and change the observer to point
to the new container:
Change
Spry.Data.Region.addObserver("thumbnails", function(nType,
notifier, data) {
To
Spry.Data.Region.addObserver("
thumbContainer", function(nType, notifier, data) {
Regards,
Dragos -
How to make Web Photo Gallery with 3 columns of thumbnails?
Hi all
I have used web photo galery to build a few sites, but always with thumbnails in a single, vertical column, within a frame that scrolls. and i have never mch liked that scrollbar.
I have come across this page:
http://www.mariannekolb.com/recent.html
which, as i look at the code, may not even be using web photo gallery, but is very similar.
anyhow, does anyone in this group have any idea how this multiple column thumbnail (without scroll bar) is accomplished?
thankshowsthisforaname wrote:
I see how the css works, and it is much superior to alternatives I have seen.
But I fear I may be overlooking something: are you manually coding the html, writing the captions, and creating the thumbs? or is there a program that generates these?
Manually coded the CSS. Used Photoshop to optimize images, watermark them and create thumbnails.
Used Dreamweaver to insert thumbnails, full-size images and caption text.
If you want software to do the heavy lifiting for you, look at jAlbum.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
This is the correct color form Google Image:
This is the color from Windows Photo Gallery:
It looks like it is a issue of Windows Photo Gallery bcause if the same image is opened in another program(Photoshop, paint, etc), the color stays same, the thumbnail color is correct as well. However, it is different in Windows Photo Gallery.
Does anyone know what the problem is?
Thanks.
W520 4276-23U | Intel i7-2920 XM CPU | 16 GB RAM | Nvidia Quardo 2000M | 1920x1080 Display | Intel Advanced- N 6205 | Color Sensor | Finger Print Reader | BIOS1.34Windows photo gallery is not colour profile aware, so assumes your monitor is sRGB. The same is true of the desktop wallpaper. There is nothing you can do about this, other than use a different default picture viewing application as default, or convert your images to the ICC profile of your monitor (which you can do in photoshop). I would only recommend this for wallpapers though.
Maybe you are looking for
-
Hi I have created a flex app for use by the employees of our company. There are 60 employees and we are all shift workers with various rotations of work days. In the application, an employees logs in and a datagrid appears. Inside the datagrid is a c
-
Xorg 1.8 and Genius UC-LOGIC Tablet WP5540U
Hello, work someone with type tablet type on xorg 1.8? I follow this instructions (http://bbs.archlinux.org/viewtopic.php?pid=786420), but this don't help me. Xorg hot-plug feature have be on, or off ? Thanks for any help!
-
Why does a specific web archive file show in a finder search by a specific person's name?
When searching by specific person's name in Finder, a specific .web archive file saved from a Safari browsing session appears. Why is this? Was the person's name entered into the browsing session? Was the .web archive file sent to the person?
-
Merging/Combining Partition D into the main Partition C using Windows 7.
Can I combine both partition C and Partition D and create a larger Partition C using Windows 7? I deleted the original Lenovo Recovery Partition Q, reformatted (NTFS) the unallocated empty Partition into a new Partition D with 13 GB of free space. M
-
Nikon D90 in CS3 - Project Setting?
I'm waiting on delivery of some HD footage shot with a Nikon D90. I've never created an HD project in CS3; there do not appaear to be any presets for HD other than HDV. Can anyone advise on how I would go about setting up an HD project? Thanks!