PHP database-driven carousel display
Does anyone know of a dynamic, PHP Carousel image display?
Like this one: http://codecanyon.net/item/all-around-jquery-content-slider-carousel/full_screen_preview/4809047
I am not able to convert this to a dynamic output.
Thanks!
Like this one: http://codecanyon.net/item/all-around-jquery-content-slider-carousel/full_screen_preview/4809047
I am not able to convert this to a dynamic output.
Thanks!
ASKER
Ray, I don't see your example...??? Nothing shows up when I click the link.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Right ... I see the documentation, but I do not see the dynamic slider that you created...???
It won't be visible unless you have image files. See line 23-35. The base href tag is apparently not available to jQuery. You might try installing the "view source" on your own server and putting the image URLs into those lines.
ASKER
I've made it database driven, but it won't loop through the recordset. I can get the recordset to loop if I output the query on a different part of the page, but not within the slider wrapper. It just repeats the same first record over and over. I think I'm close, but I just can't get it to loop...??? Any ideas? The field css-id contains sw0, sw1, sw2, etc., so, theoretically, it should loop like the static pages do.
My code below:
<?php do { ?>
<script type="text/javascript">
(function($){
$(document).ready(function
var image_array = new Array();
image_array = [
{image: 'content/products/<?php echo $row_getProds['prodpic']; ?>', link_url: 'content/products/<?php echo $row_getProds['prodpic']; ?>', link_rel: 'prettyPhoto'},
// image for the third layer, goes with the text from id="sw2"
// if 'link_rel' is empty, zoom icon will open link instead of an image.
// 'main_link' is a link for a whole big circle, and it is
// available only if 'middle_click': 3 (see parameters list below).
// main_link_target: 0 = open link in the same window; 1 = in new tab
];
$('#slider1').content_slid
map : image_array, // pointer to the image map
max_shown_items: 4, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 2, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 810, // height of widget, displayed in pixels
middle_click: 1, // when main circle is clicked:
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: -1, // -1 = circle, 0 and other = radius
auto_play: 1
});
});
})(jQuery);
</script>
<div class="content_slider_wrap
<div class="circle_slider_text_
<div class="content_slider_text
<h3><?php echo $row_getProds['productName
<span><?php echo $row_getProds['description
<a href="#" class="button_regular">Mor
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<?php } while ($row_getProds = mysql_fetch_assoc($getProd
My code below:
<?php do { ?>
<script type="text/javascript">
(function($){
$(document).ready(function
var image_array = new Array();
image_array = [
{image: 'content/products/<?php echo $row_getProds['prodpic']; ?>', link_url: 'content/products/<?php echo $row_getProds['prodpic']; ?>', link_rel: 'prettyPhoto'},
// image for the third layer, goes with the text from id="sw2"
// if 'link_rel' is empty, zoom icon will open link instead of an image.
// 'main_link' is a link for a whole big circle, and it is
// available only if 'middle_click': 3 (see parameters list below).
// main_link_target: 0 = open link in the same window; 1 = in new tab
];
$('#slider1').content_slid
map : image_array, // pointer to the image map
max_shown_items: 4, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 2, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 810, // height of widget, displayed in pixels
middle_click: 1, // when main circle is clicked:
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: -1, // -1 = circle, 0 and other = radius
auto_play: 1
});
});
})(jQuery);
</script>
<div class="content_slider_wrap
<div class="circle_slider_text_
<div class="content_slider_text
<h3><?php echo $row_getProds['productName
<span><?php echo $row_getProds['description
<a href="#" class="button_regular">Mor
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<?php } while ($row_getProds = mysql_fetch_assoc($getProd
Please post a link so I can see the generated HTML, thanks.
ASKER
I'ts only on my localhost at this time. Here is the HTML code output. Thanks!
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="fonts/ostrich_sans/stylesheet.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800' rel='stylesheet'
type='text/css'>
<link href="css/content_slider_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"
charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.content_slider.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.animate-colors.js" type="text/javascript"></script>
<script src="js/additional_content.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
(function($){
$(document).ready(function() {
var image_array = new Array();
image_array = [
{image: 'content/products/DSCN1378.jpg', link_url: 'content/products/DSCN1378.jpg', link_rel: 'prettyPhoto'},
// image for the third layer, goes with the text from id="sw2"
// if 'link_rel' is empty, zoom icon will open link instead of an image.
// 'main_link' is a link for a whole big circle, and it is
// available only if 'middle_click': 3 (see parameters list below).
// main_link_target: 0 = open link in the same window; 1 = in new tab
];
$('#slider1').content_slider({ // bind plugin to div id="slider1"
map : image_array, // pointer to the image map
max_shown_items: 4, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 2, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 810, // height of widget, displayed in pixels
middle_click: 1, // when main circle is clicked:
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: -1, // -1 = circle, 0 and other = radius
auto_play: 1
});
});
})(jQuery);
</script>
<div class="content_slider_wrapper" id="slider1">
<div class="circle_slider_text_wrapper" id="sw0" style="display: none;">
<div class="content_slider_text_block_wrap">
<h3>LG Optimus F3 4G LTE</h3><br /><br />
<span>Whenever single-loop learning strategies go wrong, the three cs - customers, competition and change - have created a new world for business to experience a profound paradigm shift. </span><br /><br /><br />
<a href="#" class="button_regular">More Info</a><!-- button_regular -->
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
(function($){
$(document).ready(function() {
var image_array = new Array();
image_array = [
{image: 'content/products/DSCN1385.jpg', link_url: 'content/products/DSCN1385.jpg', link_rel: 'prettyPhoto'},
// image for the third layer, goes with the text from id="sw2"
// if 'link_rel' is empty, zoom icon will open link instead of an image.
// 'main_link' is a link for a whole big circle, and it is
// available only if 'middle_click': 3 (see parameters list below).
// main_link_target: 0 = open link in the same window; 1 = in new tab
];
$('#slider1').content_slider({ // bind plugin to div id="slider1"
map : image_array, // pointer to the image map
max_shown_items: 4, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 2, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 810, // height of widget, displayed in pixels
middle_click: 1, // when main circle is clicked:
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: -1, // -1 = circle, 0 and other = radius
auto_play: 1
});
});
})(jQuery);
</script>
<div class="content_slider_wrapper" id="slider1">
<div class="circle_slider_text_wrapper" id="sw1" style="display: none;">
<div class="content_slider_text_block_wrap">
<h3>LG A340 GoPhone</h3><br /><br />
<span>Quantitative analysis of all the key ratios has a vital role to play in this organizations capable of double-loop learning, defensive reasoning, the doom loop and doom zoom. </span><br /><br /><br />
<a href="#" class="button_regular">More Info</a><!-- button_regular -->
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
(function($){
$(document).ready(function() {
var image_array = new Array();
image_array = [
{image: 'content/products/DSCN1398.png', link_url: 'content/products/DSCN1398.png', link_rel: 'prettyPhoto'},
// image for the third layer, goes with the text from id="sw2"
// if 'link_rel' is empty, zoom icon will open link instead of an image.
// 'main_link' is a link for a whole big circle, and it is
// available only if 'middle_click': 3 (see parameters list below).
// main_link_target: 0 = open link in the same window; 1 = in new tab
];
$('#slider1').content_slider({ // bind plugin to div id="slider1"
map : image_array, // pointer to the image map
max_shown_items: 4, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 2, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 810, // height of widget, displayed in pixels
middle_click: 1, // when main circle is clicked:
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: -1, // -1 = circle, 0 and other = radius
auto_play: 1
});
});
})(jQuery);
</script>
<div class="content_slider_wrapper" id="slider1">
<div class="circle_slider_text_wrapper" id="sw2" style="display: none;">
<div class="content_slider_text_block_wrap">
<h3>Nokia Lumia 1020 for AT&T (Yellow)</h3><br /><br />
<span>The vitality of conceptual synergies is of supreme importance taking full cognizance of organizational learning parameters and principles, working through a top-down, bottom-up approach.</span><br /><br /><br />
<a href="#" class="button_regular">More Info</a><!-- button_regular -->
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
(function($){
$(document).ready(function() {
var image_array = new Array();
image_array = [
{image: 'content/products/DSCN1404.jpg', link_url: 'content/products/DSCN1404.jpg', link_rel: 'prettyPhoto'},
// image for the third layer, goes with the text from id="sw2"
// if 'link_rel' is empty, zoom icon will open link instead of an image.
// 'main_link' is a link for a whole big circle, and it is
// available only if 'middle_click': 3 (see parameters list below).
// main_link_target: 0 = open link in the same window; 1 = in new tab
];
$('#slider1').content_slider({ // bind plugin to div id="slider1"
map : image_array, // pointer to the image map
max_shown_items: 4, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 2, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 810, // height of widget, displayed in pixels
middle_click: 1, // when main circle is clicked:
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: -1, // -1 = circle, 0 and other = radius
auto_play: 1
});
});
})(jQuery);
</script>
<div class="content_slider_wrapper" id="slider1">
<div class="circle_slider_text_wrapper" id="sw3" style="display: none;">
<div class="content_slider_text_block_wrap">
<h3>Nokia Lumia 521 No-Contract 4" Windows 8 Smartphone with T-Mobile Service</h3><br /><br />
<span>An investment program where cash flows exactly match shareholders' preferred time patterns of consumption exploiting the productive lifecycle as knowledge is fragmented into specialities. Building flexibility through spreading knowledge and self-organization, whenever single-loop learning strategies go wrong, to focus on improvement, not cost. </span><br /><br /><br />
<a href="#" class="button_regular">More Info</a><!-- button_regular -->
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<p> </p>
<p> </p>
</body>
</html>
Why did you change the doctype?
ASKER
I don't recall changing it...??? Maybe it was like that before I saved it as a PHP file...??? Nothing intentional was done on my part.
It was an HTML5 doctype when I posted it. These were the top five lines:
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.shindiristudio.com/content_slider/" />
<title>Content Slider</title>
In the recent code sample, these are the top five lines:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
I don't know what all that stuff in the doctype is supposed to mean, but I know that when you change the doctype you're changing a lot of the rules about how HTML, JavaScript and CSS are supposed to be interpreted.
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.shindiristudio.com/content_slider/" />
<title>Content Slider</title>
In the recent code sample, these are the top five lines:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
I don't know what all that stuff in the doctype is supposed to mean, but I know that when you change the doctype you're changing a lot of the rules about how HTML, JavaScript and CSS are supposed to be interpreted.
ASKER
This is so weird. If you look at the source code, the HTML output, it DOES loop through the recordset. I copied all of the source code and put it into an HTML file, so no PHP was involved, and it still does not loop correctly. It shows only one photo and only one name and description ... even in HTML format. Ugh!!!
ASKER
Aaaaaahhhhh ... I see the problem. Just not sure how to fix it.
Can you see this page?
http://www.shindiristudio.com/content_slider/index.html
http://www.shindiristudio.com/content_slider/index.html
ASKER
Yes ... although, I just got the code to work with images AND content output. I had to separate the recordsets and have TWO separate repeat regions (it just did not work when I tried to do it as one recordset). I also had to tweak (within the code) where the recordsets started and ended their repeat.
Here is my source code:
<?php require_once('../Connectio
<?php
function GetSQLValueString($theValu
{
$theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . date("Y-m-d",strtotime($th
break;
case "time":
$theValue = ($theValue != "") ? "'" . date("H:i:s",strtotime($th
break;
case "datetime":
$theValue = ($theValue != "") ? "'" . date("Y-m-d H:i:s",strtotime($theValue
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
mysql_select_db($database_
$query_getProds = "SELECT * FROM prods";
$getProds = mysql_query($query_getProd
$row_getProds = mysql_fetch_assoc($getProd
$totalRows_getProds = mysql_num_rows($getProds);
mysql_select_db($database_
$query_getPics = "SELECT * FROM prods";
$getPics = mysql_query($query_getPics
$row_getPics = mysql_fetch_assoc($getPics
$totalRows_getPics = mysql_num_rows($getPics);
?>
<!DOCTYPE HTML>
<head>
<title>Untitled Document</title>
<link href="fonts/ostrich_sans/s
<link href='http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800' rel='stylesheet'
type='text/css'>
<link href="css/content_slider_s
<link rel="stylesheet" href="css/prettyPhoto.css"
charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></s
<script src="js/jquery.content_sli
<script src="js/jquery.mousewheel.
<script src="js/jquery.prettyPhoto
<script src="js/jquery.animate-col
<script src="js/additional_content
</head>
<body>
<script type="text/javascript">
(function($){
$(document).ready(function
var image_array = new Array();
image_array = [
<?php do { ?>
{image: 'content/products/<?php echo $row_getPics['prodpic']; ?>', link_url: 'content/products/<?php echo $row_getPics['prodpic']; ?>', link_rel: 'prettyPhoto'},
<?php } while ($row_getPics = mysql_fetch_assoc($getPics
];
$('#slider1').content_slid
map : image_array, // pointer to the image map
max_shown_items: 5, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 2, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 810, // height of widget, displayed in pixels
middle_click: 1, // when main circle is clicked:
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: -1, // -1 = circle, 0 and other = radius
auto_play: 1
});
});
})(jQuery);
</script>
<div class="content_slider_wrap
<?php do { ?>
<div class="circle_slider_text_
<div class="content_slider_text
<h3><?php echo $row_getProds['productName
<span><?php echo $row_getProds['description
<a href="#" class="button_regular">Mor
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<?php } while ($row_getProds = mysql_fetch_assoc($getProd
</div>
<p> </p>
<p> </p>
</body>
</html>
<?php
mysql_free_result($getPics
?>
It is now working just as I wanted it to!!! FINALLY!!! You definitely pointed me in the right direction, by suggesting I study the HTML source code that was output, so I will award points to you. Thank you! This will be so useful for future projects!!! :)
Here is my source code:
<?php require_once('../Connectio
<?php
function GetSQLValueString($theValu
{
$theValue = (!get_magic_quotes_gpc()) ? addslashes($theValue) : $theValue;
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . date("Y-m-d",strtotime($th
break;
case "time":
$theValue = ($theValue != "") ? "'" . date("H:i:s",strtotime($th
break;
case "datetime":
$theValue = ($theValue != "") ? "'" . date("Y-m-d H:i:s",strtotime($theValue
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
mysql_select_db($database_
$query_getProds = "SELECT * FROM prods";
$getProds = mysql_query($query_getProd
$row_getProds = mysql_fetch_assoc($getProd
$totalRows_getProds = mysql_num_rows($getProds);
mysql_select_db($database_
$query_getPics = "SELECT * FROM prods";
$getPics = mysql_query($query_getPics
$row_getPics = mysql_fetch_assoc($getPics
$totalRows_getPics = mysql_num_rows($getPics);
?>
<!DOCTYPE HTML>
<head>
<title>Untitled Document</title>
<link href="fonts/ostrich_sans/s
<link href='http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800' rel='stylesheet'
type='text/css'>
<link href="css/content_slider_s
<link rel="stylesheet" href="css/prettyPhoto.css"
charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></s
<script src="js/jquery.content_sli
<script src="js/jquery.mousewheel.
<script src="js/jquery.prettyPhoto
<script src="js/jquery.animate-col
<script src="js/additional_content
</head>
<body>
<script type="text/javascript">
(function($){
$(document).ready(function
var image_array = new Array();
image_array = [
<?php do { ?>
{image: 'content/products/<?php echo $row_getPics['prodpic']; ?>', link_url: 'content/products/<?php echo $row_getPics['prodpic']; ?>', link_rel: 'prettyPhoto'},
<?php } while ($row_getPics = mysql_fetch_assoc($getPics
];
$('#slider1').content_slid
map : image_array, // pointer to the image map
max_shown_items: 5, // number of visible circles
hv_switch: 0, // 0 = horizontal slider, 1 = vertical
active_item: 2, // layer that will be shown at start, 0=first, 1=second...
wrapper_text_max_height: 810, // height of widget, displayed in pixels
middle_click: 1, // when main circle is clicked:
// 1 = slider will go to the previous circle, 2 = to the next,
// 3 = open 'main_link', 0 = nowhere (no response)
border_radius: -1, // -1 = circle, 0 and other = radius
auto_play: 1
});
});
})(jQuery);
</script>
<div class="content_slider_wrap
<?php do { ?>
<div class="circle_slider_text_
<div class="content_slider_text
<h3><?php echo $row_getProds['productName
<span><?php echo $row_getProds['description
<a href="#" class="button_regular">Mor
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<?php } while ($row_getProds = mysql_fetch_assoc($getProd
</div>
<p> </p>
<p> </p>
</body>
</html>
<?php
mysql_free_result($getPics
?>
It is now working just as I wanted it to!!! FINALLY!!! You definitely pointed me in the right direction, by suggesting I study the HTML source code that was output, so I will award points to you. Thank you! This will be so useful for future projects!!! :)
Great! Glad it's working out for you, ~Ray
ASKER
Thanks for pointing me in the right direction!!! :D
ASKER
Ray suggested I look to the HTML code being output to determine why it was not work, which I did. He pointed me in the right direction.
Thanks for the points! ~Ray
http://www.laprbass.com/RAY_temp_shindiri.php