Slide Show using post

/*
 Code by Manoj Singh
 msSlideX
*/
function msSlideX(){
?>
<style type="text/css">
#slideshow{ padding:8px; background:url(images/banner-bg.png) no-repeat top left; float:left; width:638px; height:352px; }
#slideshow #slideshowWindow { width:638px; height:352px; margin:0; padding:0; position:relative; overflow:hidden;}
#slideshow #slideshowWindow .slide { margin:0; padding:0; width:638;height:352px; float:left; position:relative; }
.msCaps{ border-radius:4px; background:#fff; font-family:"Myriad Pro", Arial, sans-serif; font-size:24px; color:#5d8e3e; font-weight:bold; font-style:italic; height:45px; position: absolute; bottom:10px; line-height:40px; left:10px; width:600px; padding-left:10px; padding-right:10px; }
.msCaps p{ color:#fff !important; font-size:13px; line-height:18px; float:left; width:100%; }
.msCaps h2.slideTitle{ float:left; width:100%; border:none !important; margin-bottom:15px !important; }
.msCaps h2.slideTitle a{ color:#fff !important; font-size:24px !important; font-weight:bold; text-transform:uppercase; }
.msCaps h2.slideTitle a:hover{ color:#fff !important;}
</style>
<script type="text/javascript">
jQuery(document).ready(function() { 
 var currentPosition = 0;
 var slideWidth = 638;
 var slides = jQuery('.slide');
 var numberOfSlides = slides.length;
 var slideShowInterval;
 var speed = 9000;
 
 slideShowInterval = setInterval(changePosition, speed);
 slides.wrapAll('<div id="slidesHolder"></div>')
 slides.css({ 'float' : 'left' });
 jQuery('#slidesHolder').css('width', slideWidth * numberOfSlides);
 function changePosition() {
 if(currentPosition == numberOfSlides - 1) {
 currentPosition = 0;
 }
 else
 {
 currentPosition++;
 }
 moveSlide();
 }
 function moveSlide() {
 // jQuery('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
 var ne = slideWidth*(-currentPosition);
 jQuery('#slidesHolder').css('marginLeft',ne);
 }
 });
</script>
<?php
//This function is use for get first image of post and use defualt image if no image in post
function ms_get_image_url() {
 global $post, $posts; 
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 $first_img = $matches [1] [0];
 if(empty($first_img)){ $first_img = get_template_directory_uri()."/images/no-image.jpg"; }
 return $first_img;
}
echo '<div id="slideshow">',
 '<div id="slideshowWindow">';
 $cat=10;
 $posts1=get_posts('width=50&showposts=-1&cat='.$cat);
 if ($posts1) {
 $i=0;
 $cat_post_ids = array(); 
 foreach($posts1 as $post) {
 echo '<div class="slide"><div class="msSlidexFrame"></div>';
$thumbNameExists = has_post_thumbnail( $post->ID);
 if( $thumbNameExists ){
 
 $th_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'post-thumbnail' , false );
 
 echo '<img src="'.$th_url[0].'" width="638" height="352"/>';
 }
 else {
 echo '<img src="', get_template_directory_uri(),'/images/no_image.jpg" height="352" width="638" alt="No Image Set on post"/>';
 } 
 $content = $post->post_content;
 $content = apply_filters('the_content', $content);
 $content = strip_tags($content, '<img />');
 $content = str_replace(']]>', ']]>', $content);
 echo '<div class="msCaps">';
 echo substr($content, 0 , 250);
 echo '<div class="banner-read"><a href="'.get_permalink($post->ID).'">';
 echo '</a></div>';
 echo '</div>'; 
 echo '</div>'; 
 }
 }
 wp_reset_query();
 echo '</div>',
'</div>'; 
 }
add_shortcode('msslidex','msSlideX');
/* End of msSlideX here */
Advertisements

One thought on “Slide Show using post

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s