Flickr Gallery

Stream photos from your flickr account to your webpage with jquery.

Local: CSS/JS files (add code to <HEAD> section):


<!-- DC jflickrfeed -->
<link href="dcodes/flickr/css/dc_jflickrfeed.css" type="text/css" rel="stylesheet" />
<script src="dcodes/flickr/js/jflickrfeed.js"></script>

<!-- DC jflickrfeed: Colorbox Lightbox -->
<link href="dcodes/flickr/js/colorbox/colorbox.css" rel="stylesheet" type="text/css" media="screen" /> 
<script src="dcodes/flickr/js/colorbox/jquery.colorbox-min.js"></script>

<!-- DC jflickrfeed: Cycle Slider -->
<script src="dcodes/flickr/js/cycle/jquery.cycle.all.js"></script>

          

Hosted: CSS/JS files (add code to <HEAD> section):


<!-- DC jflickrfeed -->
<link href="http://cdn.dcodes.net/2/flickr/css/dc_jflickrfeed.css" type="text/css" rel="stylesheet" />
<script src="http://cdn.dcodes.net/2/flickr/js/jflickrfeed.js"></script>

<!-- DC jflickrfeed: Colorbox Lightbox -->
<link href="http://cdn.dcodes.net/2/flickr/js/colorbox/colorbox.css" rel="stylesheet" type="text/css" media="screen" /> 
<script src="http://cdn.dcodes.net/2/flickr/js/colorbox/jquery.colorbox-min.js"></script>

<!-- DC jflickrfeed: Cycle Slider -->
<script src="http://cdn.dcodes.net/2/flickr/js/cycle/jquery.cycle.all.js"></script>

          

Flickr Feed with LightBox

View code:


<!-- DC Flickr Feed Start -->
<div id="dc_jflickr_feed_container" style="width:80%;">
  <ul id="jflickr_cbox" class="dc_jflickr_thumbs"></ul>
</div>
<!-- DC Flickr Feed End -->
<div class="dc_clear"></div> <!-- line break/clear line --> 

<!-- DC Flickr Feed Settings --> 
<script type="text/javascript">
	$('#jflickr_cbox').jflickrfeed({
		limit: 16, // number of images to show
		qstrings: { id: '25182021@N05' // id of flickr gallery (use idgettr.com to get flickr gallery id)
		},
		// Small images: {{image_s}}
		// Medium images: {{image}}
		// Large images: {{image_b}}
		itemTemplate: '<li>' + '<a rel="colorbox" href="{{image_b}}" title="{{title}}">' + '<img src="{{image_s}}" alt="{{title}}" />' + '</a>' + '</li>'
	}, function(data) {
		$('#jflickr_cbox a').colorbox();
	});
</script>
  
         

Flickr Slider (12+ customizable transitions)

View code:


<!-- DC Flickr Slider Start -->
<div id="dc_jflickr_slider_container">
  <ul id="dc_flickr_slider"></ul>
  <div class="flickr_slider_nav"><a id="flickr_slider_prev" href="#"><<</a> <a id="flickr_slider_next" href="#">>></a></div>
</div>
<!-- DC Flickr Slider End -->
<div class="dc_clear"></div> <!-- line break/clear line --> 

<!-- DC Flickr Slider Settings --> 
<script type="text/javascript">
	$('#dc_flickr_slider').jflickrfeed({
		limit: 14, // number of images to show
		qstrings: {
			id: '13547802@N05' // id of flickr gallery (use idgettr.com to get flickr gallery id)
		},
		// Small images: {{image_s}}
		// Medium images: {{image}}
		// Large images: {{image_b}}
		itemTemplate: '<li><a href="{{image_b}}" title="{{title}}" target="_blank"><img src="{{image}}" title="{{title}}" /><div>{{title}}</div></a></li>'
	}, function(data) {
		$('#dc_flickr_slider div').hide();
		$('#dc_flickr_slider').cycle({
			timeout: 3000, // ms before next slide  (3000 = 3 seconds)
	  		   fx: 'scrollHorz', // scrollHorz, scrollVert, fade, shuffle, turnDown, zoom, wipe, fadeZoom, toss, uncover, curtainX, curtainY
  	  	 prev: '#flickr_slider_prev', 
    		 next: '#flickr_slider_next'
		});
		$('#dc_flickr_slider li').hover(function(){
			$(this).children('div').show();
		},function(){
			$(this).children('div').hide();
		});
	});
</script>
  
         

Flickr Slideshow

View code:


<!-- DC Flickr Gallery Start -->
<iframe src="http://www.flickr.com/slideShow/index.gne?group_id=&user_id=43335486@N00&set_id=&text=" frameBorder="0" width="650" height="650" scrolling="no"></iframe>
<!-- DC Flickr Gallery End -->

Parameters:
---------------------

&group_id - group id of flickr gallery (find your user/group id at: http://idgettr.com/ )
&set_id - show gallery by set id
&user_id - user id of flickr gallery (find your user/group id at: http://idgettr.com/ )
&tags - show certain images by tags
&text - show certain images by text search
width - width of flickr gallery
height - height of flickr gallery




© TemplateAccess