clipbucket/upload/styles/cb_2014/layout/blocks/photo.html

{if $display_type == ""}
<div class="show-image">
    <div class="col-md-4 col-sm-4 col-xs-6">
        <a href="{$cbphoto->photo_links($photo,'view_item')}">
            {if $photo.counter%1}
            {get_photo details=$photo output='html' class='photothumbs'}
            {else}
            {get_photo details=$photo output='html' class='photothumbs1'}
            {/if}
        </a>
        <hr class="hrred">
        <span class="photoname" id="avatar1_file" >{$photo.photo_title|truncate:15}</span>
            <!--<div class="row">-->
                <!--<div class="col-md-2">-->
                    <!--<h4><small> <i class="glyphicon glyphicon-thumbs-up lfont"><b>2</b></i></small></h4>-->
                <!--</div>-->
                <!--<div class="col-md-2 like">-->
                    <!--<h4><small> <i class="glyphicon glyphicon-thumbs-down lfont"><b>4</b></i></small></h4>-->
                <!--</div>-->
                <!--</div>-->
    </div>
</div>

{/if}

{if $display_type == 'related_photos'}
	<div class="relatedPhotos clearfix">
    	<a href="{$cbphoto->photo_links($photo,'view_item')}">{get_photo details=$photo output='html' width='120' class='photoThumbBox moveL' style='margin-right:5px;'}</a>
        <div class="photoTitle" style="margin-bottom:5px;"><a href="{$cbphoto->photo_links($photo,'view_item')}" title="{$photo.photo_title}">{$photo.photo_title|truncate:15}</a></div>
        <span class="photoInfo">{$photo.views|number_format} {lang code="views"} <br/> {$photo.total_comments} {lang code="comments"}</span>
        {show_rating rating=$photo.rating total='10' class='rating moveL'}
    </div>
{/if}

{if $display_type == 'subscription'}
	<div class="grid_view clearfix" style="width:auto; margin-right:4px;">
    	<a href="{$cbphoto->photo_links($photo,'view_item')}">{get_photo details=$photo output='html' class='photoThumbBox' width='110'}</a>
        <div class="photoTitle" style="margin:5px 0px; font:bold 11px Arial;">
        <a href="{$cbphoto->photo_links($photo,'view_item')}" title="{$photo.photo_title}">{$photo.photo_title|truncate:15}</a></div> 
        {show_rating rating=$photo.rating total='10' class='rating'}
        <div style="font-size:10px; margin:2px;">{$photo.views|number_format} {lang code="views"}</div>
        <a href="{$userquery->profile_link($photo)}" style="font:bold 10px Arial; text-decoration:none;">{$photo.username|truncate:20}</a>
    </div>
{/if}

{if $display_type == "side_photos"}
	<div style="display:inline-block; *display:inline; vertical-align:middle; padding:0 8px 5px 0px;">
    	<a href="{$cbphoto->photo_links($photo,'view_item')}">{get_photo details=$photo output='html' width='82' class='photoThumbBox'}</a>
        <div class="photoTitle" style="font:bold 10px Arial; margin:1px 0px">
        <a href="{$cbphoto->photo_links($photo,'view_item')}" title="{$photo.photo_title}">{$photo.photo_title|truncate:15}</a>
        </div>
   	<div class="watch_video_box_details">
        <span style="color:#666; font:normal 10px Arial;">{lang code='views'}: {$photo.views|number_format}</span><br>
        <a style="font:bold 10px Arial; text-decoration:none;" href="{$userquery->profile_link($photo)}" title="{$photo.username}" alt="{$photo.username}">{$photo.username|truncate:12}</a>
	</div>        
    </div>
{/if}
{if $display_type == "side_photos_viewed"}
    <div style="display:inline-block; *display:inline; vertical-align:middle; padding:0 8px 5px 0px;">
        <a href="{$cbphoto->photo_links($photo,'view_item')}">{get_photo details=$photo output='html'  width="255" height="100" class='cb_img_thum'}</a>
        <div class="photoTitle pull-left" style="font:bold 10px Arial; margin:1px 0px">
        <a href="{$cbphoto->photo_links($photo,'view_item')}" title="{$photo.photo_title}">{$photo.photo_title|truncate:15}</a>
        </div>
    <div class="watch_video_box_details pull-right">
        <span style="color:#666; font:normal 10px Arial;">{lang code='views'}: {$photo.views|number_format}</span>
    </div>        
    </div>
{/if}

{if $display_type == "channel_page"}
	<li class="itemBox" onclick="loadObject(this,'photos','{$photo.photo_id}','viewingArea')">
    	{get_photo details=$photo output='html' width='110' height='64' size='m' style='display:block;margin:0px auto;'}
    </li> <!-- itemBox {$photo.photo_key} end -->
{/if}




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

        jQuery(".avatar1_file").hide();                  // Initially hide all buttons

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