Instagram vegg med paginering

Dan-Levi · 3. juli 2014

Hei,

Jeg finner ikke så mange tutorialsene der ute på dette emnet så tenkte å bidra med noe jeg kodet sammen.

Har du tanker om forbedringer osv må du bare skrike ut, men jeg har ikke rukket å refactore noe så det blir nok en del endringer før koden taes i bruk på noe public side.

Javascript

$(function () {

	var client_id = 'KLIENTIDHER';
	var user_id = 'BRUKERIDHER';
	var Instagram = {};

	var pageBtn = $('#pageBtn');
	Instagram.search = search;
	Instagram.search(user_id);

	$(window).scroll(function() {
	   if($(window).scrollTop() + $(window).height() == $(document).height()) {
	   		pageBtn.html('<img src="images/preloader.gif" />');
	    	fetchMore(user_id,pageBtn.attr('data-max-tag-id'));
	   }
	});

	pageBtn.on('click', function(event) {
		event.preventDefault();
		fetchMore(user_id,pageBtn.attr('data-max-tag-id'));
	});

	function openMenu() {
		$('.instapic').hover(function () {
        	$(this).children('.overlay').fadeIn();
	    }, function () {
	        $(this).children('.overlay').fadeOut();
	    });
	}

	function fbShare() {
		$('.fbicon').on('click', function(event) {
			event.preventDefault();
			icon = $(this);
			pic = icon.attr('src');
			$.ajax({
				url: 'url_shortener.php',
				type: 'POST',
				dataType: 'json',
				data: {longUrl: $(this).data('img')},
				success:function(res) {
					icon.css('-webkit-transform', 'rotate(10deg)');
					if (res.status == 'ok') {
						if (typeof w == 'undefined' || w !== encodeURIComponent(res.shortened_url)) {
							w = encodeURIComponent(res.shortened_url);
							window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(res.shortened_url));
						}

					} else {
						if (typeof w == 'undefined' || w !== encodeURIComponent(res.shortened_url)) {
							w = encodeURIComponent(res.shortened_url);
							window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent($(this).data('img')));
						}
					}
				}
			})
			.done(function() {
				icon.attr('src', pic);
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			});

		});
	}

	function twShare() {
		$('.twicon').on('click', function(event) {
			event.preventDefault();
			icon = $(this);
			pic = icon.attr('src');
			$.ajax({
				url: 'url_shortener.php',
				type: 'POST',
				dataType: 'json',
				data: {longUrl: $(this).data('img')},
				success:function(res) {
					icon.css('-webkit-transform', 'rotate(10deg)');
					if (res.status == 'ok') {
						if (typeof w == 'undefined' || w !== encodeURIComponent(res.shortened_url)) {
							w = encodeURIComponent(res.shortened_url);
							window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(icon.data('title')+" - www.mainlymen.com") + "%21&url=" + encodeURIComponent(res.shortened_url));
						}

					} else {
						if (typeof w == 'undefined' || w !== encodeURIComponent(res.shortened_url)) {
							w = encodeURIComponent(res.shortened_url);
							window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(icon.data('title')+" - www.mainlymen.com") + "%21&url=" + encodeURIComponent($(this).data('img')));
						}
					}
				}
			})
			.done(function() {
				icon.attr('src', pic);
			})
			.fail(function() {
				console.log("error");
			})
			.always(function() {
				console.log("complete");
			});

		});
	}

	function openComments() {
		modalcomments = $('#modalcomments')
		modalcommenttitle = $('#modalcommenttitle');
		modalcommentscontent = $('#modalcommentscontent');
		$('.commentsicon').on('click', function(event) {
			event.preventDefault();
			icon = $(this);
			icon.css('-webkit-transform', 'rotate(10deg)');
			modalcommenttitle.html(icon.data('title'));
			content1 = "<img alt='"+ icon.data('title') +"' class='img-responsive' src='" + icon.data('img') + "' />";
			content2 = "<br>";
			content3 = "<hr>";
			content4 = "<iframe height='400px' scrolling='yes' id='fbcommentsiframe' src='https://www.facebook.com/plugins/comments.php?href=" + encodeURIComponent(icon.data('img')) + "'></iframe";
			modalcommentscontent.html(content1.concat(content2,content3,content4));
			modalcomments.modal();
		});
	}



	function toScreen(photos){
		if (photos.pagination.next_max_id == pageBtn.attr('data-max-tag-id')) {
			pageBtn.html('You have reached the end of our Instagram feed" />');
		} else {
			pageBtn.attr('data-max-tag-id', photos.pagination.next_max_id);
			$.each(photos.data, function(index, photo){
				// console.log(photo);
				str1 = "<div class='col-md-4 instapic'>";
				str2 = "	<span class='overlay'>";
				str3 = "		<span class='social_icons'>";
				str4 = "			<a title='Share on Facebook'><img class='fbicon' alt='Share on Facebook' src='images/social_icons/facebook.png' data-img='"+photo.link+"' data-title='"+ photo.caption.text +"' /></a><span class='fbcount'>0</span>";
				str5 = "			<a title='Share on Twitter'><img class='twicon' alt='Share on Twitter' src='images/social_icons/twitter.png' data-img='"+photo.link+"' data-title='"+ photo.caption.text +"' /></a><span class='twcount'>0</span>";
				str6 = "			<a title='Comments'><img class='commentsicon' alt='Comments' src='images/social_icons/speachbubble.png' data-img='"+photo.images.standard_resolution.url+"' data-title='"+ photo.caption.text +"' /></a><span class='comcount'>0</span>";
				str7 = "		</span>";
				str8 = "		<span class='imageTitle'>"+ photo.caption.text + "</span><br>";
				str9 = "		<span class='timeago' data-livestamp='"+photo.caption.created_time+"'></span>";
				str10 = "		<span class='share_url'>Grab the link<br>";
				str11 = "			<input type='text' style='display:none;' class='form-control' onClick='this.select();' value='"+photo.link+"'></input>";
				str12 = "		</span>";
				str13 = "	</span>";
				str14 = "	<img class='img-responsive' alt='"+ photo.caption.text +"' src='"+ photo.images.standard_resolution.url + "' />";
				str15 = "</div>";
				photo = str1.concat(str2,str3,str4,str5,str6,str7,str8,str9,str10,str11,str12,str13,str14,str15);
				$('div#photos-wrap').append(photo);
			});
			$("div.instapic").each(function(index) {
				if ($(this).css('visibility') !== 'visible') {
					$(this).delay(100*index).css('visibility','visible').hide().fadeIn(300);
				};
			});

			$('.share_url').on('click', function(event) {
				event.preventDefault();
				$(this).find('input').slideDown('fast',function() {
					$(this).select();
				});
			});


			if (pageBtn.html() == '<img src="images/preloader.gif" />') {
				pageBtn.html('More pics please!');
			};
			openMenu();
			fbShare();
			twShare();
			openComments();

		}
	}

	function search(the_user_id){
		var url = "https://api.instagram.com/v1/users/" + the_user_id + "/media/recent?callback=?&client_id="+client_id;
		$.getJSON(url, toScreen);
	}

	function fetchMore(the_user_id,next_max_id) {
		if (typeof next_max_id === 'string' && next_max_id.trim() !== '') {
			var url = "https://api.instagram.com/v1/users/" + the_user_id + "/media/recent?callback=?&client_id="+client_id+'&max_id='+next_max_id;
			$.getJSON(url, toScreen);
		}
	}

});

Markup

<div id="modalcomments" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 id="modalcommenttitle" class="modal-title">Modal title</h4>
      </div>
      <div id="modalcommentscontent" class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="container" id="photos-wrap"></div>
<div class="container">
	<div class='paginate'>
		<a id="pageBtn" class='btn btn-primary' data-max-tag-id='' href='#'>More pics please!</a>
	</div>
</div>
<script type="js/jquery.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/livestamp.min.js"></script>
<script src="js/iframeResizer.min.js"></script>

Endret 3. juli 2014 av JanTerjeRiisOttoJohansen

Lycantrophe · 3. juli 2014

Det er når jeg ser ting som toScreen jeg innser at jeg faktisk har en fremtid i programmeringsverdenen.

Endret 3. juli 2014 av Lycantrophe

Dan-Levi · 3. juli 2014

Hva betyr det

Lycantrophe · 3. juli 2014

At det er horribelt skrevet.

Dan-Levi · 3. juli 2014

At det er horribelt skrevet.

Det var ikke noe hyggelig sagt, kom heller med noe konstruktivt i stedet for å oppføre deg slik.

Lycantrophe · 3. juli 2014

Jeg sa det ikke for å være hyggelig.

Hvorfor allokerer du hele 15 strenger for så å konkatenere de for så å assigne til loop-argumentet for så bare å appende på en node?

Dan-Levi · 3. juli 2014

Nei du er kanskje ikke noen hyggelig fyr?

Jeg allokerer 15 strenger og konkatinerer dem fordi jeg finner det enkelt å holde oversikt på den måten i stedet for å skrive alt i en streng, ikke er det spesielt krevende heller.

Jeg er kanskje ikke på samme nivå som deg i programmering, derfor er det heller bedre om du gir tips til forbedringer i stedet for å være hoven, eller lar vær å skrive.

Lycantrophe · 3. juli 2014

Tips: tenk over hvorfor du gjør ting.

Flytt for eksempel hele string-creator-tingen din til en egen funksjon og bare kall den med objektet ditt (eller unpacked values) som argument. Ryddigere, du slipper en bazillion variabler (som i javascript er globale. Bruk var) og lettere å håndtere både nå og senere.

Endret 3. juli 2014 av Lycantrophe

Logg inn

Instagram vegg med paginering

Anbefalte innlegg

Dan-Levi

Lenke til kommentar

Videoannonse

Lycantrophe

Lenke til kommentar

Dan-Levi

Lenke til kommentar

Lycantrophe

Lenke til kommentar

Dan-Levi

Lenke til kommentar

Lycantrophe

Lenke til kommentar

Dan-Levi

Lenke til kommentar

Lycantrophe

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer