CODEWITHSUNDEEP
phpmysqlcycle2
Chris Jasztrab
Chris Jasztrab

Reputation: 9

Using Cycle2 Malsup php library to show images based on information from my MySQL database. Only image image is showing at a time

I am trying to build a book carousel that shows books that are available to check out at the library based on items in our catalogue. I am querying a MySQL database to get items that match a specific query and using that with the Malsup Cycle2 php library. My image will show up on the screen but I only see one image and it disappears and another zooms in. I want to be able to see 5 books covers at a time and have one scroll of and another on. Here is my code.

    $con = mysqli_connect("1.2.3.4","user","pass","database");
        if (mysqli_connect_errno())
        {
            echo "Failed to connect to MySQL: " . mysqli_connect_error();
        }
        mysqli_set_charset($con, "utf8");
        $sql = "SELECT DISTINCT bibs.record_id, "
        . "bibs.TITLE, bibs.AUTHOR, bibs.ISBNISSN, bibs.RECORDKEY, items.itemstatus, "
        . "items.bib_record_id, items.locationcode, items.branchcode "
        . "FROM bibs "
        . "INNER JOIN items ON bibs.record_id = items.bib_record_id "
        . "WHERE bibs.CATDATE >= '$last_thirty_days' "
        . "AND bibs.MATTYPE = 'a' "
        . "AND bibs.ISBNISSN != '' "
        . "AND items.locationcode LIKE '%af%' "
        . "AND items.branchcode = '1' "
        . "AND items.locationcode NOT LIKE '%wb%' "
        . "GROUP BY bibs.record_id "
        . "LIMIT 15";
        $result = mysqli_query($con,$sql);
      ?>
        <ul class="cycle-slideshow"
  data-cycle-carousel-visible="5"
  data-cycle-fx="scrollHorz"
  data-cycle-slides="li">
        <?php
            while ($bibs = mysqli_fetch_assoc($result)) {
            $bookcoverURL = createImageURL($bibs['ISBNISSN']);
        ?>
        <li>    <a href = "<?php echo $encoreURL; ?>">
            <img width=188px height=300px src="<?php echo $bookcoverURL;?>">
            </a></li>
        <?php }
            mysqli_free_result($result);
            mysqli_close($con);

        ?>
</ul>
</div>
    <br />

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="includes/jquery.cycle2.js"></script>
</body>

Upvotes: 1

Views: 37

Answers (1)

Chris Jasztrab
Chris Jasztrab

Reputation: 9

I've answered my own question. It doesn't specify on the demo pages, but in order to get the carousel to work and to have the images transition properly you need to include one of the optional plugins that is available on this page http://jquery.malsup.com/cycle2/download/

After I downloaded and included that plugin the carousel is working as expected.

Upvotes: 0

Related Questions