PHP is stopping JQUERY from animatng my image slider

JavaScript
1

I have to put a empty div just inside the first to get the jquery tor run the image slider - which horizontally slides the “.slideImgDiv” that are inside div with the id.slider - If i’m using php/mysql to create the rest of them by calling the file names from an sql db. Should I not use php for this? and if not what should I use to generate them with out having to hardcode them everytime I add a new image.

the slider i’m working on can be seen at http://dsamajr.com – and just because it’s working doesn’t mean i have this issue fixed, i’m just testing the changes in a different file

<div id="slider" class="sliderMenu">
       <div class="slideImgDiv"></div>   // this is the div I have to use to allow it to work
		<?php
        $sql = "SELECT id, filename, linkto FROM imageScroller";
        $result = $conn->query($sql);
        
        if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo "<div class='slideImgDiv'>";
		echo "<img src='" . $row["filename"]. "' style='max-height:118px; max-width:1000px;' />";
		echo "</div>";
            }
        } else {
            echo "0 results";
        }
        $conn->close();
        ?>  
        </div>
    </div>
2

Yes, PHP is perfectly good for generating the code for those images.

Are you having any issues that you want further help with?

3

The PHP loads the images fine, but when I use it the the sliding effect of the jQuery doesn’t work.

4

Going by view-source it looks like you’re working with FlowSlider.
From their docs Basic Example
http://www.flowslider.com/for-developers/setup-html/basics

<!DOCTYPE html>
<html>
<head>
    <!-- CSS style just to see how the slider is working -->
    <style>
        #slider span {font-size:1000px;}
    </style>
    <script src="jquery.js"></script>
    <script src="flowslider.jquery.js"></script>
    <script>
        jQuery().ready(function($) {
            FlowSlider("#slider");
        });
    </script>
</head>
<body>
    <div id="slider">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

It looks like you need multiple spans inside the div instead of multiple divs. eg.

                echo "<div class='slideImgDiv'>";
            while($row = $result->fetch_assoc()) {
                echo "<span>";
		echo "<img src='" . $row["filename"]. "' style='max-height:118px; max-width:1000px;' />";
		echo "</span>";
            }
		echo "</div>";
5

I went ahead and tried the spans like you said and it works perfectly when I don’t use php to call the data from the db. But as soon as I connect to the db it stops working.

6

What I see currently is

<div id="slider">
    <span>
           <span>1</span>
           <span>2</span>
           <span>3</span>
           <span>4</span>
           <span>5</span>
           <span>6</span>
    </span>
</div>

My guess is either the outer span is breaking it, or there aren’t enough images to the point where sliding is needed, so it doesn’t.

7

Okay, i feel like an idiot now. You’re right. I just needed more images to make it work. Thank you.

8

Don’t. Count it as a lesson learned that won’t get you again.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.