Photo Gallery

{source}

<?php

// Call set_include_path() as needed to point to your client library.

Header(‘Content-Type: text/html; charset=UTF-8’);

$GLOBALS[‘html’] = ”;

$ch = curl_init();

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

if (!isset($_SESSION[‘currentPageNo’]))

{

$_SESSION[‘currentPageNo’] = 1;

}

if (isset($_POST[‘albumId’]))

{

if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’)

{

if (isset($_POST[‘btnPrePage’]) && isset($_SESSION[‘tokenPrevious’]))

{

curl_setopt($ch, CURLOPT_URL, ‘https://graph.facebook.com/v2.8/’ . $_POST[‘albumId’] . ‘/photos?fields=name,images&limit=25&access_token=1748018112082501%7CA8TfrYDv0WBYxdHQJuGfa5gSYU0&before=’ . $_SESSION[‘tokenPrevious’]);

}

else

if (isset($_POST[‘btnNextPage’]) && isset($_SESSION[‘tokenNext’]))

{

}

else

{

curl_setopt($ch, CURLOPT_URL, ‘https://graph.facebook.com/v2.8/’ . $_POST[‘albumId’] . ‘/photos?fields=name,images&limit=25&access_token=1748018112082501%7CA8TfrYDv0WBYxdHQJuGfa5gSYU0’);

$_SESSION[‘currentPageNo’] = 1;

}

$_SESSION[‘albumId’] = $_POST[‘albumId’];

}

else

{

if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’)

{

if (isset($_POST[‘btnPrev’]) && isset($_SESSION[‘tokenPrevious’]))

{

curl_setopt($ch, CURLOPT_URL, ‘https://graph.facebook.com/v2.8/AniruddhaADM/albums?fields=count,name&limit=28&access_token=1748018112082501|A8TfrYDv0WBYxdHQJuGfa5gSYU0&before=’ . $_SESSION[‘tokenPrevious’]);

}

else

if (isset($_POST[‘btnNext’]) && isset($_SESSION[‘tokenNext’]))

{

}

else

{

curl_setopt($ch, CURLOPT_URL, ‘https://graph.facebook.com/v2.8/AniruddhaADM/albums?fields=count,name&limit=28&access_token=1748018112082501|A8TfrYDv0WBYxdHQJuGfa5gSYU0’);

$_SESSION[‘currentPageNo’] = 1;

}

else

{

curl_setopt($ch, CURLOPT_URL, ‘https://graph.facebook.com/v2.8/AniruddhaADM/albums?fields=count,name&limit=28&access_token=1748018112082501|A8TfrYDv0WBYxdHQJuGfa5gSYU0’);

$_SESSION[‘currentPageNo’] = 1;

}

if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’)

{

if (isset($_POST[‘btnPrePage’]) && isset($_SESSION[‘tokenPrevious’]))

{

curl_setopt($ch, CURLOPT_URL, ‘https://graph.facebook.com/v2.8/’ . $_SESSION[‘albumId’] . ‘/photos?fields=name,images&limit=25&access_token=1748018112082501%7CA8TfrYDv0WBYxdHQJuGfa5gSYU0&before=’ . $_SESSION[‘tokenPrevious’]);

}

if (isset($_POST[‘btnNextPage’]) && isset($_SESSION[‘tokenNext’]))

{

}

/*if(isset($_SESSION[‘token’]))

{

if($_SESSION[‘token’] === “”)

{

curl_setopt($ch, CURLOPT_URL, ‘https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=30&playlistId=PLBD0APAye6s3BpPe1c0HzqvY4atYtp4f4&key=AIzaSyDXEYRrAn44SfZFZquW1rfAcQAzKTtfnpQ’);

}

else

{

}

else

{

}*/

$result = curl_exec($ch);

curl_close($ch);

$obj = json_decode($result, true);

/*if (isset($_POST[‘btnPrev’]) && isset($_SESSION[‘tokenPrevious’]))

{

if($_SESSION[‘currentPageNo’] > 0)

{$_SESSION[‘currentPageNo’] = $_SESSION[‘currentPageNo’] – 1;}

}

else if (isset($_POST[‘btnNext’]) && isset($_SESSION[‘tokenNext’]))

{

if($_SESSION[‘currentPageNo’] < (ceil($obj[‘pageInfo’][‘totalResults’]/28)))

{$_SESSION[‘currentPageNo’] = $_SESSION[‘currentPageNo’] +1;}

}*/

/*function showAlbumPhotos($obj) {

if (isset($obj[‘paging’][‘cursors’][‘before’]))

{

$linkPrevious = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenPrevious’] = $obj[‘paging’][‘cursors’][‘before’];

}

if (isset($obj[‘paging’][‘cursors’][‘after’]))

{

$linkNext = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenNext’] = $obj[‘paging’][‘cursors’][‘after’];

}

// echo $result;

// echo $_GET[‘token’];

$i = 0;

$htmlBody = ‘<div class=”wrap”>’;

foreach($obj[‘data’] as $item)

{

if ($i == 0 || $i % 4 == 0)

{

// print ‘<div id=”idRow”>’;

}

$i++;

$htmlBody = $htmlBody . ‘<div class=”box”>’;

$htmlBody = $htmlBody . ‘<div class=”boxInner”>’;

$htmlBody = $htmlBody . ‘<a id=”‘ . $i . ‘” class=”popup” href=”#!” data-link=”‘ . $item[‘images’][0][‘source’] . ‘”><img class=”clsImgAlbum” src=”‘ . $item[‘images’][3][‘source’] . ‘” border=”0″ alt=”” height=”150px” width=”250px” /></a>’;

// $htmlBody = $htmlBody . ‘<a id=”‘.$i.'” class=”popup” href=”#!” data-link=”‘.$item[‘images’][0][‘source’].'”><div class=”center-cropped” style=”background-image: url(\”.$item[‘images’][3][‘source’].’\’);”></div>’;

if(isset( $item[‘name’] ))

{

$htmlBody = $htmlBody . ‘<div class=”titleBox”>’ . $item[‘name’] . ‘</div>’;

}

else

{

$htmlBody = $htmlBody . ‘<div class=”titleBox” style=”display:none”> </div>’;

}

$htmlBody = $htmlBody . ‘</div>’;

if ($i == 0 || $i % 4 == 0)

{

// print ‘</div>’;

}

$htmlBody = $htmlBody . ‘</div>’;

$GLOBALS[‘html’] = $htmlBody;

}*/

if (isset($_POST[‘albumId’]))

{

//showAlbumPhotos($obj);

if (isset($obj[‘paging’][‘cursors’][‘before’]))

{

$linkPrevious = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenPrevious’] = $obj[‘paging’][‘cursors’][‘before’];

}

if (isset($obj[‘paging’][‘cursors’][‘after’]))

{

$linkNext = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenNext’] = $obj[‘paging’][‘cursors’][‘after’];

}

// echo $result;

// echo $_GET[‘token’];

$i = 0;

$htmlBody = ‘<div class=”wrap”>’;

foreach($obj[‘data’] as $item)

{

if ($i == 0 || $i % 4 == 0)

{

// print ‘<div id=”idRow”>’;

}

$i++;

$htmlBody = $htmlBody . ‘<div class=”box”>’;

$htmlBody = $htmlBody . ‘<div class=”boxInner”>’;

if(isset( $item[‘name’] ))

{

$htmlBody = $htmlBody . ‘<div class=”titleBox”>’ . $item[‘name’] . ‘</div>’;

}

else

{

$htmlBody = $htmlBody . ‘<div class=”titleBox” style=”display:none”> </div>’;

}

$htmlBody = $htmlBody . ‘</div>’;

if ($i == 0 || $i % 4 == 0)

{

// print ‘</div>’;

}

$htmlBody = $htmlBody . ‘</div>’;

$GLOBALS[‘html’] = $htmlBody;

}

else if(isset($_POST[‘btnPrePage’]) && isset($_SESSION[‘tokenPrevious’]) && isset($_SESSION[‘albumId’]))

{

//showAlbumPhotos($obj);

if (isset($obj[‘paging’][‘cursors’][‘before’]))

{

$linkPrevious = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenPrevious’] = $obj[‘paging’][‘cursors’][‘before’];

}

if (isset($obj[‘paging’][‘cursors’][‘after’]))

{

$linkNext = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenNext’] = $obj[‘paging’][‘cursors’][‘after’];

}

// echo $result;

// echo $_GET[‘token’];

$i = 0;

$htmlBody = ‘<div class=”wrap”>’;

foreach($obj[‘data’] as $item)

{

if ($i == 0 || $i % 4 == 0)

{

// print ‘<div id=”idRow”>’;

}

$i++;

$htmlBody = $htmlBody . ‘<div class=”box”>’;

$htmlBody = $htmlBody . ‘<div class=”boxInner”>’;

if(isset( $item[‘name’] ))

{

$htmlBody = $htmlBody . ‘<div class=”titleBox”>’ . $item[‘name’] . ‘</div>’;

}

else

{

$htmlBody = $htmlBody . ‘<div class=”titleBox” style=”display:none”> </div>’;

}

$htmlBody = $htmlBody . ‘</div>’;

if ($i == 0 || $i % 4 == 0)

{

// print ‘</div>’;

}

$htmlBody = $htmlBody . ‘</div>’;

$GLOBALS[‘html’] = $htmlBody;

}

else if(isset($_POST[‘btnNextPage’]) && isset($_SESSION[‘tokenNext’]) && isset($_SESSION[‘albumId’]))

{

//showAlbumPhotos($obj);

if (isset($obj[‘paging’][‘cursors’][‘before’]))

{

$linkPrevious = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenPrevious’] = $obj[‘paging’][‘cursors’][‘before’];

}

if (isset($obj[‘paging’][‘cursors’][‘after’]))

{

$linkNext = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenNext’] = $obj[‘paging’][‘cursors’][‘after’];

}

// echo $result;

// echo $_GET[‘token’];

$i = 0;

$htmlBody = ‘<div class=”wrap”>’;

foreach($obj[‘data’] as $item)

{

if ($i == 0 || $i % 4 == 0)

{

// print ‘<div id=”idRow”>’;

}

$i++;

$htmlBody = $htmlBody . ‘<div class=”box”>’;

$htmlBody = $htmlBody . ‘<div class=”boxInner”>’;

if(isset( $item[‘name’] ))

{

$htmlBody = $htmlBody . ‘<div class=”titleBox”>’ . $item[‘name’] . ‘</div>’;

}

else

{

$htmlBody = $htmlBody . ‘<div class=”titleBox” style=”display:none”> </div>’;

}

$htmlBody = $htmlBody . ‘</div>’;

if ($i == 0 || $i % 4 == 0)

{

// print ‘</div>’;

}

$htmlBody = $htmlBody . ‘</div>’;

$GLOBALS[‘html’] = $htmlBody;

}

else

{

if (isset($obj[‘paging’][‘cursors’][‘before’]))

{

$linkPrevious = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenPrevious’] = $obj[‘paging’][‘cursors’][‘before’];

}

if (isset($obj[‘paging’][‘cursors’][‘after’]))

{

$linkNext = “http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]”;

$_SESSION[‘tokenNext’] = $obj[‘paging’][‘cursors’][‘after’];

}

// echo $result;

// echo $_GET[‘token’];

$i = 0;

$htmlBody = ‘<div class=”wrap”>’;

foreach($obj[‘data’] as $item)

{

if ($i == 0 || $i % 4 == 0)

{

// print ‘<div id=”idRow”>’;

}

// print ‘<div class=”classBox”>’;

//if ($i != 0)

{

$htmlBody = $htmlBody . ‘<div class=”box”>’;

$htmlBody = $htmlBody . ‘<div class=”boxInner”>’;

// print ‘<a class=”popup” href=”#!” data-link=”http://www.youtube.com/embed/’.$item[‘snippet’][‘resourceId’][‘videoId’].’?enablejsapi=1″><img src=”‘. $item[‘snippet’][‘thumbnails’][‘medium’][‘url’] . ‘” border=”0″ alt=”” /></a>’;

// print ‘<p itemprop=”name”>’ . $item[‘snippet’][‘title’] .'</p>’;

$htmlBody = $htmlBody . ‘<input class=”clsImg” type=”image” name=”albumId” value=”‘ . $item[‘id’] . ‘” alt=”‘ . $item[‘name’] . ‘” src=”https://graph.facebook.com/v2.8/’ . $item[‘id’] . ‘/picture?type=album&access_token=1748018112082501|A8TfrYDv0WBYxdHQJuGfa5gSYU0″>’;

$htmlBody = $htmlBody . ‘<div class=”titleBox”>’ . $item[‘name’] . ‘<br/>Photos In Album: ‘ . $item[‘count’] . ‘</div>’;

$htmlBody = $htmlBody . ‘</div>’;

}

$i++;

if ($i == 0 || $i % 4 == 0)

{

// print ‘</div>’;

}

$htmlBody = $htmlBody . ‘</div>’;

}

// $htmlBody = ”;

<!doctype html>

<html>

<head>

<title>Video list

</title>

nav#t3-mainnav {

margin: 0px !important;

overflow: visible;

}

div#idRow{

/*float:left; */

}

.classBox{

/*float:left;*/

/*padding:10px;

width: 250px;*/

}

img {

/* width: 100%;

height: auto;*/

}

body {

margin: 0;

padding: 0;

background: #EEE;

/*font: 10px/13px ‘Lucida Sans’,sans-serif;*/

}

.wrap {

overflow: hidden;

margin: 10px;

}

#contentarea {

float: none;

!important;

}

.box {

float: left;

position: relative;

width: 30%;

padding-bottom: 15%;

margin-bottom: 60px;

}

.boxInner {

position: absolute;

left: 10px;

right: 10px;

width: 250px;

height: 155px;

}

.boxInner .clsImg {

width: 250px;

height: 145px;

}

.boxInner .clsImgAlbum {

width: 250px;

height: 145px;

}

.boxInner .titleBox {

position: absolute;

bottom: 0;

left: 0;

right: 0;

margin-bottom: -36px;

background: #000;

background: rgba(0, 0, 0, 0.5);

color: #FFF;

padding: 3px;

text-align: center;

-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

height: 45px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.center-cropped {

width: 250px;

height: 150px;

background-position: center center;

background-repeat: no-repeat;

overflow: hidden;

}

body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {

margin-bottom: 0;

}

@media only screen and (max-width : 480px) {

/* Smartphone view: 1 tile */

.box {

width: 100%;

padding-bottom: 100%;

}

@media only screen and (max-width : 650px) and (min-width : 481px) {

/* Tablet view: 2 tiles */

.box {

width: 50%;

padding-bottom: 50%;

}

@media only screen and (max-width : 1050px) and (min-width : 651px) {

/* Small desktop / ipad view: 3 tiles */

.box {

width: 33.3%;

padding-bottom: 33.3%;

}

@media only screen and (max-width : 1290px) and (min-width : 1051px) {

/* Medium desktop: 4 tiles */

.box {

width: 26%;

padding-bottom: 15%;

}

#video-view {

position:fixed;

top: 3vw;

left: 3vw;

width: 92.25vw;

height: 90%;

/*margin-top: 9vw; /*set to a negative number 1/2 of your height

margin-left: 15vw; /*set to a negative number 1/2 of your width*/

border: 1px solid #ccc;

background-color: #f3f3f3;

display: none;

z-index:2000;

align-items: center;

}

#idcover

{

height:100%;

width:100%;

position:fixed;

left:0;

top:0;

z-index:1 !important;

background-color:black;

filter: alpha(opacity=75);

/* internet explorer */

-khtml-opacity: 0.75;

/* khtml, old safari */

-moz-opacity: 0.75;

/* mozilla, netscape */

opacity: 0.75;

/* fx, safari, opera */

display: none;

}

.pagination a {

background: none repeat scroll 0 0 #007ab7;

color: #fff;

font-size: 14px;

margin: 0 5px;

padding: 2px 5px;

}

div.itemBody {

width: 1100px;

}

</style>

</script>

$( document ).ready(function() {

<?php

if (isset($_POST[‘albumId’]))

{

print ‘$.get( “https://graph.facebook.com/v2.8/’ . $_SESSION[‘albumId’] . ‘/photos?fields=name,images&limit=25&access_token=1748018112082501%7CA8TfrYDv0WBYxdHQJuGfa5gSYU0&before=’ . $_SESSION[‘tokenPrevious’].'”, function( dataPrev ) {

if(dataPrev.data.length == 0)

{

$(“#id_btn_PrePage”).hide();

}

else

{

$(“#id_btn_PrePage”).show();

}

});’;

}

<?php

if (isset($_POST[‘albumId’]))

{

print ‘$.get( “https://graph.facebook.com/v2.8/’ . $_SESSION[‘albumId’] . ‘/photos?fields=name,images&limit=25&access_token=1748018112082501%7CA8TfrYDv0WBYxdHQJuGfa5gSYU0&after=’ . $_SESSION[‘tokenNext’].'”, function( dataNext ) {

if(dataNext.data.length == 0)

{

$(“#id_btn_NextPage”).hide();

}

else

{

$(“#id_btn_NextPage”).show();

}

});’;

}

});

$(document).on(‘click’, ‘.popup’, function(){

/* $(“.popup”).click(function () {*/

var $this = $(this);

var $iframe = $(“<iframe id=’iframe’>”).attr(“src”, $this.data(“link”)).css({

“width”: “92vw”, “height”: “88%”}

);

var $title = $(“<a class=’idclose’ href=’#!’ >”).text(“Close”);

$(“#video-view”).css(“display”,”block”);

$(“#idcover”).css(“display”,”block”);

// $(“#video-view”).fadeIn(500);

// $(“#idcover”).fadeTo(500, 0.5);

$(“#video-view”).html($title).append($iframe);

// var ifrm = $iframe;

var varTitle = document.getElementsByClassName(‘titleBox’)[document.getElementById($(this).attr(‘id’)).getAttribute(“id”)-1].innerHTML;

var doc = document.getElementById(‘iframe’).contentWindow.document;

doc.open();

doc.write(“<head> <meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”> <link rel=\”stylesheet\” href=\”https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\”> <title>Album Gallery<\/title> <style type=\”text\/css\”> .row-gap{ margin:10px; } #content{ width:85%; padding:10px; margin:0 auto; } #left{ width:80%; float:left; } #right{ width:20%; float:right; } <\/style> <script> document.onkeydown = function() {switch (window.event.keyCode) {case 37:previous(); break;case 39:next();break;}}; var i=”+$(this).attr(‘id’)+”; function next() { var varPop = window.parent.document.getElementsByClassName(\”popup\”); var varTitle = window.parent.document.getElementsByClassName(\”titleBox\”); if(i<varPop.length){ document.getElementById(\”idImgPhoto\”).setAttribute(\”src\”,varPop[i].getAttribute(‘data-link’)); document.getElementById(\”object3\”).innerHTML = varTitle[i].innerHTML; i++;}else{alert(‘No more images’);} } function previous() {if(i>0) {i–; var varPop = window.parent.document.getElementsByClassName(\”popup\”); var varTitle = window.parent.document.getElementsByClassName(\”titleBox\”); document.getElementById(\”idImgPhoto\”).setAttribute(\”src\”,varPop[i-1].getAttribute(‘data-link’)); document.getElementById(\”object3\”).innerHTML = varTitle[i-1].innerHTML; }else{ alert(‘First photo’); } } <\/script> <\/head> <body> <div id=\”content\”> <div id=\”left\”> <div class=\”row-gap\” id=\”object1\”><img id=\”idImgPhoto\” src=\””+$(this).attr(‘data-link’)+”\” width=\”100%\”><\/div> <div class=\”row-gap\” id=\”object2\”> <\/div><\/div> <div id=\”right\”> <div class=\”row-gap\” id=\”object3\”> “+varTitle+” <!–<i class=\”material-icons\” style=\”font-size:24px;color:deepskyblue\”>place<\/i>–><\/div> <div class=\”row-gap\” id=\”object4\”><\/div> <\/div> <span class=\”pagination\”> <button name=\”btnPrev\” value=\”Prev\” onclick=\”previous()\”>Prev<\/button> <span> <\/span> <button name=\”btnNext\” value=\”Next\” onclick=\”next()\”>Next<\/button> <\/span> <\/div> <\/body>”);

doc.close();

document.getElementById(‘iframe’).focus();

/*$iframe.ready(function() {

$iframe.contents().find(“thml”).append(‘Test’);

});*/

// $iframe.wrap(“<div class=’class-video’>”);

}

);

$(document).on(‘click’, ‘.idclose’, function(){

$(“#idcover”).css(“display”,”none”);

$(“#video-view”).css(“display”,”none”);

}

);

</script>

</head>

<body>

<form action=”<?php

echo $_SERVER[‘PHP_SELF’]; ?>” method=”post”>

<?php

if (!isset($_POST[‘albumId’]) && !isset($_POST[‘btnNextPage’]) && !isset($_POST[‘btnPrePage’]))

{

print ‘<input type=”submit” name=”btnPrev” value=”Prev”><span> </span><input type=”submit” name=”btnNext” value=”Next”>’;

}

else

{

print ‘<input type=”submit” name=”btnBack” value=”Go Back to Albums”><br/><br/>’;

}

if(isset($htmlBody)){ print $htmlBody;}else{print $GLOBALS[‘html’];} ?>

</div>

</div>

<?php

if (!isset($_POST[‘albumId’]) && !isset($_POST[‘btnNextPage’]) && !isset($_POST[‘btnPrePage’]))

{

print ‘<input type=”submit” name=”btnPrev” value=”Prev”><span> </span><input type=”submit” name=”btnNext” value=”Next”>’;

}

else

{

print ‘<input type=”submit” name=”btnBack” value=”Go Back to Albums”><br/><br/>’;

print ‘<input type=”submit” id=”id_btn_PrePage” name=”btnPrePage” value=”Previous Page”>’;

print ‘<input type=”submit” id=”id_btn_NextPage” name=”btnNextPage” value=”Next Page”>’;

}

</span>

</form>

</body>

</html>

{/source}

Photo Gallery

Leave a Reply

Search

Recent Posts

Aniruddha’s ADM Tweets