Click here to Skip to main content
15,169,508 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi everyone,
i am using jquery slider with php,mysql
it is fetching the data but not displaying correctly
please help me in this.
Here is my code
XML
<!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
</head>
<body>
<?php
include("connection.php");
$query=mysql_query("select * from images");
while($row=mysql_fetch_array($query))
{
    echo "

        <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'><span>".$row['imageid']." Photographs</span></a></li>

          </ul>

        <!-- First Content -->
        <div id='fragment-1' class='ui-tabs-panel' style=''>
            <img src=".$row['imagepath']." alt='' />
             <div class='info' >
                <h2><a href='#' >15+ Excellent High Speed Photographs</a></h2>
                <p>".$row['Description']."<a href='#' >read more</a></p>
             </div>
        </div>

        </div>
    </div>


</body>";
}
mysql_close($con);
?>
</html>
Posted
Comments
[no name] 21-Aug-12 7:02am
   
whether there is any jQuery conflict?

open error console ie.., ctrl+shift+J

let me know the error list plz......
Manjula.g 21-Aug-12 7:14am
   
actually i am not getting the error console becoz i am using as php code.

from database it is fecthing correctly when i am using while loop it is displaying as a list but jquery is not working .how to do that?
Manjula.g 21-Aug-12 8:15am
   
i have html static jquery slider it is working fine but i want images from mysql database using php
Mohibur Rashid 22-Aug-12 3:41am
   
are you sure you can fetch image from your database? are you sure that you can display in normal way fetching from database?
Manjula.g 22-Aug-12 4:20am
   
yes,i am using php,mysql to fetch as usaul but it is displaying at a time all values with out slider show so i want to know that

1 solution

You have missed few important things,

One I see is
<div id="fragment-1" class="ui-tabs-panel" style="">
</div>

Here the id is always fragment-1
It should be
fragment-1
fragment-2
fragment-3.....so on

Second issue is yu didn't hide the other div except the 1st one.
<div id="fragment-2" class="ui-tabs-panel  ui-tabs-hide" style="">
</div>


So, you need to update the counter in loop to set the div id properly and use hide for all iteration except the first one.

For reference, here is the workable version
You need to re-code your php

    <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"><span>Photographs 1</span></a></li>
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-2"><a href="#fragment-2"><span>Photographs 2</span></a></li>
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-3"><a href="#fragment-3"><span>Photographs 3</span></a></li>
      </ul>

    <!-- First Content -->

    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="images/cancel_cross.png" alt="" />
         <div class="info">
            <h2><a href="#">15+ Excellent High Speed Photographs</a></h2>
            <p>>read more</p>
         </div>
    </div>
    <div id="fragment-2" class="ui-tabs-panel  ui-tabs-hide" style="">
        <img src="images/confirm_right.png" alt="" />
         <div class="info">
            <h2><a href="#">15+ Excellent High Speed Photographs</a></h2>
            <p>>read more</p>
         </div>
    </div>
    <div id="fragment-3" class="ui-tabs-panel  ui-tabs-hide" style="">
        <img src="images/gray_arrow_greater.jpg" alt="" />
         <div class="info">
            <h2><a href="#">15+ Excellent High Speed Photographs</a></h2>
            <p>>read more</p>
         </div>
    </div>
</div>


It will run definirely...

cheers
   
Comments
Manjula.g 23-Aug-12 0:47am
   
Hi Thanks for the reply
I will try with this code. but one more thing is the images i am fetching from database so i ,didnot used id .Can we use imageid as fragment id here from database?
Sandip.Nascar 23-Aug-12 1:11am
   
No, you cannot do this, nav-fragment-1 is linked with div id=fragment-1. To implement this is pretty straight forward. Just use a counter. Set it 1 before the loop. Use the counter to generate the id and increment the counter.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900