[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Coldfusion image gallery from recordset

Posted on 2008-11-04
9
Medium Priority
?
613 Views
Last Modified: 2013-12-24
im not sure if this question has been asked before but i have searched the net for about 8 hours and cant seem to find anything that will work for my problem.

Im trying to create an image gallery that the image automatically changes to the next image from the recordset.  The image name e.g. image.jpg is stored in a field in the database called IMAGE and the path will be hardcoded into the script.

what i want it to do is when i go into the more information of a product that the gallery will automaticall load with the first image and then then after 1 second change to the next image in the recordset and when the scroller has gone through the recordset then go back to the first record and start again.

hopefully this can be done!

thanks
0
Comment
Question by:admoortown
  • 5
  • 4
9 Comments
 
LVL 27

Expert Comment

by:azadisaryev
ID: 22874449
this is really a javascript (or other CLIENT-side script) question, not CF...

have a look at jQuery Cycle plug-in (http://www.malsup.com/jquery/cycle/). or google for "javascript slideshow" to find other js solutions.

i have implemented jQuery Cycle + CF images recordset numerous times - it's extremely easy. all you basically need is a <div> with <img> inside of it on your page
jQuery does the rest... and it is highly customizable (transitional effects, delay times, etc, etc)

more info and detailed instructions on the page linked above.

hth
0
 

Author Comment

by:admoortown
ID: 22884087
how do i integrate the div tag or the img tag to the javascript function?
0
 
LVL 27

Accepted Solution

by:
azadisaryev earned 2000 total points
ID: 22884247
you don't. jQuery does it for you.
all YOU need is:
<head>
<script src="path/to/your/jquery.js"></script>
<script src="path/to/your/jquery.cycle.js"></script>
<script>
$(document).ready(function(){
  $("#myslideshow").cycle('fade');
});
</script>
</head>
<body>
<div id="myslideshow">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
...
<img src="imageN.jpg" />
</div>
</body>

add some css styling and you are done (see simple Cycle plug-in examples link below for css example).

download jQuery from: http://jquery.com/
download Cycle plug-in from: http://www.malsup.com/jquery/cycle/download.html
simple Cycle plug-in use examples: http://www.malsup.com/jquery/cycle/begin.html
more advanced examples: http://www.malsup.com/jquery/cycle/int.html

there you go.

hth
0
Get quick recovery of individual SharePoint items

Free tool – Veeam Explorer for Microsoft SharePoint, enables fast, easy restores of SharePoint sites, documents, libraries and lists — all with no agents to manage and no additional licenses to buy.

 

Author Comment

by:admoortown
ID: 22884515
hth

Thanks i got it to work a treat thanks

i was also wondering if you knew much about cfwindow tags as im trying to display this product in a cfwindow tag and it was working with just one window but when i add the piece of javascript it is throwing up an error message and just displays all the images instead of using the jQuery

The error message is "Error processing Javascript in markup for element Product_body"  now i have searched both the list page and the detail page and cant find anything relating to Product_body

thanks
AD
0
 

Author Comment

by:admoortown
ID: 22884571
i have also added the javascrip source and the script to the list page and the error message has went away but the image gallery from jQuery wont work its as if they are not accessing the script
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 22884617
please post the colde that opens the cfwindow and also the code inside the cfwindow (or the page loded inside cfwindow).

it's a bit trickier to make jQuery (or any other js) work insode a cfwindow, but possible. it all depends on your code, so please post it.
0
 

Author Comment

by:admoortown
ID: 22884727
This is my code that calls the cfwindow tag

<script src="js/jquery-1.2.6.min.js"></script>
<script src="js/jquery.cycle.all.js"></script>
<script>
$(document).ready(function(){
  $("#myslideshow").cycle('fade');
});
</script>
<cfajaximport tags="cfwindow">
<script type="text/javascript">
    function createRecentWindow(ID) {
        <cfoutput>
        ColdFusion.Window.create('Vehicle', 'Vehicle Details','vehicles-detail.cfm?ID='+ID,
{height:500,width:510,modal:true,closable:false,draggable:true,resizable:true,center:true})
        </cfoutput>
            
    }
   
</script>


And attached is the code for my detail page where  the jQuery is running, now if i browse to the page manually the jQuery and the page work and look fine its just not working on the cfwindow tag

Thanks
AD
<cfparam name="URL.ID" default="1">
<cfquery name="RS1" datasource="clivehamilton">
SELECT     dbo.VEHICLES.ID AS VEHICLEID, dbo.MAKES.MAKE, dbo.VEHICLES.MODEL, dbo.VEHICLES.YEAR, dbo.VEHICLES.FUEL, dbo.VEHICLES.MILEAGE, 
                      dbo.VEHICLES.PRICE, dbo.VEHICLES.SUMMARY, dbo.VEHICLES.DESCRIPTION
FROM         dbo.VEHICLES INNER JOIN
                      dbo.MAKES ON dbo.VEHICLES.MAKE = dbo.MAKES.ID
WHERE dbo.VEHICLES.ID = <cfqueryparam value="#URL.ID#" cfsqltype="cf_sql_numeric"> 
</cfquery>
<cfquery name="RS2" datasource="clivehamilton">
SELECT *
FROM dbo.VEHICLE_IMAGES
WHERE REL_VEHICLE_ID = <cfqueryparam value="#URL.ID#" cfsqltype="cf_sql_numeric"> 
</cfquery>
<!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="CSS/styles.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.2.6.min.js"></script>
<script src="js/jquery.cycle.all.js"></script>
<script>
$(document).ready(function(){
  $("#myslideshow").cycle('fade');
});
</script>
 
</head>
 
<body>
<table width="480" border="0" cellpadding="0" cellspacing="0" background="images/home/clive-hamilton-motors-showcase-side.jpg" class="MainText">
  <tr>
    <td colspan="3"><img src="images/home/clive-hamilton-motors-showcase-top.jpg" width="480" height="5" /></td>
  </tr>
  <tr>
    <td width="15">&nbsp;</td>
    <td width="450">&nbsp;</td>
    <td width="15">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3"><table width="470" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="2" class="DetailHeader">Vehicle Details</td>
        <td width="158">&nbsp;</td>
      </tr>
      <tr>
        <td width="153">&nbsp;</td>
        <td colspan="2" rowspan="16" valign="top"><div align="center" id="myslideshow"><cfoutput query="RS2"><img src="images/vehicles/#RS2.IMAGE#" width="250" height="186" /></cfoutput></div></td>
      </tr>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;<span class="DetailText">Make:</span>&nbsp;&nbsp;&nbsp;<cfoutput>#RS1.MAKE#</cfoutput></td>
        </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;<span class="DetailText">Model:</span>&nbsp;&nbsp;&nbsp;<cfoutput>#RS1.MODEL#</cfoutput></td>
        </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;<span class="DetailText">Year:</span>&nbsp;&nbsp;&nbsp;<cfoutput>#RS1.YEAR#</cfoutput></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;<span class="DetailText">Fuel:</span>&nbsp;&nbsp;&nbsp;<cfoutput>#RS1.FUEL#</cfoutput></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;<span class="DetailText">Mileage:</span>&nbsp;&nbsp;&nbsp;<cfoutput>#RS1.MILEAGE#</cfoutput></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;&nbsp;&nbsp;<span class="DetailText">Price(&pound;):</span>&nbsp;&nbsp;&nbsp;<cfoutput>#RS1.PRICE#</cfoutput></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
 
    </table></td>
  </tr>
  
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><cfoutput>#RS1.SUMMARY#</cfoutput></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><cfoutput>#RS1.DESCRIPTION#</cfoutput></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><div align="right" class="ShowcaseText"><a href="javascript:window.location.reload();">Close Window</a></div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3"><img src="images/home/clive-hamilton-motors-showcase-footer.jpg" width="480" height="5" /></td>
  </tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 22885035
first, a few minor issues that i spotted in your code:
1) you do not need those <cfoutput> in your createRecentWindow js function
2) when you use cf ajax features, your in-line js function declarations must be in the format: functionname = function() , NOT function functionname()
3) cfwindow just creates a DIV element in your page, so no need to load jquery or cycle plug-in in the page displayed inside cfwindow - you already have them initialized in the calling page.

now, for the cfwindow + jQuery:
1) remove the

<script>
$(document).ready(function(){
  $("#myslideshow").cycle('fade');
});
</script>

block - your #myslideshow div is in a cfwindow, which is not shown on page load, so no need to init the slideshow on calling page's load

2) add the following js function to the calling page:
runSlideshow = function(){
      $("#myslideshow").cycle('fade');
};

you can add it in the same <script> block your createRecentWindow function is in, no need to make a separate <script> block for it.

3) remove all js code you currently have in your vehicles-detail.cfm page.

4) add the following code just before the closing </body> tag in your vehicles-detail.cfm page:
<cfset ajaxonload("runSlideshow")>

voila! a slideshow!
0
 

Author Comment

by:admoortown
ID: 22885805
HTH thats works a TREAT!!!!

i would never have gotten that to work myself


Thanks alot

AD
0

Featured Post

Get quick recovery of individual SharePoint items

Free tool – Veeam Explorer for Microsoft SharePoint, enables fast, easy restores of SharePoint sites, documents, libraries and lists — all with no agents to manage and no additional licenses to buy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question