Top

Follow me and receive all the latest free scripts:

By Email:

Categories
Most Popular Posts

jQuery PhotoStream Script

jQuery PhotoStream Script

Published January 24, 2015 by , category jQuery

jQueryPhotoStream

How to create a PhotoStream for your photos website...

Introduction

With this tutorial you will be able to create a Photo Stream for your website. This plugin may be used on your website home page or, if you own a photos website with photos belonging to users, you can install an individual user PhotoStream.

The script is simple, once installed, you call a function echo photoStream(5, 6, 1); with 3 arguments:

  1. Argument 1: the user Id (5 in this case),
  2. Argument 2: number of photos per page (in this case 6 photos per slide),
  3. Argument 3: page number you want to start the stream (usually 1).

What else?

Nothing much, you can easily change the left/right arrow image, enlarge thumbnail, increase the padding around etc...Just check the very light css.

Live demo

Click left or right arrows to slide left or right.

User Id: 5 - Total Photos: 20 - Page: 1 out of 4

Files architecture

index.php
db.class.php

ajax

tuto-photostream.php

jquery

jquery-1.10.1.min.js

design

js

tuto-photostream.js

Database structure sample

Here is a database sample I use (feel free to add/remove/change fields depending of your need or your current database structure):

Structure

  1. id: a standard auto increment field,
  2. user_id: the Id of the user who posted the photo,
  3. photo_id: not necessary, just the Id of the photo,
  4. description: description of the photo,
  5. photo: URL to the photo,
  6. url: link to the photo page.

Data

20 photos I use for the demo which belong to the user_id number 5.

--
-- Table structure for table `tc_tuto_photo_stream`
--

CREATE TABLE IF NOT EXISTS `tc_tuto_photo_stream` (
  `id` int(6) NOT NULL AUTO_INCREMENT,
  `user_id` int(6) NOT NULL,
  `photo_id` int(6) NOT NULL,
  `description` varchar(255) NOT NULL,
  `photo` varchar(255) NOT NULL,
  `url` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 ;

--
-- Dumping data for table `tc_tuto_photo_stream`
--

INSERT INTO `tc_tuto_photo_stream` (`id`, `user_id`, `photo_id`, `description`, `photo`, `url`) VALUES
(1, 5, 43519, 'Photo 1', 'http://www.landolia.com/photo/2014/photo-salt-pans-landscape-trapani-sicily-43519-small.jpg', 'http://www.landolia.com/italy/trapani/43519'),
(2, 5, 43116, 'Photo 2', 'http://www.landolia.com/photo/2014/photo-vicenzo-village-stromboli-island-43116-small.jpg', 'http://www.landolia.com/italy/aeolian-islands/43116'),
(3, 5, 43057, 'Photo 3', 'http://www.landolia.com/photo/2014/photo-view-of-matera-43057-small.jpg', 'http://www.landolia.com/italy/matera/43057'),
(4, 5, 42673, 'Photo 4', 'http://www.landolia.com/photo/2014/photo-flamants-roses-en-camargue-42673-small.jpg', 'http://www.landolia.com/france/camargue/42673/'),
(5, 5, 42452, 'Photo 5', 'http://www.landolia.com/photo/2014/photo-albi-tarn-france-42452-small.jpg', 'http://www.landolia.com/france/albi/42452'),
(6, 5, 41942, 'Photo 6', 'http://www.landolia.com/photo/2014/photo-abbatiale-sainte-foy-conques-aveyron-41942-small.jpg', 'http://www.landolia.com/france/conques/41942'),
(7, 5, 41815, 'Photo 7', 'http://www.landolia.com/photo/2013/photo-viaduc-de-millau-41815-small.jpg', 'http://www.landolia.com/millau/millau-viaduct/41815'),
(8, 5, 41812, 'Photo 8', 'http://www.landolia.com/photo/2013/photo-viaduc-de-garabit-41812-small.jpg', 'http://www.landolia.com/ruynes-en-margeride/garabit-viaduct/41812'),
(9, 5, 41733, 'Photo 9', 'http://www.landolia.com/photo/2013/photo-eglise-sainte-marthe-de-tarascon-41733-small.jpg', 'http://www.landolia.com/france/tarascon/41733/'),
(10, 5, 41701, 'Photo 10', 'http://www.landolia.com/photo/2013/photo-pont-du-gard-41701-small.jpg', 'http://www.landolia.com/vers-pont-du-gard/pont-du-gard/41701'),
(11, 5, 41508, 'Photo 11', 'http://www.landolia.com/photo/2013/photo-bridges-canal-venice-italy-41508-small.jpg', 'http://www.landolia.com/italy/venice/41508'),
(12, 5, 40987, 'Photo 12', 'http://www.landolia.com/photo/2013/photo-valle-de-la-luna-bolivia-40987-small.jpg', 'http://www.landolia.com/la-paz/moon-valley/40987'),
(13, 5, 40950, 'Photo 13', 'http://www.landolia.com/photo/2013/photo-gate-of-the-sun-tiwanaku-40950-small.jpg', 'http://www.landolia.com/bolivia/tiwanaku/40950/'),
(14, 5, 40679, 'Photo 14', 'http://www.landolia.com/photo/2013/photo-rizieres-de-dong-van-vietnam-40679-small.jpg', 'http://www.landolia.com/vietnam/landscape/40679'),
(15, 5, 40215, 'Photo 15', 'http://www.landolia.com/photo/2013/photo-tombeau-des-askias-gao-mali-40215-small.jpg', 'http://www.landolia.com/gao/tomb-of-askia/40215/'),
(16, 5, 40221, 'Photo 16', 'http://www.landolia.com/photo/2013/photo-site-archeologique-de-kankou-moussa-gao-mali-40221-small.jpg', 'http://www.landolia.com/mali/gao/40221/'),
(17, 5, 40205, 'Photo 17', 'http://www.landolia.com/photo/2013/photo-fleuve-niger-dune-rose-gao-mali-40205-small.jpg', 'http://www.landolia.com/gao/la-dune-rose/40205'),
(18, 5, 39699, 'Photo 18', 'http://www.landolia.com/photo/2013/photo-kakku-lac-inle-birmanie-39699-small.jpg', 'http://www.landolia.com/burma/inle-lake/39699'),
(19, 5, 39639, 'Photo 19', 'http://www.landolia.com/photo/2013/photo-lac-inle-birmanie-39639-small.jpg', 'http://www.landolia.com/burma/inle-lake/39639/'),
(20, 5, 40214, 'Photo 20', 'http://www.landolia.com/photo/2013/photo-roseaux-pirogue-gao-mali-40214-small.jpg', 'http://www.landolia.com/mali/gao/40214');

Database connection

Page db.class.php.

Please check this tutorial to see how I handle MySQL database connection and this one to learn how to connect a MySQL database using PDO.

HTML/PHP code

This is the index.php page (the complete structure). I include the CSS style lines (which may be placed in a style.css file) and the function photoStream which can also be placed in a separate file. I have commented a maximum of lines.

<?PHP
include('db.class.php');
$bdd = new db();
?>
<!DOCTYPE>
<html>
<head>
	<title>Photostream tutorial</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="stylesheet" href="style.css" type="text/css" />
	
	<style>
		.arrow_left { display: block; background: url("design/arrow-left.png") no-repeat; width: 23px; height: 23px; margin-bottom: 14px; }
		.arrow_left:hover { background-position: 0 -23px; width: 23px; height: 23px }
		.arrow_right { display: block; background: url("design/arrow-right.png") no-repeat; width: 23px; height: 23px; margin-bottom: 14px; }
		.arrow_right:hover { background-position: 0 -23px; width: 23px; height: 23px }
		
		.photo { width: 60px; height: 60px; margin-left: 5px; margin-right: 5px; border: 0; }
		#photostream { display: inline-block; }
		
		#go-left { display: inline-block; }
		#go-right { display: inline-block; }
	</style>
</head>

<body>	
<?php
// display the photostream for a User Id with a certain number of thumbnail (6 in our case), from the page 1
function photoStream($userId, $displayedPhotos, $streamPage) {
	global $bdd;
	
	$start = ($streamPage-1) * $displayedPhotos;
	
	// Select $displayedPhotos photos (6 photos) from database from $start
	$photos = $bdd->getAll('SELECT photo, description, url FROM tc_tuto_photo_stream WHERE user_id = '.$userId.' LIMIT '.$start.', '.$displayedPhotos.'');
	// Count the total number of photos for this user
	$numPhotos = count($bdd->getAll('SELECT id FROM tc_tuto_photo_stream WHERE user_id = '.$userId.''));
	// Calculate the page number
	$numPages = ceil($numPhotos/$displayedPhotos);
	
	if ($streamPage > 1) { // if page > 1 go-left rel attribute contains a json
		// create a json including the user id, number of photos to display and previous page number
		$leftArrowRel = array('userId' => $userId, 'displayedPhotos' => $displayedPhotos, 'streamPage' => $streamPage - 1);
		$leftArrowRel = json_encode($leftArrowRel);
	} else { // if page = 1 go-left rel attribute is off
		$leftArrowRel = 'off';
	}
	
	// Create a json for the go-right rel attribute
	// The json contains the user id, number of photos to display and previous page number
	$rightArrowRel = array('userId' => $userId, 'displayedPhotos' => $displayedPhotos, 'streamPage' => $streamPage + 1);
	$rightArrowRel = json_encode($rightArrowRel);
	
	echo '<div id="go-left" class="arrow_left" rel='.$leftArrowRel.'></div>'; // Left arrow
	echo '<div id="photostream">';
	
	foreach($photos as $photo) { // Display photos
		echo '<a href="'.$photo['url'].'" target="_blank"><img class="photo" src="'.$photo['photo'].'" alt="" title="'.$photo['description'].'" /></a>';
	}
	echo '</div>';
	echo '<div id="go-right" class="arrow_right" rel='.$rightArrowRel.'></div>'; // Right arrow
	
	// Some stream info
	echo '<div id="photoStreamInfo">User Id: <b>' . $userId . '</b> - Total Photos: <b>' . $numPhotos . '</b> - Page: <b>' . $streamPage . '</b> out of ' . $numPages . '</div>';
}

echo photoStream(5, 6, 1); // user_id, nbr photos, page number
?>


<script type="text/javascript" src="jquery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/tuto-photostream.js"></script>

</body>
</html>

PHP code

It's the ajax/tuto-photostream.php file, called by the Ajax function for data treatment.

<?php
include('../db.class.php'); // Connection to database
$bdd = new db();

if($_POST) {
	$userId = $_POST['userId'];
	$displayedPhotos = $_POST['displayedPhotos'];
	$streamPage = $_POST['streamPage'];
	
	$start = ($streamPage-1) * $displayedPhotos;
	
	$photos = $bdd->getAll('SELECT photo, description, url FROM tc_tuto_photo_stream WHERE user_id = '.$userId.' LIMIT '.$start.', '.$displayedPhotos.'');
	$numPhotos = count($bdd->getAll('SELECT id FROM tc_tuto_photo_stream WHERE user_id = '.$userId.''));
	$numPages = ceil($numPhotos/$displayedPhotos);
	
	if ($streamPage > 1) {
		$leftArrowRel = array('userId' => $userId, 'displayedPhotos' => $displayedPhotos, 'streamPage' => $streamPage - 1);
		$leftArrowRel = json_encode($leftArrowRel);
	} else {
		$leftArrowRel = 'off';
	}
	
	if ($streamPage < $numPages) {
		$rightArrowRel = array('userId' => $userId, 'displayedPhotos' => $displayedPhotos, 'streamPage' => $streamPage + 1);
		$rightArrowRel = json_encode($rightArrowRel);
	} else {
		$rightArrowRel = 'off';
	}
	
	$newPhotoSet = '';
	
	foreach($photos as $photo) {
		$newPhotoSet .= '<a href="'.$photo['url'].'" target="_blank"><img class="photo" src="'.$photo['photo'].'" alt="" title="'.$photo['description'].'" /></a>';
	}
	
	$dataBack = array('newPhotoSet' => $newPhotoSet, 'rightArrowRel' => $rightArrowRel, 'leftArrowRel' => $leftArrowRel, 'numPages' => $numPages, 'numPhotos' => $numPhotos);
	$dataBack = json_encode($dataBack);
	
	echo $dataBack;
}
?>

jQuery code

It's the js/tuto-photostream.js file.

$(function () {
	if ($('#go-left').attr('rel') == 'off') $('#go-left').hide(); // rel is off we don't display the left arrow
	
	$('#go-right, #go-left').on('mouseenter', function () { // Mouse over arrows
		$(this).css('cursor','pointer'); // cursor becomes pointer
	}).on('click', function slide(event) { // Click on left or right arrows
		var relData = $.parseJSON($(this).attr('rel')); // Get json rel attribute info
		
		$('#photostream').html('<img src="design/loader-small.gif" alt="" />'); // Display a processing icon
		var data = {userId: relData.userId, displayedPhotos: relData.displayedPhotos, streamPage: relData.streamPage}; // Create JSON which will be send via Ajax
		
		$.ajax({ // jQuery Ajax
			type: 'POST',
			url: 'ajax/tuto-photostream.php', // URL to the PHP file which will insert new value in the database
			data: data, // We send the data string
			dataType: 'json', // json method
			timeout: 3000,
			success: function(data) {
				// Replace with next photos with fade effect
				$('#photostream').fadeOut(100, function() {
					$(this).html(data.newPhotoSet);
				}).fadeIn(1000);
				
				// Here we show arrows if rel attr different than off
				if (data.leftArrowRel != 'off') {
					$('#go-left').show();
					$('#go-left').attr('rel', data.leftArrowRel);
				} else {
					$('#go-left').hide();
				}
				
				if (data.rightArrowRel != 'off') {
					$('#go-right').show();
					$('#go-right').attr('rel', data.rightArrowRel);
				} else {
					$('#go-right').hide();
				}
				
				// Update photostream info
				$('#photoStreamInfo').html('User Id: <b>' + relData.userId + '</b> - Total Photos: <b>' + data.numPhotos + '</b> - Page: <b>' + relData.streamPage + '</b> out of ' + data.numPages);
			},
			error: function() {
				$('#photoStreamInfo').text('Problem');
			}
		});
		
		return false;
	});
});

Conclusion

End of the PhotoStream tutorial, you are now able to install and configure a nice simple photo stream on your website. If you install one on your website, please share the link so we can see live examples.

If you have questions, use the comment form below.

Happy coding!

About Simon Laroche
Simon Laroche on Google+
Simon Laroche on Twitter
Simon Laroche on Facebook
Simon Laroche on Pinterest
Simon Laroche on LinkedIn
: I am a Coder, Designer, Webmaster and Expert SEO Consulting, I'm also a wise traveller and an avid amateur photographer. I created the website TipoCode and many others such as Landolia: a World of Photos...

If you need help about this script, please leave a comment below. I reply as much as I can depending of my time, you may also get help from others.
I also offer a paid support, if you are in the need to adapt or create a script...

Leave a comment

Comments (0 comment)

No comments for the moment!