491 lines
No EOL
15 KiB
HTML
491 lines
No EOL
15 KiB
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="close" id="btn-close" data-dismiss="modal" data-check="">×</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,'small',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>: {$photo.photo_description|truncate:90}</li>
|
|
|
|
{assign var=category value=$userquery->get_category($user.category)}
|
|
|
|
<li id="category"></li>
|
|
|
|
<li><strong>{lang('Category')}</strong>: {$category.category_name}
|
|
<span id="category"></span>
|
|
</li>
|
|
<li><strong>{lang('Tags')}</strong>: <span id="tags"></span></strong>{$photo.photo_tags|tags:photos}</li>
|
|
|
|
<li><strong>{lang('Views')}</strong>: <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>
|
|
|
|
<style type="text/css">
|
|
/* The Overlay (background) */
|
|
#gallery {
|
|
background: #fff none repeat scroll 0 0;
|
|
height: 474px;
|
|
margin: 0 0 16px;
|
|
position: relative;
|
|
}
|
|
.overlay {
|
|
/* Height & width depends on how you want to reveal the overlay (see JS below) */
|
|
height: 100%;
|
|
width: 0;
|
|
position: fixed; /* Stay in place */
|
|
z-index: 6; /* Sit on top */
|
|
left: 0;
|
|
right: 100%;
|
|
top: 0;
|
|
background-color: rgb(0,0,0); /* Black fallback color */
|
|
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
|
|
overflow-x: hidden; /* Disable horizontal scroll */
|
|
overflow-y: hidden;
|
|
transition: 0.3s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
|
|
|
|
/* transform: translateX(100%);*/
|
|
}
|
|
.overlay img{
|
|
position: relative;
|
|
/*top: 10%;*/
|
|
|
|
|
|
}
|
|
.overlay .photo-view .btn-holder{
|
|
z-index: 7;
|
|
|
|
}
|
|
.overlay .close{
|
|
position: absolute;
|
|
z-index: 7;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 10px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
/* Position the content inside the overlay */
|
|
.overlay-content {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%; /* 100% width */
|
|
text-align: center; /* Centered text/links */
|
|
|
|
}
|
|
|
|
/* The navigation links inside the overlay */
|
|
.overlay a {
|
|
padding: 8px;
|
|
text-decoration: none;
|
|
font-size: 36px;
|
|
color: #818181;
|
|
display: block; /* Display block instead of inline */
|
|
transition: 0.3s; /* Transition effects on hover (color) */
|
|
}
|
|
|
|
/* When you mouse over the navigation links, change their color */
|
|
.overlay a:hover, .overlay a:focus {
|
|
color: #f1f1f1;
|
|
}
|
|
|
|
/* Position the close button (top right corner) */
|
|
.closebtn {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 45px;
|
|
font-size: 60px !important; /* Override the font-size specified earlier (36px) for all navigation links */
|
|
}
|
|
#enlarge{
|
|
cursor: pointer;
|
|
float: right;
|
|
padding: 10px;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
</style> |