Dynamic Jquery Slider

[hriti]

hello
can i have featured content slider dynamilcally???
if yes thn how???

[diafol]

http://css-tricks.github.io/AnythingSlider/#&panel1-1&panel2-1

[hriti]

i want to get image,thumnail and content from database...is it possible in slider???

[Eagle.Avik]

@hriti

i want to get image,thumnail and content from database

what do you mean by this??

if you store image url in the database, then you can fetch it.

or do you storing the image code itself in the database??

[hriti]

done with the code for admin...saved the text and images in database...
now i dnt understnd how to get it at front end in slide...plz chk the featured content slider from net...u ll undrstnd wat exactly i want...

[diafol]

Do not write in all uppercase or use "leet", "txt" or "chatroom" speak

Source: http://www.daniweb.com/community/rules

Your posts are very difficult to understand. Please write out in full what you require. You're giving us info in piecemeal fashion - as if it's a secret - not very helpful.

[hriti]

sorry for using that language..i will keep rules in my mind for next time...now can u please help me...i have some more questions for which i don't have any anwser...

[diafol]

We're here to help, but as I mentioned, you don't give any info on which slider you want to use. So, without that info it's really difficult for us to guide you. Do you have any front-end code for the slider? So then we at least know where and what sort of info needs to be inserted.

I'm assuming that the slider you have in mind accepts html as data. If so, it should be quite simple.

Also show the sql tables or any query that you intend using to extract data from your db.

[hriti]

code at front end for slider...

<div class="div2" style="padding:5px 5px 69px 55px;border:0px solid #E3E3E3;">
        <div class="floatLeft">
            <div id="sliderFrame">
                <div id="slider">
                    <img src="images/slide1.jpg" alt="#slideshow-1" title="Welcome to Menucool jQuery Slideshow" />
                    <b data-src="images/slide2.jpg" data-alt="#slideshow-2"></b>
                    <a href="http://www.menucool.com"><b data-src="images/slide1.jpg" data-alt="#slideshow-3"></b></a>
                    <b data-src="images/slide2.jpg" data-alt="#slideshow-4"></b>
                    <b data-src="images/slide1.jpg" data-alt="#slideshow-5"></b>
                    <b data-src="images/slide2.jpg" data-alt="#slideshow-6"></b>
                    <b data-src="images/slide1.jpg" data-alt="#slideshow-7"></b>
                    <b data-src="images/slide2.jpg" data-alt="#slideshow-8"></b>
                    <b data-src="images/slide1.jpg" data-alt="#slideshow-9"></b>
                    <b data-src="images/slide2.jpg"  data-alt="#slideshow-10"></b>
                    <b data-src="images/slide1.jpg"  data-alt="#slideshow-11"></b>
                    <b data-src="images/slide2.jpg"  data-alt="#slideshow-12"></b>                </div>
          </div>
        </div>
        <div class="floatLeft">    

        </div>
        <div style="clear:both;"></div> 
  <div id="mcts1">
         <img src="images/slideshow-1s.jpg" width="150" height="100" /  />
         <img src="images/slideshow-2s.jpg" width="150" height="100" />
         <img src="images/slideshow-3s.jpg" width="150" height="100" />
         <img src="images/slideshow-4s.jpg" width="150" height="100" />
         <img src="images/slideshow-5s.jpg" width="150" height="100" />
         <img src="images/slideshow-6s.jpg" width="150" height="100" />
         <img src="images/slideshow-7s.jpg" width="150" height="100" />
         <img src="images/slideshow-8s.jpg" width="150" height="100" />
         <img src="images/slideshow-9s.jpg" width="150" height="100" />
         <img src="images/slideshow-10s.jpg" width="150" height="100"  />
         <img src="images/slideshow-11s.jpg" width="150" height="100" />
         <img src="images/slideshow-12s.jpg" width="150" height="100" />      </div>

</div>

Database:::

id int(11)
imgname varchar(200)
photo varchar(200)
thumb varchar(200)
status enum("A","D")

[hriti]

upper <div> is for large images nd <div id="mcts1" is for thumbnail

[hriti]

if u don't understand what i need please checkout this:
http://demo.webdeveloperplus.com/featured-content-slider/

[hriti]

if u don't understand what i need please checkout this:
http://demo.webdeveloperplus.com/featured-content-slider/

[hriti]

is it possible to change photos and text from admin panel???
i have done only slider with just large images...i don't understand how to get images according to click on thumbnail...

[diafol]

From what I can see , the code for this would be...

<div id="featured" >  
    <ul class="ui-tabs-nav">  
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>  
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>  
    </ul>  
    <!-- First Content -->  
    <div id="fragment-1" class="ui-tabs-panel" style="">  
        <img src="images/image1.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Second Content -->  
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image2.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>  
        <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Third Content -->  
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image3.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >35 Amazing Logo Designs</a></h2>  
        <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>  
        </div>  
    </div>  
    <!-- Fourth Content -->  
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">  
        <img src="images/image4.jpg" alt="" />  
        <div class="info" >  
        <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>  
        <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>  
        </div>  
    </div>  
</div>

With thumbnails in

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>

Note the id: "nav-fragment-1" which will be linked to the big image at...

<div id="fragment-1" class="ui-tabs-panel" style="">  
    <img src="images/image1.jpg" alt="" />  
    <div class="info" >  
        <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>  
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>  
    </div>
</div>

I'm not sure what you need other than this.

You can insert your stuff fromn the DB dynamically like this... assuming you have your data in an array of this structure:

$rows = array(array('smallimg'=>'small1.jpg', 'bigimg'=>'big1.jpg', 'span'=>'15+ Excellent High Speed Photographs', 'h2'=>'15+ Excellent High Speed Photographs', 'p'=>'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a>'), array(...same sort of stuff for item2...), array(...same sort of stuff for item3...)); 

You can build that up from a "while loop" from a DB query. Anyway, to create the dynamic menu...

$counter = 1;
$thumbs = '';
$actuals = '';

foreach($rows as $row)
{
    $thumbs .= '<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-'. $counter . '"><a href="#fragment-'. $counter .'"><img src="'. $row['smallimg'] .'" alt="" /><span>'. $row['span'] .'</span></a></li>';  

    $actuals .= '<div id="fragment-'. $counter .'" class="ui-tabs-panel" style="">  
        <img src="'. $row['bigimg'] .'" alt="" />  
        <div class="info" >  
            <h2><a href="#" >'. $row['h2'] .'</a></h2>  
            <p>'. $row['p'] .'</p>  
        </div>
    </div>';
    $counter++;
}

You then echo out the $thumbs and $actuals in the appropriate place in your html:

<div id="featured" >  
    <ul class="ui-tabs-nav"> 
        <?php echo $thumbs;?>
    </ul>
    <?php echo $actuals;?>
</div>

That should do it.

[hriti]

i used this code...bt its not working...

<?php include("include/connection.inc.php");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus  Demos</title>
<link rel="stylesheet" type="text/css" href="style.css?version=new" />
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui-tabs-rotate.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
</head>
<body>

<?php 

$q="select * from slider order by id";
$output=mysql_query($q) or die (mysql_error().$q);
while($rows=mysql_fetch_array($output)){

    $counter = 1;
    $thumbs = '';
    $actuals = '';
    foreach($rows as $row)
    {
    $thumbs .= '<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-'. $counter . '"><a href="#fragment-'. $counter .'"><img src="'.store/slider/thumbs/ $row['photo'] .'" alt="" /><span>'. $row['title'] .'</span></a></li>';
    $actuals .= '<div id="fragment-'. $counter .'" class="ui-tabs-panel" style="">
    <img src="'.store/slider/images/ $row['photo'] .'" alt="" />
    <div class="info" >
    <h2><a href="#" >'. $row['title'] .'</a></h2>
    <p>'. $row['detail'] .'</p>
    </div>
    </div>';
    $counter++;
    }}?>     
            <div id="featured" >
    <ul class="ui-tabs-nav">
    <?php echo $thumbs;?>
    </ul>
    <?php echo $actuals;?>
    </div>


</body>
</html>

[hriti]

it shows the slider...bt its not fetching data from database..

[hriti]

and if i use this code it shows last record for the 4 times as there are 4 records in database..

<?php include("include/connection.inc.php");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus  Demos</title>
<link rel="stylesheet" type="text/css" href="style.css?version=new" />
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui-tabs-rotate.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
</head>
<body>

<?php 

$q="select * from slider order by id limit 0,4";
$output=mysql_query($q) or die (mysql_error().$q);

    while($rows= mysql_fetch_array($output))
        {

    $thumbs = '';
    $actuals = '';

    for($counter = 1; $counter <=mysql_num_rows($output);)
    {
    $thumbs .= '<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-'. $counter . '"><a href="#fragment-'. $counter .'"><img src="./store/slider/thumbs/'.$rows['photo'] .'" alt="" width="80" height="50"/><span>'. $rows['title'] .'</span></a></li>';
    $actuals .= '<div id="fragment-'. $counter .'" class="ui-tabs-panel" style="">
    <img src="./store/slider/images/'.$rows['photo'] .'" alt="" width="400" height="250"/>
    <div class="info" >
    <h2><a href="#" >'. $rows['title'] .'</a></h2>
    <p>'. $rows['detail'] .'</p>
    </div>
    </div>';

    $counter++;

   }}?>  

    <div id="featured" >
    <ul class="ui-tabs-nav">
    <?php echo $thumbs;?>
    </ul>
    <?php echo $actuals;?>
    </div>


</body>
</html>

[diafol]

27 and 28 before 24. no need fo a for loop inside a while loop. take off the for loop and set the counter before line24 too.

[hriti]

thank u...
solved now...
:)