28172 sujets

CSS et mise en forme, CSS3

Bonsoir

je bloque un peu sur un détail...
J'affiche sur mon site des photos instagram...
J'aimerais également afficher la date du post et le nombre de likes de chaque photo sur la photo...

Quelqu'un pourrait m'aider ?

Merci d'avance

Voici mon code javascript (récupéré sur le web) :

(function($) {
	$.everydayImInstagrammin = {
		defaults: {
			clientID: 'null',
			accessToken: 'null',
			numberPics: '12',
			imgClass: 'everyday-img',
			sequenceFadeIn: 'true',
			sequenceDuration: '220',
			captions: 'false',
			captionAlign: 'bottom',
			instaType: 'instaUser'
		}
	};
	$.fn.extend({
		everydayImInstagrammin: function(options) {
			$.extend($.everydayImInstagrammin.defaults, options);
			return this.each(function() {
				var elem = $(this);
				var clientID = options.clientID;
				var accessToken = options.accessToken;
				var numberPics = options.numberPics;
				var imgClass = options.imgClass;
				var sequenceFadeIn = options.sequenceFadeIn;
				var sequenceDuration = options.sequenceDuration;
				var captionAlign = options.captionAlign;
				var hashTag = options.hashTag; // #hashTag
				var instaUrl = 'https://api.instagram.com/v1/users/' + clientID + '/media/recent/?access_token=' + accessToken + '&callback=?';
				if (options.instaType === 'byHash') {
					instaUrl = 'https://api.instagram.com/v1/tags/' + hashTag + '/media/recent/?access_token=' + accessToken + '&callback=?';
				}
				$.ajax({
					type: "GET",
					dataType: "jsonp",
					cache: false,
					url: instaUrl,
					success: function(data) {
						for (var i = 0; i < options.numberPics; i++) {
							if (data.data[i].hasOwnProperty('caption')) {
								var caption = '';
								if (data.data[i].caption !== null) {
									caption = data.data[i].caption.text;
								}
								elem.append("<li class='everyday-item'><a target='_blank' href='" + data.data[i].link + "'><img class='" + options.imgClass + "' src='" + data.data[i].images.standard_resolution.url + "' /><div class='everyday-caption'><p>" + caption + "</p></div></a></li>");
							} else {
								elem.append("<li class='everyday-item'><a target='_blank' href='" + data.data[i].link + "'><img class='" + options.imgClass + "' src='" + data.data[i].images.standard_resolution.url + "'  /></a></li>");
							}
						}
						if (options.captionAlign === 'bottom') {
							$('.everyday-caption p').css({
								position: 'absolute',
								bottom: '10px'
							});
						}
						if (options.captionAlign === 'top') {
							$('.everyday-caption p').css({
								position: 'absolute',
								top: '10px'
							});
						}
						if (options.sequenceFadeIn === 'true') {
							var sequenceFade = 0;
							$('.' + imgClass).hide().each(function() {
								$(this).delay(sequenceFade).fadeIn(100);
								sequenceFade += sequenceDuration;
							});
						}
						//captions
						$("li.everyday-item a").on({
							mouseenter: function() {
								$(".everyday-caption", this).filter(':not(:animated)').fadeIn(400);
							},
							mouseleave: function() {
								$(".everyday-caption", this).fadeOut(400);
							}
						});
					}
				});
			});
		}
	});
})(jQuery);


[/i][/i][/i][/i][/i][/i][/i]