Custom lof Slider for wordpress

Custom lof Slider for wordpress

Put this at header
=======================================================================

<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css” rel=”stylesheet” type=”text/css”/>
<link rel=”stylesheet” type=”text/css” href=”https://ahsanurrahman.com/jqslider/css/layout.css” />
<link rel=”stylesheet” type=”text/css” href=”https://ahsanurrahman.com/jqslider/css/style2.css” />

<style>

ul.lof-main-wapper li {
position:relative;
}
</style>

<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );

/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>
<!–<script language=”javascript” type=”text/javascript” src=”httpss://ahsanurrahman.com/jqslider/js/jquery.js”></script>–>
<script language=”javascript” type=”text/javascript” src=”httpss://ahsanurrahman.com/jqslider/js/jquery.easing.js”></script>
<script language=”javascript” type=”text/javascript” src=”httpss://ahsanurrahman.com/jqslider/js/script.js”></script>
<script type=”text/javascript”>
$(document).ready( function(){
var buttons = { previous:$(‘#jslidernews2 .button-previous’) ,
next:$(‘#jslidernews2 .button-next’) };
$(‘#jslidernews2′).lofJSidernews( { interval:5000,
easing:’easeInOutQuad’,
duration:1200,
auto:true,
mainWidth:684,
mainHeight:300,
navigatorHeight        : 100,
navigatorWidth        : 310,
maxItemDisplay:3,
buttons:buttons } );
});

</script>

<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script>

<script>
$(document).ready(function() {
$(“#tabs”).tabs();
});
</script>

=============================
Body Section
=============================

<div id=”slider”>
<div id=”jslidernews2″ style=”width:980px; height:300px;”>
<div><div></div></div>

<div >Previous</div>

<!– MAIN CONTENT –>

<div style=”width:684px; height:300px;”>

<ul>
<?php query_posts(‘category_name=slider&order=dsc&showposts=12’); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<img src=”<?php bloginfo(‘stylesheet_directory’);?>/images/thumbl_980x340.png” title=”Newsflash 2″ >
<div>

<h4><?php the_title();?></h4>
<p><?php the_excerpt();?>
<a href=”<?php the_permalink();?>”>Read more </a>
</p>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>

</div>

<!– END MAIN CONTENT –>
<!– NAVIGATOR –>

<div>
<div>

<ul>
<?php query_posts(‘category_name=slider&order=dsc&showposts=12’); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<div>
<img src=”<?php bloginfo(‘stylesheet_directory’);?>/images/lofthumbs/791902news3.jpg” />
<h3> <?php the_title();?></h3>

</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>

</div>

</div>

<!—————– END OF NAVIGATOR ———————>
<div>Next</div>

</div>

</div>

Leave a comment