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

{if $display_type == ""}
<div class="show-image">
    <div class="col-md-3 col-sm-4 col-xs-6">
        <a href="{$cbphoto->photo_links($photo,'view_item')}">
            {get_photo details=$photo output='html' width='100%'  class='photothumbs'}
        </a>
            <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>
        <p>
            <a href="{$cbphoto->photo_links($photo,'view_item')}" class="photoname"  name="avatar1_file" id="avatar1_file">{$photo.photo_title|truncate:15}</a>
        </p>
        <hr class="hrred">
    </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 == "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>