Dynamic Jquery Slider

Question

hriti 0 Light Poster

10 Years Ago

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

php slider

3 Contributors
18 Replies
1K Views
6 Days Discussion Span
Latest Post 10 Years Ago Latest Post by hriti

All 18 Replies

diafol

10 Years Ago

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

Eagle.Avik 0 Junior Poster in Training

10 Years Ago

@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??

diafol

10 Years Ago

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.

diafol

10 Years Ago

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.

diafol

10 Years Ago

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.

Edited 10 Years Ago by diafol

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

hriti 0 Light Poster · Answer 1 · 2013-12-23T04:58:17+00:00

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

hriti 0 Light Poster · Answer 2 · 2013-12-23T10:35:42+00:00

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...

hriti 0 Light Poster · Answer 3 · 2013-12-26T11:49:31+00:00

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...

hriti 0 Light Poster · Answer 4 · 2013-12-27T05:02:22+00:00

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 0 Light Poster · Answer 5 · 2013-12-27T05:03:42+00:00

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

hriti 0 Light Poster · Answer 6 · 2013-12-27T05:14:32+00:00

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

hriti 0 Light Poster · Answer 7 · 2013-12-27T05:14:48+00:00

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

hriti 0 Light Poster · Answer 8 · 2013-12-27T05:16:50+00:00

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...

hriti 0 Light Poster · Answer 9 · 2013-12-28T05:19:55+00:00

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 0 Light Poster · Answer 10 · 2013-12-28T06:03:56+00:00

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

hriti 0 Light Poster · Answer 11 · 2013-12-28T07:40:06+00:00

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 · Answer 12 · 2013-12-28T08:10:39+00:00

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 0 Light Poster · Answer 13 · 2013-12-28T08:19:29+00:00

hriti 0 Light Poster

10 Years Ago

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

Dynamic Jquery Slider

Recommended Answers Collapse Answers

All 18 Replies

Recommended Answers