Problem with Jquery slider

Question

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 21-Aug-12 0:37am

Manjula.g

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sandip.Nascar · Accepted Answer · 2012-08-22T09:30:00

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