need help on how to create a jquery carousel effect for a dynamic php html table

davids_media · April 17, 2012

I have this code which I created last week of a dynamic html data driven table using php.

<?php 
$title = "Pick your Product";

//Set number of columns to use
$maxCols = 3;

error_reporting(E_ALL ^ E_NOTICE);
ini_set("display_errors", 1);

require ('includes/config.inc.php');
include ('./includes/header.html');
require (MYSQL);
include ('./includes/main.html');

if($id = isset($_GET['catID'])) 
{
    //Create and run query to get product category names for the selected cat ID
    $query = "SELECT `product`.`prodID`, `product`.`product`, `category`.`cat`, `product`.`prod_descr`, `category`.`cat_descr`, `product`.`price`, `product`.`image`
              FROM `product`
              LEFT JOIN `category` ON `product`.`catID` = `category`.`catID`
              WHERE `product`.`catID`='{$_GET['catID']}'
              ORDER BY `product`.`product`";
    $r = mysqli_query($dbc, $query);

$showHeader = true;

echo "<div id='right'>";

    while($row = mysqli_fetch_array($r))
    {
        if($showHeader)
        {
		echo "<table>";
            //Display category header
            echo "<h1>" . "<span>" . "# " . "</span>" . $row['cat'] .  "<span>" . " #" . "</span>" . "</h1>";
		echo "<h2>" . $row['cat_descr'] . "</h2>";
            $showHeader = false;

		 //Set index var to track record count
        $recIdx = 0;

            $recIdx++;

            //Open new row if needed
            if($recIdx % $maxCols == 1)
            {
                echo "<tr>";
            }

        }

            //Display product	
            echo "<td>";
            echo "<img src='db/images/".$row['image']."' height=150px width=150px /><br>";
            echo "<li>" . "<a href='item.php?prodID={$row['prodID']}' title='{$row['product']}'>" . $row['product'] . "</a>" . "</li>";
            echo "<span>" . "£". $row['price'] . "</span>"; 




            echo "</td>";

            //Close row if needed
            if($recIdx % $maxCols == 1)
            {
                echo "</tr>";
            }
        }

        //Close last row if needed
        if($recIdx % $maxCols == 0)
        {
            echo "</tr>";
        }

        //Close table & div
    }

        echo "</table>";
        echo "</div>";

include ('./includes/footer.html');

?>

I now want to incorporate an jquery carousel effect similar to this effect (its an image carousel though);

http://sorgalla.com/projects/jcarousel/examples/special_flexible.html

I know how to embed actual html script tages and actual javascript code into php but just not able to find the best practice possible to use it with my data table.

help would be much appreciated

teynon · April 18, 2012

I wrote a little jquery carousel effect for fun after reading this post.

Convert your table to cells and you can use it similar to the code below. See http://tomsfreelance.com/phpfreaks/carousel/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html>
<head>
<script type="text/Javascript" src="jquery/jquery1.7.js"></script>
<script>
if (!com) var com = {};
if (!com.mysite) com.mysite = {};
com.mysite.carousel = function(container) {
    this.elements = new Array();
    this.numPerPage = 4;
    this.page = 0;
    this.id = container;
    this.width = 0;
    this.height = 0;
    
    this.init = function() {
        var self = this;        
        this.width = $('#' + this.id).width();
        $('#' + self.id).wrapInner("<div id=\"" + self.id + "_innerBlock\"><div id=\"" + self.id + "_innerBlock2\"></div></div>");
        
        // Draw right and left arrow blocks
        $('#' + self.id).prepend("<div id=\"" + self.id + "_carousel_left\" style=\"float: left; cursor: pointer;\"><</div>");
        $('#' + self.id).append("<div id=\"" + self.id + "_carousel_right\" style=\"float: right; cursor: pointer;\">></div>");
        $('#' + self.id + '_carousel_left').click(function() {
            self.slide("right");
        });
        $('#' + self.id + '_carousel_right').click(function() {
            self.slide("left");
        });
    
        this.width -= $('#' + self.id + '_carousel_left').width() + $('#' + self.id + '_carousel_right').width();
        $("#" + self.id + "_innerBlock").css({
            "float" : "left",
            "width" : this.width - 5,
            "overflow" : "hidden",
            "white-space" : "nowrap"
        });
        
        var showCss = {
            "float" : "left",
            "width" : Math.ceil(this.width / this.numPerPage),
            "text-align" : "center",
            "position" : "relative"
        }
        // Initialize the carousel elements.
        $('.carousel_item').each(function(index) {
            $(this).wrap("<div id=\"carousel_element_" + index + "\"></div>");
            self.elements[self.elements.length] = "carousel_element_" + index;
            $('#carousel_element_' + index).css(showCss);
        });
        
        $("#" + self.id + "_innerBlock2").css({
            "width" : Math.round(this.width / this.numPerPage) * this.elements.length,
            "overflow" : "hidden",
            "white-space" : "nowrap",
            "position" : "relative"
        });
        
        $('#' + this.id).css({ "white-space" : "nowrap", "overflow" : "hidden" });
        
        $('#' + self.id).append("<br clear=\"all\" />");
    }
    
    this.slide = function(direction) {
        
        if (direction == "left") {
            if (this.page + 1 < this.elements.length / this.numPerPage) {
                this.page++;
                // Hide the current page.
                $('#' + this.id + '_innerBlock2').animate({ "left" : "-=" + this.width + "px" }, "slow");
            }
        }
        if (direction == "right") {
            // Hide the current page.
            if (this.page - 1 >= 0) {
                this.page--;
                //$('#' + this.id + '_page_' + this.page).hide("slide", { direction : "right" }, 1000);
                $('#' + this.id + '_innerBlock2').animate({ "left" : "+=" + this.width + "px" }, "slow");
            }
        }
    }
}
var myCarousel = new com.mysite.carousel("carousel");
$(document).ready(function() {
    myCarousel.init();
});
</script>
</head>
<body>

<div id="carousel" style="width: 500px; border: 1px solid #000000;">
<div class="carousel_item">Item 1</div>
<div class="carousel_item">Item 2</div>
<div class="carousel_item">Item 3</div>
<div class="carousel_item">Item 4</div>
<div class="carousel_item">Item 5</div>
<div class="carousel_item">Item 6</div>
<div class="carousel_item">Item 7</div>
<div class="carousel_item">Item 8</div>
</div>

</body>
</html>

davids_media · April 18, 2012

thanks, that helps me loads, so fingers crossed i can get it to work now

Sign In

need help on how to create a jquery carousel effect for a dynamic php html table

Recommended Posts

davids_media

Link to comment

Share on other sites

teynon

Link to comment

Share on other sites

davids_media

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information