Overview

It's no secret that adding photos to your blog posts is one of the most effective ways to enhance your blog and attract attention to your writing. Flickr has millions of photos available in its database. A simple FREE tool called Flickr Gallery allows you to create a custom image gallery with a cool slide show of the most recent and most interesting photos from Flickr on your website or blog in a few easy steps. Just visit Flickr website and find photostream, photoset or a single photo you like. Enter the address of flickr page to add all photos from this page in your gallery, select the style of thumbnails and the overlay window and add the HTML embed code on your website or blog.
A few clicks and you'll see a stylish photo gallery with beautifull lightbox and zoom effects on your own website or blog!

Flickr Gallery for Windows   Flickr Gallery for MAC

Want more?

Example

Lightbox gallery sample

The following image set is generated by Flickr Gallery tool. Click any picture to run Lightbox gallery.

The example above is an in-page usage demo of Lightbox script with Flickr images. The lightbox gallery created with Flickr Gallery application is placed inside the page layout. You can also check the full-page demo gallery. This example takes whole browser area to show the website gallery.Embed Flickr Gallery As A Slideshow

How to Use

Step 1. Adding flickr images to your own gallery.


Locate the photo, photoset or photostream you want to use in your Flickr slideshow. Click on it to see the photo on its own page.

Copy URL of the flickr page.

Select Add images from Flickr... from the 'Add' button on the Toolbar.

Add images from Flickr

In the appeared window paste URL of the flickr page. Specify also the number of photos you want to add from the flickr page. Flickr Gallery will now include these photos in your project.

Add images from Flickr

If you have included the photos that you do not wish to be in your web gallery, you can easily remove them. Select all images that you wish to remove from photo gallery, and select Delete images. from the Images menu. You can pick and choose pictures by holding the CTRL while clicking the pictures you like.

Step 2. Adding caption.

The name of the photo on flickr page will automatically appear in the caption. When you select a photo you'll see the various info about it, such as: Path, Size, date of last change and Caption. You can add any comment or text about the photo (up to 512 symbols).

Step 3. Gallery properties.

Change the name of your flickr album, the size and quality of your pictures with Flickr Gallery. From the Gallery menu, select Properties or use "Edit Gallery Properties" button on the toolbar.

On the first tab of the Gallery Properties window you can change the name of your photo album and enable/disable the following properties: Slide Show, Auto play Slide Show, Zoom effect, Overlay Shadow. You can also set the Overlay shadow color and select the Engine you want to use (jQuery or Prototype + script.aculo.us).

On the second tab of the Gallery Properties window you can select the thumbnail you want to use, set the Thumbnails Resolution, Thumbnails Quality, Thumbnails Titles. Select Thumbnails Format (save in PNG or JPG format). Specify the Number of columns in you photo album and the Page color.

On the third tab of the Gallery Properties window you can select the template, Image resolution and Image quality of your pictures and change the Watermark.

You can set up the various sizes for exported images.

Control the quality of output PNG or JPEG format image by defining output "Image quality" and "Thumbnail quality" parameters (0%…100%).

Step 4. Save your photo gallery as project file.

When you exit Flickr Gallery application, you'll be asked if you want to save your project. The project consists of the pictures you choose to put on your web photo gallery and all your settings. It's a good idea to save the project, because that will allow you to change the project in case you decide to do something different with future galleries. So click Yes, then enter a name for your project. To select the location of your project, just click the Browse folders button and choose a different location. Then click Save.

Flickr Blogger Lightbox Flickr Badge Html

Download Flickr Gallery


Download Flickr Gallery Download Free Edition
for Windows
Download Flickr Gallery Download Free Edition
for MAC

Flickr Gallery is free for non-commercial use.

A small fee is required for business use. Flickr Gallery Business Edition additionally provides an option to remove the Flickr Gallery. Com credit line as well as a feature to put your own logo to images. After you finish the payment via the secure form, you will receive a license key instantly by e-mail that turns the Flickr Gallery Free Edition into a Business one. You can select the most appropriate payment method: check, credit card, PayPal, bank transfer etc. Also you can get Business Edition for free if you help with translating Flickr Gallery into your native language, please contact us at for more info.

Embed Flickr Widget Iweb

Buy Flickr GalleryBuy Business Edition
for Windows

$49
Single Website
$69
Unlimited Websites
Buy Flickr GalleryBuy Business Edition
for MAC

$49
Single Website
$69
Unlimited Websites

Support

For feature requests, troubleshooting, general help contact Customer Support at . Make sure to include details on your Flickr Gallery version, a link (or relevant code), operating system and a browser.Flickr Javascript Photoset Gallery

Feedback

    * I LOVE your free Lightbox2 software tool and will purchase the business version shortly. I have seen the Lightbox JS effect used with video tutorials and I was hoping you have a version for video that I can purchase.
Video LightBox: http://videolightbox.com

    * I find Flickr Gallery (and lightbox2) a great tool and was about to proceed in its purchase.

    * I downloaded your trial version to see if I could get it to work with my website, and I am almost there (I have been looking for something like this for ages)..Flickr Album Maker

    * I am thrilled with what this tool can do for me thanks for all the hard work that must have gone into it.

FAQ

Q:Instead of making one page with 40 photos, is there no property to make 2 or more pages?

A:You can do it in the following way:

1. Create your gallery in Flickr Gallery and publish it on a local drive in any test folder.
2. Make two copies of the generated index.html file (for example index1.html and index2.html).
3. Open index.html, index1.html and index2.html files in any text editor.
4. Find code for the gallery inside the BODY tag and cut some part of the images, so you'll have different images on each page.

<!-- Start Flickr Gallery.com BODY section -->
<div class="gallery">
<!-- leave the following code on index.html page -->
<a href="./data/images/1.jpg" rel="lightbox[sample]" title="Best Toy Ever"><img src="./data/thumbnails/1.png" /></a>
<a href="./data/images/8.jpg" rel="lightbox[sample]" title="PrueaMacro"><img src="./data/thumbnails/8.png" /></a>

<!-- leave the following code on index1.html page -->
<a href="./data/images/3.jpg" rel="lightbox[sample]" title="Macro Leaf."><img src="./data/thumbnails/3.png" /></a>
<a href="./data/images/11.jpg" rel="lightbox[sample]" title="Bell Pepper"><img src="./data/thumbnails/11.png" /></a>

<!-- leave the following code on index2.html page -->
<a href="./data/images/5_0.jpg" rel="lightbox[sample]" title="5"><img src="./data/thumbnails/5_0.png" /></a>
<a href="./data/images/6_0.jpg" rel="lightbox[sample]" title="6"><img src="./data/thumbnails/6_0.png" /></a>

<!--[if lte IE 6]><script src="engine/js/pngfix_vlb.js" type="text/javascript"></script><![endif]-->
<a id="vlightbox" href="http://Flickr Gallery.com/">Online Photo Album Sharing by Flickr Gallery.com</a>
</div>
<!-- End Flickr Gallery.com BODY section -->

5. Create links to switch between your pages, for example:
<a href="index.html">1</a>  <a href="index1.html">2</a>  <a href="index2.html">3</a> 


Q:I want to change color of the overlay shadow? How can I do this?

A:Open engine\css\Flickr Gallery.css and find the following code:

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #FFF;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

set the background-color parameter :

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #FF00FF;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}



RELATED

Flickr Widgets Flickr has a very popular widget that they call a flickr badge. The HTML badge can be controlled through stylesheets by blog where the badge is installed. You can see an example of a Flash Flickr badge to the left

Include Recent flickr Photos with PHP You can make your badge by going here and following the instructions. The html that flickr gives you should look something like this:

Building a Flickr Flash Display, Part 2 We made some simple modifications to Kelvin's ActionScript application, to create something like the Flickr Badge. Most of the work in that first part was done to deconstruct and change the HTML embedding code, separating the structure, the styling and the logic

Adding a Flickr Badge to Vox - The Composing Stick Another option is to add a Flickr badge to your sidebar. These badges can be flash based or simple html and can be customised to some degree to match you site style. The first step is to get the badge code. Go to to http://www.flickr.com/badge.gne (you will need to be signed into flickr)

How to create a Flickr Badge for your Website | eHow.com How to create a Flickr Badge for your Website. Flickr is a photo sharing website. A Flickr badge is neat option offered by Flickr for you to share your photos that are already uploaded onto your Flickr account. After creating your

Flickr Tutorial: How Do I Put a Flickr Badge on My Site? If you use the photo-sharing site Flickr and you have a blog or website on which you would like to share your Flickr information, you can create a Flickr badge. The badge showcases several photos and links to your Flickr profile, so that anyone

DEVELOPER | CREATE | WWW.ARMY.MIL Learn how to incorporate Army.mil branding, developer utilites, and content on your organization's web pages. You can generate your own Flickr badges at http://www.flickr.com/badge.gne* (requires a Yahoo login). This widget only requires that the user have JavaScript enabled

Custom Flickr Badge API Documentation | Elliot Swan While Flickr has a nice little tool for making Flickr badges, sometimes you just need more flexibility. Here I've documented the Flickr badge API and what HTML is being outputted so that you can seriously customize the way your photos are being displayed. Starting Out

Ryan Prins' Blog " How I Made My Flickr Badge The first thing you'll need to do, is head over to Flickr's Make a Badge page. Now, Flickr also includes a link back to Flickr.com at the top of the badge. I didn't really want that, so I deleted it from the produced code. If you're familiar with HTML, this is an easy find. Basically,

Flickr Badge Html : Flickr Gallery Flickr Badge Html. Flickr Slide Show creates Vista-style javascript photo gallery with minimum effort!. Add Flickr Slideshow To Tumblr Blog

WT Procedures: Flickr Badget Valid XHTML Tag | Web Go here for info: http://www.sometimesblog.com/2006/05/tutorial-flickr-badge-i-frame.html Copy and paste the modified badge code onto your web page. There will still be validation errors because Flickr's part of the badge code is not valid

How to: Add a Styled Flickr Photo Stream to Your Blog Once there, direct your eyes to the rightmost column and (2) look for the "Flickr badge" link underneath the heading, "Share your photos. When you reach the badge setup page, (3) the first thing you need to do is select the option to create "an HTML badge" and then click the "next"

Home " Flashandburn.net This little flickr badge maker application will create a nifty little The badge is just a short blurb of HTML that you can include anywhere allowing HTML. Get

Flickr DHTML Badge : tan tan noodles โ€“ msg free since 2005 Basic installation: (static photos list) โ€“ example: badge.html { Badge.addPhoto('http://www.flickr.com/photo1.jpg', 'http://www.flickr.com/photopage1.html') Badge.addPhoto('http://www.flickr.com

Flickr badge Just enter the URL of your Flickr album, set some simple options about how you want your badge to look, then you get a tailored HTML code, copy the HTML provided and paste it into the source code for your web page to generate the same result. It is flexibility and easy to use

Creating a Web Slice for your flickr badge ยง The Adventures Creating a Web Slice for your flickr badge. March 16 , 2009 leave a comment. Once upon a to try it on my flickr badge because it is the most updated portion

Flickr badge โ€” Jeroen Leijen raw:: html #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;} #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid

Flickr for Web Developers - School of Pharmacy This is a Flickr badge for for the Flickr group called UCSF Laurel Heights. Copy the HTML provided and paste it into the source code for your web page to generate the same result

Compender: Display Your Photos By Adding A Flickr Badge To All you need to do is get the Flickr Badge embed code from Flickr and paste it into an HTML/JavaScript page element. Of course, to get the Flickr badge to blend seamlessly with your layout, there are improvements to the styling you can apply

Flickriver - A new way to view Flickr photos and more Flickriver - view images as a 'river of photos' and more Use Flickriver Badge Creator to create a badge linking to your photos, your group or any other Flickriver view. You can place your badge on your Flickr profile, Blog or Website. Add to your iGoogle or Netvibes page

Flickr Badge

UContent: Flickr Badges Also, you can easily embed sets of photos from Flickr to a web page -- see the Olathe Public Library's Tour below. I have also added the RSS feed to the "Your Books" Flickr Group. I did this by using "feed to javascript." Flickr HTML badge of

Remote JavaScript includes without the performance penalty Here's how you can keep your Flickr badge (or any other JavaScript include) from slowing down page rendering with just a few lines of code. the Flickr include, so by the time our code runs, we know that the hidden div contains the badge HTML

Make your own custom code for a Wordpress-style Flickr badge To create a nicer looking Flickr badge, use Flickr's badge creation tool to get the right user code and content codes for your badge. Go to: Create your own Flickr badge and make the selections as specified: Choose HTML badge. Select the content you want to show

Phil801 โ€“ Geek Blog " How to get a: Facebook Badge, Flickr The first step to building your Flickr Badge is to select whether you want HTML or Flash for your badge โ€“ the one you'll see on the right side of my blog is Flash based. load than the HTML Flickr Badge does. Next, select what photos you want in your Flickr Badge โ€“ you can have

Displaying thumbnails of your flickr photos without slowing Displaying thumbnails of your flickr photos without slowing down your web site. Here you can download a script to add a badge that shows the thumbnails of your flickr photos to any HTML document or blog with some HTML and a JavaScript include