Sliding Billboard Support Product Page
This topic is locked
This topic was archived
Sliding billboard and repeat region server behaviour - RESOLVED
Asked 01 Dec 2009 11:34:08
1
has this question
01 Dec 2009 11:34:08 Gabrielle H posted:
Hi everyone,I'm using the Sliding Billboard together with the Lightbox and have set it up so that the information gets inserted dynamically from a database. I inserted a repeat region around the following code block:
<ul id="sec_Section_1" title="Suits">
<li onclick="openDMXzoneLightbox('../images/corp/suits_men/<?php echo $row_rstSuits['suitImage']; ?>', {title:'Casual Suit', width:650, height:776, preset:'minimalistic'}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../images/corp/suits_men/<?php echo $row_rstSuits['suitImage']; ?>', {title:'Casual Suit', width:650, height:776, preset:'minimalistic'}, window);return document.MM_returnValue">
[img]../images/corp/suits_men/<?php echo $row_rstSuits['suitImage']; ?>" border="0" alt="" />
</a>
[/*]
<li title="<?php echo $row_rstSuits['suitTitle']; ?>">
[h4]<?php echo $row_rstSuits['suitTitle']; ?>[/h4]
<p>Style Number: <?php echo $row_rstSuits['suitSKU']; ?></p>
<p>Description: <?php echo $row_rstSuits['suitDesc']; ?></p>
<p>Price: $<?php echo $row_rstSuits['suitPrice']; ?></p>
<p>Colours: <?php echo $row_rstSuits['suitColours']; ?></p>
<p>Sizes: <?php echo $row_rstSuits['suitSizes']; ?></p>
[/*][/list]
When I test though, each slide is being stacked one after another in the browser window instead of one at a time where you're supposed to access each image and text slide via the navigation buttons.
I'm not sure if this is because I've applied the repeat region server behaviour to the wrong section. I was following the instructions at the following URL:
www.dmxzone.com/go?16610
This was for another extension but I was trying to adapt it.
The full code is below and any help/pointers would be appreciated.
<?php require_once('../Connections/localhost.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($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 != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_localhost, $localhost);
$query_rstSuits = "SELECT suitTitle, suitSKU, suitDesc, suitPrice, suitColours, suitSizes, suitImage FROM suits";
$rstSuits = mysql_query($query_rstSuits, $localhost) or die(mysql_error());
$row_rstSuits = mysql_fetch_assoc($rstSuits);
$totalRows_rstSuits = mysql_num_rows($rstSuits);
?>
<!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>
<!--[if IE]><script language="javascript" type="text/javascript" src="../dmx/lib/excanvas-compressed.js"></script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="../ScriptLibrary/jquery-latest.pack.js"></script>
<script language="javascript" type="text/javascript" src="../dmx/dmx.core.js" id="dmxCoreJS"></script>
<script language="javascript" type="text/javascript" src="../dmx/widgets/Lightbox/dmx.lightbox.js"></script>
<script type="text/javascript">
<!--
function openDMXzoneLightbox(arg, options, context) {//v1.2
context = context || window, options = options || {};
if (context.DMX && context.DMX.Lightbox) {
context.DMX.Lightbox.open(options.plugin || "", arg, options);
document.MM_returnValue = false;
}
}
//-->
</script>
<script src="../ScriptLibrary/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="../ScriptLibrary/jquery.mousewheel.pack.js" type="text/javascript"></script>
<script src="../ScriptLibrary/dmxSlidingBillboard.js" type="text/javascript"></script>
<link href="../Styles/dmxSlidingBillboard.css" rel="stylesheet" type="text/css" />
<link href="../Styles/dmxSlidingBillboard/dark_blue/dark_blue.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php do { ?>
<div class="dmxBillboard dark_blue" id="Suits" style="width:750px;height:500px;">
<div class="dmxBillboardHeader">
[h3]Men's Suits[/h3]
<div class="dmxBillboardSectionNav">
<a href="#sec_Section_1">Suits</a>
<div style="clear:both"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="dmxBillboardView layout-left">
<ul id="sec_Section_1" title="Suits">
<li onclick="openDMXzoneLightbox('../images/corp/suits_men/<?php echo $row_rstSuits['suitImage']; ?>', {title:'Casual Suit', width:650, height:776, preset:'minimalistic'}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../images/corp/suits_men/<?php echo $row_rstSuits['suitImage']; ?>', {title:'Casual Suit', width:650, height:776, preset:'minimalistic'}, window);return document.MM_returnValue">
[img]../images/corp/suits_men/<?php echo $row_rstSuits['suitImage']; ?>" border="0" alt="" />
</a>
[/*]
<li title="<?php echo $row_rstSuits['suitTitle']; ?>">
[h4]<?php echo $row_rstSuits['suitTitle']; ?>[/h4]
<p>Style Number: <?php echo $row_rstSuits['suitSKU']; ?></p>
<p>Description: <?php echo $row_rstSuits['suitDesc']; ?></p>
<p>Price: $<?php echo $row_rstSuits['suitPrice']; ?></p>
<p>Colours: <?php echo $row_rstSuits['suitColours']; ?></p>
<p>Sizes: <?php echo $row_rstSuits['suitSizes']; ?></p>
[/*][/list]
</div>
<div class="dmxBillboardFooter">
<div class="dmxBillboardPageNav"></div>
<div style="clear:both;"></div>
</div>
<div class="dmxBillboardLeftNav middle"></div>
<div class="dmxBillboardRightNav middle"></div>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#Suits").dmxSlidingBillboard(
{
width: '750',
height: 500,
columns: 2,
rows: 1,
scrollInterval: 5000,
scrollDuration: 'normal',
navPos: 'top',
secPagingPos: 'bottom',
design: 'dark_blue',
layoutStyle: 'left',
scrollEasing: 'swing',
sideNavPos: 'middle',
horizontal: true,
keyboard: true,
mousewheel: true,
autoPlay: true,
imageMaxWidth: '100%',
imageMaxHeight: '100%',
showSideNavOnMouseOver: false,
imageScaleUp: false,
startSection: 1,
startIndex: 1,
autoNextSection: true
}
);
}
);
// ]]>
</script>
<?php } while ($row_rstSuits = mysql_fetch_assoc($rstSuits)); ?>
</body>
</html>
<?php
mysql_free_result($rstSuits);
?>
Edited by - Gabrielle H on 01 Dec 2009 11:37:41
Edited by - Gabrielle H on 01 Dec 2009 14:25:20
Replies
Replied 01 Dec 2009 17:47:03
01 Dec 2009 17:47:03 Patrick Julicher replied:
Hi Gabrielle,
Are you using one or more sections? If I see correct you use a structure with one image page and one text page nextto each other? If this is the case, the repeat region should start after this code:
and end before this code:
Otherwise you repeat the complete list and now you only repeat 2 listitems at a time within the list.
Kind regards, Patrick
Are you using one or more sections? If I see correct you use a structure with one image page and one text page nextto each other? If this is the case, the repeat region should start after this code:
<ul id="sec_Section_1" title="Suits">
and end before this code:
</ul>
Otherwise you repeat the complete list and now you only repeat 2 listitems at a time within the list.
Kind regards, Patrick
Replied 01 Dec 2009 17:53:15
01 Dec 2009 17:53:15 Patrick Julicher replied:
Hi Gabrielle,
One more thing. If you are using multiple sections, you need to create a recordset for each section and repeat each section seperatly.
Kind regards, Patrick
One more thing. If you are using multiple sections, you need to create a recordset for each section and repeat each section seperatly.
Kind regards, Patrick
Replied 01 Dec 2009 18:25:09
01 Dec 2009 18:25:09 Gabrielle H replied:
Thanks for the reply Patrick,
Yes I'm using sections (see below for the current full code) and I'm using one image page and one text page next to each other as you mentioned. I understand that I need to apply the repeat region server behaviour to the ul within each section. To test again I applied it to the following piece of code in the first section:
I would assume that the server behaviour wraps the code around the ul tags but for some reason it seems to be applying the code to the entire code block for the billboard. For example it adds the following bit of code right after the body tag:
and then it adds the following code right before the ending body tag:
Could this be a bug in Dreamweaver as I'm still experiencing the same problems and I wondered if it had to do with the code being inserted incorrectly by the program.
Also by the way, the following code is not in my original code but was placed there by the code on your website when I created this thread:
[/*][/list]
In my code, there is a closing ul tag.
Yes I'm using sections (see below for the current full code) and I'm using one image page and one text page next to each other as you mentioned. I understand that I need to apply the repeat region server behaviour to the ul within each section. To test again I applied it to the following piece of code in the first section:
<ul id="sec_1" title="Suits">
<li onclick="openDMXzoneLightbox('../images/corp/corporate/suits/<?php echo $row_rstSuits['suitImage']; ?>', {title:'Casual Suit', width:650, height:776}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../images/corp/corporate/suits/<?php echo $row_rstSuits['suitImage']; ?>', {title:'Casual Suit', width:650, height:776}, window);return document.MM_returnValue">
[img]../images/corp/corporate/suits/<?php echo $row_rstSuits['suitImage']; ?>" border="0" alt="" />
</a>
[/*]
<li title="<?php echo $row_rstSuits['suitTitle']; ?>">
[h4]<?php echo $row_rstSuits['suitTitle']; ?>[/h4]
<p>Style Number: <?php echo $row_rstSuits['suitSKU']; ?></p>
[/*][/list]
I would assume that the server behaviour wraps the code around the ul tags but for some reason it seems to be applying the code to the entire code block for the billboard. For example it adds the following bit of code right after the body tag:
<?php do { ?and then it adds the following code right before the ending body tag:
<?php } while ($row_rstSuits = mysql_fetch_assoc($rstSuits)); ?>
Could this be a bug in Dreamweaver as I'm still experiencing the same problems and I wondered if it had to do with the code being inserted incorrectly by the program.
Also by the way, the following code is not in my original code but was placed there by the code on your website when I created this thread:
[/*][/list]
In my code, there is a closing ul tag.
<?php require_once('../Connections/localhost.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($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 != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_localhost, $localhost);
$query_rstSuits = "SELECT suitTitle, suitSKU, suitDesc, suitPrice, suitColours, suitSizes, suitImage FROM suits";
$rstSuits = mysql_query($query_rstSuits, $localhost) or die(mysql_error());
$row_rstSuits = mysql_fetch_assoc($rstSuits);
$totalRows_rstSuits = mysql_num_rows($rstSuits);
?>
<!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>
<!--[if IE]><script language="javascript" type="text/javascript" src="../dmx/lib/excanvas-compressed.js"></script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="../ScriptLibrary/jquery-latest.pack.js"></script>
<script language="javascript" type="text/javascript" src="../dmx/dmx.core.js" id="dmxCoreJS"></script>
<script language="javascript" type="text/javascript" src="../dmx/widgets/Lightbox/dmx.lightbox.js"></script>
<script type="text/javascript">
<!--
function openDMXzoneLightbox(arg, options, context) {//v1.2
context = context || window, options = options || {};
if (context.DMX && context.DMX.Lightbox) {
context.DMX.Lightbox.open(options.plugin || "", arg, options);
document.MM_returnValue = false;
}
}
//-->
</script>
<script src="../ScriptLibrary/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="../ScriptLibrary/jquery.mousewheel.pack.js" type="text/javascript"></script>
<script src="../ScriptLibrary/dmxSlidingBillboard.js" type="text/javascript"></script>
<link href="../Styles/dmxSlidingBillboard.css" rel="stylesheet" type="text/css" />
<link href="../Styles/dmxSlidingBillboard/dark_blue/dark_blue.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php do { ?>
<div class="dmxBillboard dark_blue" id="Corporatewear" style="width:656px;height:396px;">
<div class="dmxBillboardHeader">
[h3]Corporate Wear[/h3]
<div class="dmxBillboardSectionNav">
<a href="#sec_1">Suits</a>
<a href="#sec_2">Shirts/Blouses</a>
<a href="#sec_3">Jackets</a>
<a href="#sec_4">Skirts</a>
<a href="#sec_5">Knitwear</a>
<a href="#sec_6">Accessories</a>
<div style="clear:both"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="dmxBillboardView layout-left">
<ul id="sec_1" title="Suits">
<li onclick="openDMXzoneLightbox('../images/corp/corporate/suits/<?php echo $row_rstSuits['suitImage']; ?>', {title:'Casual Suit', width:650, height:776}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../images/corp/corporate/suits/<?php echo $row_rstSuits['suitImage']; ?>', {title:'Casual Suit', width:650, height:776}, window);return document.MM_returnValue">
[img]../images/corp/corporate/suits/<?php echo $row_rstSuits['suitImage']; ?>" border="0" alt="" />
</a>
[/*]
<li title="<?php echo $row_rstSuits['suitTitle']; ?>">
[h4]<?php echo $row_rstSuits['suitTitle']; ?>[/h4]
<p>Style Number: <?php echo $row_rstSuits['suitSKU']; ?></p>
[/*][/list]
<ul id="sec_2" title="Shirts/Blouses">
<li onclick="openDMXzoneLightbox('../images/corp/corporate/shirts_blouses/cc2100_4100Large.jpg', {width:650, height:776}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../images/corp/corporate/shirts_blouses/cc2100_4100Large.jpg', {width:650, height:776}, window);return document.MM_returnValue">
[img]../images/corp/corporate/shirts_blouses/cc2100_4100Large.jpg" border="0" alt="" />
</a>
[/*]
<li title="some text">
[h4]some text[/h4]
[/*][/list]
<ul id="sec_3" title="Jackets">
<li onclick="openDMXzoneLightbox('../images/corp/corporate/shirts_blouses/cc2100_4100Large.jpg', {width:650, height:776}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../images/corp/corporate/shirts_blouses/cc2100_4100Large.jpg', {width:650, height:776}, window);return document.MM_returnValue">
[img]../images/corp/corporate/jackets/kcJacket.jpg" border="0" alt="" />
</a>
[/*]
<li title="some text">
[h4]some text[/h4]
[/*][/list]
<ul id="sec_4" title="Skirts">
<li onclick="openDMXzoneLightbox('../images/corp/corporate/skirts/kcSkirt.jpg', {width:650, height:776}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../images/corp/corporate/skirts/kcSkirt.jpg', {width:650, height:776}, window);return document.MM_returnValue">
[img]../images/corp/corporate/skirts/kcSkirt.jpg" border="0" alt="" />
</a>
[/*]
<li title="some text">
[h4]some text[/h4]
[/*][/list]
<ul id="sec_5" title="Knitwear">
<li onclick="openDMXzoneLightbox('../images/corp/corporate/knitwear/MF8003_8002Large.jpg', {width:650, height:776}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../images/corp/corporate/knitwear/MF8003_8002Large.jpg', {width:650, height:776}, window);return document.MM_returnValue">
[img]../images/corp/corporate/knitwear/MF8003_8002Large.jpg" border="0" alt="" />
</a>
[/*]
<li title="some text">
[h4]some text[/h4]
[/*][/list]
<ul id="sec_6" title="Accessories">
<li onclick="openDMXzoneLightbox('../images/corp/corporate/accessories/kcScarves.jpg', {width:650, height:776}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../images/corp/corporate/accessories/kcScarves.jpg', {width:650, height:776}, window);return document.MM_returnValue">
[img]../images/corp/corporate/accessories/kcScarves.jpg" border="0" alt="" />
</a>
[/*]
<li title="some text">
[h4]some text[/h4]
[/*][/list]
</div>
<div class="dmxBillboardFooter">
<div class="dmxBillboardPageNav"></div>
<div style="clear:both;"></div>
</div>
<div class="dmxBillboardLeftNav middle"></div>
<div class="dmxBillboardRightNav middle"></div>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#Corporatewear").dmxSlidingBillboard(
{
width: '656',
height: 396,
columns: 2,
rows: 1,
scrollInterval: 5000,
scrollDuration: 'normal',
navPos: 'top',
secPagingPos: 'bottom',
design: 'dark_blue',
layoutStyle: 'left',
scrollEasing: 'swing',
sideNavPos: 'middle',
horizontal: true,
keyboard: true,
mousewheel: true,
autoPlay: true,
imageMaxWidth: '100%',
imageMaxHeight: '100%',
showSideNavOnMouseOver: false,
imageScaleUp: false,
startSection: 1,
startIndex: 1,
autoNextSection: true
}
);
}
);
// ]]>
</script>
<?php } while ($row_rstSuits = mysql_fetch_assoc($rstSuits)); ?>
</body>
</html>
<?php
mysql_free_result($rstSuits);
?>
Edited by - Gabrielle H on 01 Dec 2009 18:26:56
Edited by - Gabrielle H on 01 Dec 2009 18:30:42
Edited by - Gabrielle H on 01 Dec 2009 18:31:15
Replied 01 Dec 2009 21:35:20
01 Dec 2009 21:35:20 Patrick Julicher replied:
Hi Gabrielle,
Let me break it down:
Let me break it down:
- The insertion of the repeat region is something I've experienced myself. This is because of the setup of the Billboard. It was not originally designed for database content. You need to move the start and ending code for the repeat region to the correct position by hand.
- The code for the repeat region does not go around the open and closing UL-tag but between them. The start of the repeat region code goes after the open ul-tag and before the first li-tag. The end of the repeat region code goes after the second closing li-tag and before the closing ul-tag.
So no bug, just some more advanced knowledge of html and php together with the way the Billboard was created.
If you cannot get it working, sent the complete code with 1 repeat region set for the first sertion to
Kind regards, Patrick
Replied 02 Dec 2009 13:19:06
02 Dec 2009 13:19:06 Gabrielle H replied:
Thanks Patrick - I have it working now.
Replied 02 Dec 2009 16:48:15
02 Dec 2009 16:48:15 Patrick Julicher replied:
Hi Gabrielle,
Thanks for your feedback and good luck with your website. I will now close this topic.
Kind regards, Patrick
Thanks for your feedback and good luck with your website. I will now close this topic.
Kind regards, Patrick