clipbucket/upload/styles/cb_28/layout/view_photo.html

<!-- Defining object type-->
{lang code='photo' assign='object_type'}
{assign var=json value=$photo.photo_details|json_decode}
{$curr_photo = $photo|@json_encode}
{$user_admin = $user|@json_encode}
{$srcfirst = {get_photo(['details'=>$photo,'size'=>'l'])}}

	<div class="clearfix">
		<section id="content" class="clearfix">
			<div class="clearfix leaderboard-ad ad">
				{AD place='ad_728x90'}
			</div>

			<div class="clearfix photo-view" >
			<div id="gallery">
				<i id="enlarge" class="fa fa-expand fa-2x" style="float:right; cursor:pointer" data-toggle="modal" data-target="#myModal"></i>
			{get_photo details=$photo size='l' class='img-responsive center-block' output='html' height="100"}
			</div>
				<!-- Enlarge icon -->

				<!-- overlay div when clicked on extend icon -->
						<div id="myNav" class="overlay">
							<button type="button" class="img-close" id="btn-close" data-dismiss="modal" data-check="">&times;</button>
							<!-- Next and Previous Button inside overlay -->
							<div class="btn-holder clearfix">
								<button class="btn view-photo-nxt icon-right-arrow next en-large" data-check="next" ><i>next</i></button>

								<button class="btn view-photo-pre icon-left-arrow prev en-large" data-check="prev"><i>prev</i></button>
							</div>

							    <div class="overlay-content">
							     <img id="gallery-exd" class="img-responsive center-block" />
							   </div>
						 </div>
						 <!-- Next and Previous button  -->
					<div class="btn-holder clearfix">
						<button class="btn view-photo-nxt icon-right-arrow next view-photo" data-check="next" ><i>next</i></button>

						<button class="btn view-photo-pre icon-left-arrow prev view-photo" data-check="prev"><i>prev</i></button>
					</div>
			</div>
			
			<section class="view-details clearfix">
				<header class="clearfix details">
					<div id="result_cont"></div>
					<h1>{$photo.photo_title}</h1>
					<h1 id="img-title"></h1>
					<div class="user-video-info clearfix">
						<a href="{$userquery->profile_link($user)}" class="avatar">
							<img src="{$userquery->avatar($video,'m',userid())}" class="img-responsive">
						</a>
						<h2 class="user-title">
							<a href="{$userquery->profile_link($user)}">{$user.username}</a>
						</h2>
						<div class="views-counter">
							<span>{prettyNum($photo.views)}</span>
					
						</div>
					</div>
					<div class="user-likes-sub clearfix">
						<div class="clearfix like-rating col-lg-6 col-md-6 col-sm-6 col-xs-12" id="rating_container">

							{if $photo.allow_rating != 'no'}
								{show_video_rating  rating=$photo.rating ratings=$photo.rated_by total='10' id=$photo.photo_id type=photo}
							{/if}

							<!-- <div id="rate"></div> -->
						</div>
						<div class="clearfix subscribe-col col-lg-6 col-md-6 col-sm-6 col-xs-12">
							{if $photo.userid != userid()}
								<a id="subscribeUser" class="btn btn-subscribe btn-primary" href="javascript:void(0)" onclick="subscriber('{$user.userid}','subscribe_user','video_detail_result_cont')">
									<span>{lang('Subscribe')}</span>
								</a>
							{/if}
						</div>
					</div>
				</header>
				<div id="messageFav" class="alert alert-info marginTop" style="display:none"></div>
				<div class="view-tabs clearfix">
					<ul class="clearfix nav nav-tabs">
						<li class="active">
							<a href="#cb-item-info" data-toggle="tab"><span class="icon-info"></span>{lang('Info')}</a>
						</li>
						<li>
							<a href="#cb-item-share" data-toggle="tab"><span class="icon-share"></span>Share/Embed</a>
						</li>
						<li>
							<a href="#cb-item-addto" data-toggle="tab"><span class="icon-plusrounded"></span>{lang('Add to')}</a>
						</li>
						<li>
							<a href="#cb-item-report" data-toggle="tab"><span class="icon-flag"></span>{lang('Report')}
							</a>
						</li>
					</ul>
					<div class="tab-content clearfix">
						<div class="tab-pane fade in clearfix active" id="cb-item-info">
							<div class="clearfix watch-vid-details">
								<ul class="clearfix desc-list">
									<li><strong>{lang('Photo description: ')}</strong> <span id="description"></span>:&nbsp;{$photo.photo_description|truncate:90}</li>
									
									 {assign var=category value=$userquery->get_category($user.category)} 

									<li id="category"></li>
		
									<li><strong>{lang('Category')}</strong>:&nbsp;{$category.category_name}
									<span id="category"></span>
									</li>
									<li><strong>{lang('Tags')}</strong>:&nbsp;<span id="tags"></span></strong>{$photo.photo_tags|tags:photos}</li>

									<li><strong>{lang('Views')}</strong>:&nbsp; <span id="views">{$photo.views}</span></li>
								</ul>
							</div>
						</div>
		
						<div class="tab-pane fade in clearfix" id="cb-item-share">
							<ul class="social-share">
								<li>
								 <a class="cb-item-social-icon facebook" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]={videoLink($video)|urlencode}&p[images][0]={get_thumb vdetails=$video}&p[title]={$video.title|title|urlencode}&p[summary]={$video.description|description|urlencode}" target="_blank">
										<span>Facebook</span>
									</a>
								</li>
								<li>
									<a href="https://twitter.com/share" target="_blank" class="btn-tw icon-twitter">
										<span>Twitter</span>
									</a>
								</li>
								<li>
									<a href="https://plus.google.com/share?url={urlencode(videolink($video))}" target="_blank" class="btn-gplus icon-gplus">
										<span>Google Plus</span>
									</a>
								</li>
							</ul>
							{show_share_form id=$photo.photo_id type=Photo}
						</div>
		
						<div class="tab-pane fade in clearfix" id="cb-item-addto">
							<div class="clearfix form-horizontal row">
							{$codes=$cbphoto->photo_embed_codes(['type'=>'all','with_url'=>true, 'details'=>$photo])}
								{foreach from=$codes item=item}
								
								<div class="photo-share-tab col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
									<label class="col-sm-2 col-xs-3 control-label" for="{$item.type}">{$item.name}</label>
									<div class="col-sm-10 col-xs-9">
										<input class="form-control" onFocus="this.select();" value="{$item.code}" id="{$item.type}">
									</div>
								</div>
								
								{/foreach}
							</div>
						</div>
		
						<div class="tab-pane fade in clearfix custom-elements" id="cb-item-report">
							{show_flag_form id=$photo.photo_id type=Photo}
						</div>
					</div>
				</div>
			</section>
			<div class="clearfix comments-block" id="comments-block">
				<div id="test1"></div>
				<div id="reply" class="clearfix"> 
					<div class="pad-bottom">
						<div  class="addComment clearfix">
							<div class="com_count" id="com_count">
								<h2><span>{$photo.total_comments} 
								{if $photo.total_comments <= 1 }
								{lang code='comment'} 
								{else}
								{{lang code='comments'} }
								{/if}
								</span></h2>
							</div>

 						{if $myquery->is_commentable($photo,'p')}
							{include file="$style_dir/blocks/comments/add_image_comment.html" id=$photo.photo_id type=p}
							{else}
							<div class="alert alert-warning">{lang code='Comments disabled for this photo'}</div>
						{/if}
						</div>
						<div id="comments"></div>
						<div id="userCommentsList">
						</div>
					</div>
				</div>
			</div>
		</section>
		
		<aside id="sidebar">
			<div class="box-ad ad">{AD place='ad_300x250'}</div>
			<h2>{lang code='Related Photos'}</h2>
			<div class="clearfix sidebar-items">
		
			{$related_photos=get_photos(['title'=>$photo.photo_title,'tags'=>$photo.photo_tags,
			'exclude'=>$photo.photo_id,'show_related'=>'yes','limit'=>6,'order'=>'date_added DESC'])}
		
			{if $related_photos}
				<div class="row">
					{foreach $related_photos as $photo}
						<div class="item-photo col-lg-6 col-md-6 col-sm-12 col-xs-12">
							{include file="$style_dir/blocks/photo.html" display_type='relatedPhoto_sidebar'}
						</div>
					{/foreach}
				</div>
			{else}
				<div class="well well-info">No Photos Found !</div>
			{/if}
			</div>
		
			{$row = $myquery->Get_Website_Details()}
			{if $row.collectionsSection == 'yes'}
			{$collections = $cbcollection->get_collections(['limit'=>5, 'active'=>'yes'])}
			<h2>{lang code="Top Collections"}</h2>
			<div class="clearfix sidebar-items collections-grid">
				<div class="clearfix row">
				{$limit=10}
				{if $collections}        
				{foreach from=$collections item=collection}
				{$first_col_thumb = $cbcollection->coll_first_thumb($collection,'l')}
					<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-12 col-xs-12">
						{include file="$style_dir/blocks/collection-item.html"}
					</div>
				{/foreach}
				</div>
				{else}
				<div class="clearfix">{lang code='no_collection_found'}</div>
				{/if}
			</div>
			{/if}
		</aside>
		{*section name=list loop=$uphotos}
		{include file="$style_dir/blocks/photo.html" display_type="related_photos" photo=$uphotos[list]}
		{/section*}
	</div>


<script type="text/javascript">
var key_globel; // image source key0
var first_source; 
var collection_id;
var mode = "photo_ajax";
var key; // for passing key to different attributes
var d = {$curr_photo}; // photo info
var curr_photo = {$curr_photo};
var user = {$user_admin};
var r = $('<i class="glyphicon glyphicon-refresh animate-spin pic-glyp" style="position:absolute;left:50%;top: 50%;font-size:16px;line-height:16px;width:16px;height:16px;margin:-8px 0 0 -8px;"></i>');  // Ajax loader 
var b = $('<i class="glyphicon glyphicon-refresh animate-spin pic-glyp" style="position:absolute;left:50%;top: 50%;font-size:16px;line-height:16px;width:16px;height:16px;margin:-8px 0 0 -8px; color:#fff;"></i>'); // Extend Ajax Loader

$(document).ready(function()
	{ldelim}
	$(".clip_read").click(function() {
		$(this).toggleClass('clip_hide');
		if(!$(this).hasClass('clip_hide')){
			$('.not_show').show();
			$('.will_show').hide();
			$(".clip_read").text("Show Less");
	  	} else {
		   $('.not_show').hide();
		   $('.will_show').show();
		   $(".clip_read").text("Show More");
   		}
		});

comments_voting = 'no';
 getComments('p','{$photo.photo_id}','{$photo.last_commented}',1,'{$photo.total_comments}','{$object_type}')
{rdelim}
);

$(document).ready(function(){
	var form_selector = 'comment_form';
	var type = $(this).data('type');
	var dataId = $(this).data('id');
	$('body').on("click","#add_comment_button",function(){
		add_comment_js(form_selector,type,dataId);
	});
	$('#comment_box').keypress(function(e){
		if(e.keyCode == 13 && !e.shiftKey)
		{
			e.preventDefault();
			add_comment_js(form_selector,type,dataId);
		}
		});
	});
	
// image is loading via an Ajax call .. 

// event which brings previous image from the collection 	
$(document).on("click", ".view-photo", function () {
//	var curr_photo = d;
	var user_admin = user;
	var check = $(this).data('check');
	if(check == "prev") {
		var pre_next = "prev";
	}
	if(check == "next"){
		var pre_next = "next";
	}
	data = {
		'mode': mode,
		'photo_pre' : curr_photo,
		'user': user_admin,
		'item': pre_next,
	}

	$.ajax({
		url: baseurl+'/ajax.php'+'?moto=ajax', 
		type: "post",
		data: data,
		dataType: 'json',
		beforeSend: function() {
			$('.photo-view').append(r);
			$('#gallery').fadeTo( "slow", 0.33 );
			$('.overlay-content').append(b);
			$('#gallery-exd').fadeTo( "slow", 0.33 );
			$('.view-photo').prop("disabled",true);
		},
		success:function(xhr) {	

			
			
  			$("body").load("view_item.php?item="+xhr.photo_key+"&type=photos&collection="+xhr.collection_id+"&moto=ajax",function(){
  					$('.view-photo').prop("disabled",false);
					$("#gallery").fadeTo("normal",0.99);
					$('#gallery-exd').fadeTo( "normal", 0.99 );
					//d = xhr.photo[0];
					$('#gallery-exd').attr("src",key_globel);	
					$("#gallery").attr("src",key_globel);


  				 	window.history.pushState("", "", baseurl+"/view_item.php?item="+xhr.photo_key+"&type=photos&collection="+xhr.collection_id);
  				 	$('.dropdown-toggle').dropdown();
					$('.pic-glyp').remove();
  			});
  			
			
		}

	})

});


// Event which enlarge the image size in model. 

$(document).on("click", ".en-large", function () {
	var curr_photo = d;
	var check = $(this).data('check');
	if(check == "prev") {
		var pre_next = "prev";	
	}
	if(check == "next"){
		var pre_next = "next";
	}	
		data = {
		'mode': mode,
		'photo_pre' : curr_photo,
		'item': pre_next,
	}

	$.ajax({
		url: baseurl+'/ajax.php',
		type: "post",
		data: data,
		dataType: 'json',
		beforeSend: function() {
			$('.overlay-content').append(b);
			$('#gallery-exd').fadeTo( "slow", 0.33 );
			$('.en-large').prop("disabled",true);
		},
		success:function(xhr) {	
			$('.en-large').prop("disabled",false);
			$("#gallery").fadeTo("normal",0.99);
			$('#gallery-exd').fadeTo( "normal", 0.99 );
			d = xhr.photo[0];
			key_globel = xhr.src_string;
			console.log(key_globel);
			collection_id = xhr.collection_id;
			$('#gallery-exd').attr("src",key_globel);
			$("#btn-close").attr("data-check",key);
			$('.pic-glyp').remove();
		}
	});

});

$(document).on("click", "#enlarge", function () {

	document.getElementById("myNav").style.width = "100%";
	document.getElementById("myNav").style.left = "0";
	$('#gallery-exd').attr("src","{$srcfirst}");
	d=curr_photo;
});

// On closing modal update image source..
$(document).on("click", "#btn-close", function () {

	 document.getElementById("myNav").style.left = "-100%";

});

$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
       document.getElementById("myNav").style.left = "-100%";
    }
});
</script>