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

<!-- Defining object type-->
{lang code='photo' assign='object_type'}
        <div class="row">
            {assign var=json value=$photo.photo_details|json_decode}
            <div class="col-md-8 cb-box show-image nplinks">
                <a {if $nextLink} {assign var='nextItem' value=$nextLink} {else}  {assign var='nextItem' value=$preLink} {/if}
                href="{$cbphoto->photo_links($nextItem.0,'view_item')}"
                >{get_photo details=$photo size='l' class='photoimg' output='html'}</a>
                {assign var=objctid value=$object.ci_id}
                {assign var=collid value=$object.collection_id}
                {assign var=preLink value=$cbphoto->collection->get_next_prev_item($objctid,$collid,'prev')}
                <a class="the-buttons btn btn-danger btn-lg btns1" id="button1" name="button1" href="{$cbphoto->photo_links($preLink.0,'view_item')}">
                 <i class="glyphicon glyphicon-chevron-left"></i>Previous
                </a>
                {assign var=nextLink value=$cbphoto->collection->get_next_prev_item($objctid,$collid,'next')}
                <a class="the-buttons btn btn-primary btn-lg btns" id="button2" name="button2" href="{$cbphoto->photo_links($nextLink.0,'view_item')}">
                   Next<i class="glyphicon glyphicon-chevron-right"> </i>
                </a>

                <hr>
                <div class="row fonts">
                    <div class="tabbable">
                        <ul class="nav nav-tabs" id="myTab2">
                            <li class="active">
                                <a data-toggle="tab" href="#pinfo">
                                    <h5>Info</h5>
                                </a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="#pshare">
                                    <h5>Share</h5>
                                </a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="#pcode">
                                    <h5>Embed Code</h5>
                                </a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="#preport">
                                    <h5>Report</h5>
                                </a>
                            </li>
                            {show_video_rating  rating=$photo.rating ratings=$photo.rated_by total='10' id=$photo.photo_id type=photo}
                        </ul>
                        <div class="tab-content">
                            <div id="pinfo" class="tab-pane active">
                                <h4><small>{lang code='Title:'}{$photo.photo_title}</small></h4>
                                <hr>
                                <h4><small>{lang code='Description:'}{$photo.photo_description}</small></h4><hr>
                                <h4><small>{lang code='Tags:'}{$photo.photo_tags|tags:photos}</small></h4>
                                </div>
                            <div id="pshare" class="tab-pane">
                                {show_share_form id=$photo.photo_id type=Photo}
                            </div>
                            <div id="pcode" class="tab-pane">
                               3
                            </div>
                            <div id="preport" class="tab-pane">
                                    <br>
                                <button class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="slide_up_watch_video('#flag_item');$('#flag_item').slideToggle();">{lang code='report_this'}</button>
                                    {show_flag_form id=$photo.photo_id type=Photo}
                            </div>

                            </div>
                        </div>
                    <div class="col-md-8 commentmargin">
                        <hr>
                        <h2>{lang code='comments'}</h2>

                        <div id="comments"></div>
                        <script>
                            $(document).ready(function()
                            {ldelim}
                            comments_voting = 'no';
                            getComments('p','{$photo.photo_id}','{$photo.last_commented}',1,'{$photo.total_comments}','{$object_type}')
                            {rdelim}
                            );
                        </script>
                        {if $myquery->is_commentable($photo,'p')}
                        {include file="$style_dir/blocks/comments/add_comment.html" id=$photo.photo_id type=p}
                        {else}
                        <div class="disable_msg" align="center">{lang code='Comments disabled for this photo'}</div>
                        {/if}
                    </div>

                </div>
            </div>

            <div class="col-md-4 cb-box">
                <div class="media padding40">
                    <a class="pull-left" href="#">
                        <img class="media-object imgobject imgborder" src="{$userquery->getUserThumb($user)}" width="142" alt="...">
                    </a>
                    <div class="media-body">
                        <div class="row">
                            <div class="col-md-8 procolor fsize">
                                <h4 class="media-heading headcolor photoprofile">{$user.username}  ({assign var=category value=$userquery->get_category($user.category)}
                                    {$category.category_name})</h4>
                                <b>{lang code='Since:'}</b> ({$user.doj|date_format})
                                <b>{lang code='Login:'}</b> ({$user.last_logged|nicetime})
                                <hr>
                                <div class="row">
                                    <div class="col-md-2">
                                        <button class="btn btn-info btn-sm btn-xs" onclick="subscriber('{$user.userid}','subscribe_user','video_detail_result_cont')">{lang code='subscribe'}</button>
                                    </div>
                                    <div class="col-md-2 padding39">
                                        <button class="btn btn-info btn-sm btn-xs">{lang code='View Channel'}</button>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 well cb-box"><small>Advertisement</small><img src="http://farm4.staticflickr.com/3377/3639506612_fb0e13ce92.jpg">
            </div>
        </div>



<script>
    jQuery(function() {                                              // <== Doc ready

        jQuery(".the-buttons").hide();                  // Initially hide all buttons

        jQuery('.show-image').hover(function() {
            jQuery(this).find('#button1').fadeIn(1500);
            jQuery(this).find('#button2').fadeIn(1500);
        }, function() {
            jQuery(this).find('#button1').fadeOut(1500);
            jQuery(this).find('#button2').fadeOut(1500);
        });
    });
</script>