PHP Dynamic Content Slider | Lessoncup Programming Blog

Thursday, 17 October 2013

PHP Dynamic Content Slider

This lesson is show you how to change the JQuery content slider to dynamic content slider using PHP and My Sql. prople always look's for CMS with that they can organize when ever they want this slider can be organize by any one. i have added few features to this slider. Let's see about the features and how we do this.




Features

Database Feature
Manage the image order
Give the hyperlink to the image.

Javascript

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js">
</script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
 
 <script type="text/javascript">
 
  var theInt = null;
  var $crosslink, $navthumb;
  var curclicked = 0;
  
  theInterval = function(cur){
   clearInterval(theInt);
   
   if( typeof cur != 'undefined' )
    curclicked = cur;
   
  $crosslink.removeClass("active-thumb");
  $navthumb.eq(curclicked).parent().addClass("active-thumb");
  $(".stripNav ul li a").eq(curclicked).trigger('click');
   
  theInt = setInterval(function(){
  $crosslink.removeClass("active-thumb");
  $navthumb.eq(curclicked).parent().addClass("active-thumb");
  $(".stripNav ul li a").eq(curclicked).trigger('click');
    curclicked++;
    if( 6 == curclicked )
     curclicked = 0;
    
   }, 3000);
  };
  
  $(function(){
   
   $("#main-photo-slider").codaSlider();
   
   $navthumb = $(".nav-thumb");
   $crosslink = $(".cross-link");
   
   $navthumb
   .click(function() {
   var $this = $(this);
   theInterval($this.parent().attr('href').slice(1) - 1);
    return false;
   });
   
   theInterval();
  });
 </script>

HTML

index.php this file should connect to database here i have used while to loop the panel div all big thumbs and title links will be store in panel div.

Small thumbs store in movers-row, div inside this DIV take one more div and put it into the loop here the logic is we have to give the unique number to anchor tag. Ex-  <a href="display unique number here"> 


<div class="slider-wrap">

<div id="main-photo-slider" class="csw">

<div class="panelContainer">
   
 <?php
 $gall=mysql_query("select * from topslider order by iorder");
 if(mysql_num_rows($gall)==0){   
 }else{
 while($full=mysql_fetch_array($gall)){
 ?>
 <div class="panel" title="<?php echo $full['title']?>">
 <div class="wrapper">
 <a href="<?php echo $full['iurllink']?>" target="_blank">
<img src="images/<?php echo $full['image']?>" alt="<?php echo $full['title']?>" width="590" height="290"  border="0"/>
</a>
 <div class="photo-meta-data">
 <span><?php echo $full['title']?>
</span>
</div>
</div>
</div> 

<?php }}?>
  
  
</div>
</div>
  
<div id="movers-row">
  
<?php
 $gall=mysql_query("select * from topslider order by iorder");
   
   if(mysql_num_rows($gall)==0){   
   }else{
   $i=1;
   while($full=mysql_fetch_array($gall)){
   ?>
   <div>
   <a href="<?php echo '#'.$i++;?>" class="cross-link active-thumb">
<img src="images/<?php echo $full['image']?>" alt="<?php echo $full['title'];?>" class="nav-thumb"  height="42" width="62"/></a>
</div>
   <?php }}?> 
  
  </div>
 </div>

Database


--
-- Table structure for table `slider`
--

CREATE TABLE IF NOT EXISTS `topslider` (
  `sid` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL,
  `image` varchar(255) NOT NULL,
  `iurllink` text NOT NULL,
  `iorder` varchar(10) NOT NULL,
  PRIMARY KEY (`sid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;


Live Demo   Download Script

4 comments :

  1. Great! now how to add dynamically image to the database?

    ReplyDelete
  2. Hello there I am so happy I found your web site, I really found you by mistake, while I was looking on Askjeeve for something else, Nonetheless I am here now and would just like to say thanks for a marvelous post and a all round interesting blog (I also love the theme/design), I don't have time to look over it all at the minute but I have saved it and also added in your RSS feeds, so when I have time I will be back to read much more, Please do keep up the excellent job. gmail login

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons