Flickr gallery

This custom widget does not apply to all themes. Check your theme's description first, to make sure it's included.

 

To add this tab script to your website, you just need to add some HTML code to the desired page.

The Code

Paste this code in the content area where you want the gallery to be displayed:

<div id="flickr_div" class="widget widget-flickr"></div> 

Simple Flickr Gallery

To return a simple list of images from Flickr, add this script below previous div :

<script type="text/javascript">
$(document).ready(function() {
$('#flickr_div').flickrGallery('FLICKR_SET_ID', 'YOUR_FLICKR_API_KEY', 'NUMBER_OF_PHOTOS');
}); </script>

Flickr Gallery with PrettyPhoto

To return a list of images from Flickr, and provide immediate click and preview functionality, add this script below previous div :

<script type="text/javascript">   
$(document).ready(function() {          // if you want to show gallery thumbs in prettyPhoto you need to set a name for your gallery in 'GALLERY_NAME'          // set gallery_name to false to hide gallery thumbs in PrettyPhoto $('#flickr_div').prettyFlickrGallery('FLICKR_SET_ID', 'YOUR_FLICKR_API_KEY',false)
         $('#flickr_div').prettyFlickrGallery('FLICKR_SET_ID', 'YOUR_FLICKR_API_KEY', 'NUMBER_OF_PHOTOS', 'GALLERY_NAME');      }); </script>

 

Images size

If you need to change the aspect ratio of the images in the list, you can edit the .css file in your theme (file name depends on the CMS platform) and add to the bottom:

 

.widget-flickr a,
.widget-flickr a img {height: 100px; width: 100px;}

 

Adjust values as necessary.

Have more questions? Submit a request

Comments

  • Avatar
    Web Daily

    This doesnt work in DNN 6. The HTML module strips out the <script>

  • Avatar
    Beatriz Oliveira

    Hi, for DNN6 you can edit the module's settings, and add the code to Advanced Settings > Header.

    Cheers!

  • Avatar
    Web Daily

    The images all come through HUGE (full size), how do you make them display in thumbnails?

  • Avatar
    Beatriz Oliveira

    The theme includes in file widgets.css the following CSS code:

    .widget-flickr a img {... height: 50px; width: 50px;}

    This sets a size for the thumbnail images.

  • Avatar
    Web Daily

    Right, the images are showing but not with the correct aspect, the hover icon is not there and it is displaying all images in the set. Can it be limited to say 12 images?

  • Avatar
    Web Daily

    Also the skin falls apart in IE7

  • Avatar
    Beatriz Oliveira

    Can you share a link to your page? Thanks.

  • Avatar
    Web Daily
  • Avatar
    Mariana Silva

    I open a support ticket where we can help you.

  • Avatar
    Web Daily

    So what is the answer for this, the aspect ratio is way off and there is no way to limit the number of images displayed (we only want 12)

  • Avatar
    Beatriz Oliveira

    You can set the banner image size to whatever you want. Which is the desired image size?

    About a maximum number of items, the Nivo Slider ( http://nivo.dev7studios.com/) does not have that feature.

  • Avatar
    Brian E

    How can you get the pictures to open in a new window or in a slideshow type format? If you click the thumbnail it opens the window but if a user closes it, it closes the session.

  • Avatar
    Beatriz Oliveira

    You have the option of using the gallery with PrettyPhoto, which opens the images as a slideshow on a popup. (see above)

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk