Menu
Here is my problem, I currently have a select box that allows users to browse images by scrolling and viewing the image below the box. The select box holds categories, and each time a category is clicked, the items in that category show below. When the user clicks an item, that items image shows below. Now I want the same feature, but this time I want the user to select a category and all the items images in that category show below in a 3 column gallery. I would like to have paging but its not vital, I just cant seem to get it to show a gallery. Please see code below, any help greatly appreciated.
<SCRIPT>
var oFrame = window.frameElement;
// if the template is not called from an IFRAME, redirect to rareposters.net
if(!oFrame)location.replace(“
</SCRIPT>
<CFSILENT>
<cfquery name=”getSubjects” datasource=”p3″>
SELECT Name,Category_ID,
Parent_id
FROM categories
WHERE Parent_id=56 and display=1
ORDER BY Name
</cfquery>
<cfquery name=”getArtists” datasource=”rp1″>
SELECT Name,Category_ID,
Parent_id
FROM categories
WHERE parent_id>18000 and display=1 and catcore_id=8
ORDER BY Name;
</cfquery>
<CFPARAM NAME=”category” DEFAULT=””>
<CFPARAM NAME=”layout” DEFAULT=”V”>
<CFSET tableWidth=”160px”>
<CFIF layout EQ “H”>
<CFSET tableWidth = “100%”>
</CFIF>
<CFSET selected=””>
</CFSILENT>
<CFINCLUDE TEMPLATE=”makeAffiliateStyles.cfm”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
</head>
<!— Check if aff id is present and valid —>
<CFPARAM NAME=”aff” DEFAULT=”0″>
<CFQUERY NAME=”getAffiliates” DATASOURCE=”rp1″>
SELECT *
FROM Affiliates
WHERE (Affiliates.AffCode = #Aff#)
</CFQUERY>
<CFIF getAffiliates.recordCount EQ 0 OR aff EQ 0>
<body RIGHTMARGIN=0 LEFTMARGIN=0 TOPMARGIN=0 STYLE=”text-align: center;”>
This affiliate id is not valid.
</BODY></HTML>
<CFABORT>
</CFIF>
<CFOUTPUT><body RIGHTMARGIN=0 class=”affPage” LEFTMARGIN=0 TOPMARGIN=0
STYLE=”text-align: center;” onLoad=”resizeIt()”>
<FORM NAME=”QVForm” METHOD=”post”>
<TABLE ID=”RP_table” ALIGN=”center” BORDER=”0″ CELLSPACING=”0″ CELLPADDING=”0″ STYLE=”width:#tableWidth#”>
<TR>
<TD VALIGN=”top”>
<TABLE WIDTH=”155″ BORDER=”0″ CELLSPACING=”2″ CELLPADDING=”0″>
<TR><TH ID=”affTitle1″ class=”affTitle”>Buy posters
<BR>from Rareposters.com</TH></TR></CFOUTPUT>
<TR><TH>
<SELECT SIZE=”1″ onchange=”var v = this.options[this.selectedIndex].value; if ( v.length > 0 ) location.href=’index.cfm?category=’ + v + ‘<CFOUTPUT>&layout=#layout#&aff=#aff#</CFOUTPUT>'”><option value=””>> Subjects <</option>
<CFOUTPUT QUERY=”getSubjects”><OPTION VALUE=”#Category_ID#”<CFIF Category_ID EQ category><CFSET selected=name> SELECTED</CFIF>>#Name#</OPTION>
</CFOUTPUT>
</SELECT></TH></TR>
<TR><TH>
<SELECT SIZE=”1″ onchange=”var v = this.options[this.selectedIndex].value; if ( v.length > 0 ) location.href=’index.cfm?category=’ + v + ‘&layout=<CFOUTPUT>#layout#&aff=#aff#</CFOUTPUT>'”><option value=””>> Artists <</option>
<CFOUTPUT QUERY=”getArtists”><OPTION VALUE=”#Category_ID#”<CFIF Category_ID EQ category><CFSET selected=name> SELECTED</CFIF>>#Name#</OPTION>
</CFOUTPUT>
</SELECT></TH></TR>
</TABLE></TD>
<CFIF category NEQ “0” AND category NEQ “”>
<cfquery name=”productdata” datasource=”p3″>
SELECT Products.Product_ID,
Products.Name,
Products.SKU,
Products.Base_price AS Price,
Products.Lg_Image,
ProdCustom.Custom1 AS height,
ProdCustom.Custom2 AS width,
Product_Category.Category_ID,
Categories.Name AS artist
FROM (( Products
LEFT JOIN ProdCustom ON Products.Product_ID=ProdCustom.Product_ID)
INNER JOIN Product_Category ON Products.Product_ID=Product_Category.Product_ID)
INNER JOIN Categories ON Product_Category.Category_ID=Categories.Category_ID
WHERE Products.Lg_Image<>’nomage.gif’
AND Products.Display=1
AND Categories.Category_ID = #Category#
ORDER by base_price
</cfquery>
<CFIF productdata.recordCount GT 0>
<CFSET selectImage = productdata.Lg_Image>
<CFELSE>
</CFIF>
<CFIF layout EQ “V”></TR>
<TR></CFIF>
<TD VALIGN=”top”><TABLE WIDTH=”155″ BORDER=”0″ CELLSPACING=”2″ CELLPADDING=”0″><TR>
<CFOUTPUT><TH ID=”affTitle2″ class=”affTitle”>Quick Viewer</TH></CFOUTPUT>
<SCRIPT>
ProductIndex = new Object();
ProductSKU = new Object();
ProductName = new Object();
ProductHeight = new Object();
ProductWidth = new Object();
<CFOUTPUT QUERY=”productdata”><CFSET prodiId = jsStringFormat(Product_id)>
ProductIndex[“#prodiId#”] = “#jsStringFormat(Lg_Image)#”;
ProductSKU[“#prodiId#”] = “#jsStringFormat(SKU)#”;
ProductName[“#prodiId#”] = “#jsStringFormat(name)#”;
ProductHeight[“#prodiId#”] = “#jsStringFormat(height)#”;
ProductWidth[“#prodiId#”] = “#jsStringFormat(width)#”;
</CFOUTPUT>
</SCRIPT>
<CFOUTPUT><INPUT TYPE=”hidden” NAME=”category” VALUE=”#productdata.Artist#”>
<INPUT TYPE=”hidden” NAME=”categoryId” VALUE=”#category#”>
#productdata.Artist#</CFOUTPUT>
<BR><SELECT NAME=”viewerSelect” SIZE=”5″ STYLE=”width : 150px” ID=”itemSelector”
onChange=”view(this)”>
<CFOUTPUT QUERY=”productdata”>
<OPTION VALUE=”#Product_id#”<CFIF productdata.CurrentRow EQ 1> SELECTED</CFIF>>#Name#</OPTION></CFOUTPUT>
</SELECT>
</TH>
</TR></TABLE></TD>
<CFIF layout EQ “V”></TR>
<TR valign=”top”></CFIF>
<th VALIGN=”top”
STYLE=”cursor:hand”
onclick=”productOpen(itemSelector.options[itemSelector.selectedIndex].value)”><CFOUTPUT><img src=”
</CFIF>
</TR>
<TR><TD ID=”SKUDiv” CLASS=”affSKU”> </TD></TR>
<TR><TD ID=”nameDiv” CLASS=”affName”> </TD></TR>
<TR><TD ID=”sizeDiv” CLASS=”affSizes”> </TD></TR>
</TABLE>
</FORM>
<SCRIPT>
var frameStyle = oFrame.style;
var currentHeight = 0;
var itemSelector;
var layout = “<CFOUTPUT>#layout#</CFOUTPUT>”;
function resizeIt()
{
var t = document.getElementById(“RP_table”);
currentHeight = parseInt(document.body.scrollHeight);
document.body.style.border=”0px none”;
frameStyle.width=t.style.width;
frameStyle.height=”” + currentHeight + “px”;
itemSelector = document.getElementById(“itemSelector”);
if(itemSelector) itemSelector.focus();
}
function view(sel)
{
var thumbnail = document.getElementById(‘thumbnail’);
if(document.all)
{
thumbnail.style.filter=”progid?XImageTransform.Microsoft.Iris(irisStyle=’square’, motion=’out’)”;
thumbnail.filters.item(0).Apply();
}
thumbnail.src =
‘
+ ProductIndex[itemSelector.options[itemSelector.selectedIndex].value];
if(document.all)
{
thumbnail.filters.item(0).Play();
}
}
function maxSize()
{
displayDetails()
if(oFrame)
{
currentHeight = Math.max(parseInt(document.body.scrollHeight),currentHeight);
frameStyle.height=”” + currentHeight + “px”;
oFrame.scrolling=”no”;
}
}
function productOpen(p)
{
<CFOUTPUT>productWin = open(“../index.cfm?fuseaction=affiliates.display&product_id=”+p+”&aff=”+#aff#,”prodWin”, “directories=no,height=650,width=600,scrollbars=yes,resizable=yes”)</CFOUTPUT>
}
function chImage ()
{
var sel = document.getElementById(‘itemSelector’);
document.getElementById(‘thumbnail’).src
= ‘
}
function displayDetails()
{
var sel = document.getElementById(‘itemSelector’);
var opt = sel.options[sel.selectedIndex].value;
var div = document.getElementById(“SKUDiv”);
div.innerText = div.textContent = ProductSKU[opt];
div = document.getElementById(“nameDiv”);
div.innerText = div.textContent = ProductName[opt];
div = document.getElementById(“sizeDiv”);
div.innerText = “”;
if (ProductHeight[opt] != “”)div.innerText += “Height: ” + ProductHeight[opt] + ‘” ‘;
if (ProductWidth[opt] != “”)div.innerText += “Width: ” + ProductWidth[opt] + ‘”‘;
div.textContent = div.innerText; // This is for Mozilla
}
</SCRIPT>
</body>
</html>