Jump to content

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

davids_media

By davids_media
in PHP Coding Help

Recommended Posts

davids_media Member

davids_media

Posted
Posted

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 Member

teynon

Posted
Posted

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>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.