Sliding Boxes and Captions

Description

This Example provided shows how to implement sliding boxes with WordPress post based on the wordPress category. Different variations of the slider can be found at http://s3.amazonaws.com/buildinternet/live-tutorials/sliding-boxes/index.htm

This Example provided shows how to implement sliding boxes with WordPress post based on the wordPress category. Different variations of the slider can be found at http://s3.amazonaws.com/buildinternet/live-tutorials/sliding-boxes/index.htm

HTML Source Code

                        
                          <!-- Post Starts -->    
<?php
query_posts('cat=15&posts_per_page=4&orderby=title&order=asc'); // query to show all posts independent from what is in the center;
if (have_posts()) :
   while (have_posts()) :the_post(); ?>
   
 

<!--Box sliders Start-->   

<div class="boxgrid slideright">
				<img class="cover" src="/wp-content/themes/the chords of josh/thumb.php?src=<?php $values = get_post_custom_values("url"); echo ($values[0] ? $values[0] : "" ); ?>&w=250&h=130&zc=1&q=200" alt="Single Image"/>
					<h3> <a href="<?php the_permalink(); ?>" rel="bookmark" title="Link to <?php the_title_attribute(); ?>">View <?php the_title(); ?></a></h3>
			</div>
 <!--Box sliders End-->    
   

   

<?php  endwhile;
endif;
wp_reset_query();
?>

<!-- Post Ends -->

CSS Source Code

                        
                          /*************************************
Product Slide Start
*************************************/


*{ padding:0px; margin:0px; }
			.boxgrid a{ color:#C8DCE5;}
			.boxgrid h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }
			
			.boxgrid {
    background: none repeat scroll 0 0 #FEF6ED;
    border: 2px solid #D9F1FC;
    float: left;
    height: 130px;
    margin: 10px;
    overflow: hidden;
    position: relative;
    width: 250px;
}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 100px; 
				width: 100%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 260;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 220;
 					left: 0;
 				}
				
			h3 a{}

/*************************************
Products Slide End
*************************************/

JavaScript Code

                        
                          <script type="text/javascript">
$(document).ready(function(){
//Horizontal Sliding
				$('.boxgrid.slideright').hover(function(){
					$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
				});
});
</script>


Post Categories

Tags