implementing "next image" functionality

[fiuPikeOY]

Hello,

I've created a website using coldfusion where an image is selected from a list of thumbnails and it pops up in a larger popUp. How can I add a next / previous button on that pop up that will bring up the next image. I was thinking:
gallery.(pictureID+1), but the ID column is not structured (1,2,3,4,5,6..) more like (1, 15, 25, 28....)

What can I do?

Thanks in advance

 

[cfbigB]

here is some code that might help...

<cfparam name="url.id" default="1">
<cfparam name="next" default="">
<cfparam name="previous" default="">
<cfscript>
	idList = "1,25,28,36";
	if( url.id EQ listFirst(idlist) ){
		previous = 0;
	}	
	else{
		previous = listgetat(idlist, listfind(idlist, url.id)-1);
	}
	if( url.id EQ listlast(idlist) ){
		next = 0;
	}
	else{
		next = listgetat(idlist, listfind(idlist, url.id)+1);
	}
</cfscript>

<cfoutput>
<cfif url.id NEQ listfirst(idlist)><a href="index.cfm?id=#variables.previous#">previous</a></cfif>
-
<cfif url.id NEQ listLast(idList)><a href="index.cfm?id=#variables.next#">next</a></cfif>
</cfoutput>

 

[TruthInSatire]

good solution that would probably work but it's a lot of work. you can do it easier accessing the record directly (queryName.fileName[picToshow])

here is an example. code i wrote about 6 months ago.

<cfquery name = "qGetPics" datasource="dsn">
SELECT filename, title
FROM myTable
ORDER BY id
</cfquery>

<cfif isdefined("url.pic")>
<cfset showPic = url.pic>
<cfelse>
<cfset showPic = 1>
</cfif>
<!--- make back button if not on first image --->
<cfif showPic neq 1>
<a href="pics.cfm?pic=<cfoutput>#evaluate(showPic - 1)#</cfoutput>"><img src="back2.jpg" alt="Back 1 Image" width="92" height="40" border="0"></a>
<!--- show image that doesn't say back or no image at all --->
<cfelse>
<img src="back.jpg" width="92" height="40">
</cfif>

<!--- this is a drop down to jump to the image you want (my images had a descriptive title in the DB as well) --->
<select name = "imageName" onchange = "window.location = 'pics.cfm?pic='+this.value;">
<cfoutput query="dsn">
<option value = "#id#" <cfif showPic eq id>Selected</cfif>>#title#</option>
</cfoutput>
</select>

<!--- show next button --->
<cfif showPic neq qGetpics.recordCount>
<a href="pics.cfm?pic=<cfoutput>#evaluate(showPic + 1)#</cfoutput>"><img src="next2.jpg" alt="Forward 1 Image" width="92" height="40" border="0"></a>
<!--- or a non linked button if it is the last image--->
<cfelse>
<img src="next.jpg" width="92" height="40">
</cfif>

<!--- to show the image use something like this --->
<img src="pics/<cfoutput>#qGetPics.fileName[showPic]#</cfoutput>" width="500" height="500">

A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
-Douglas Adams (1952-2001)

 

[fiuPikeOY]

Sorry it took me so long to get back to this. Now is when I had the time. The first approach seems to be a bit quicker to implement given that it's onlyh 18 paintings. However it's giving me problems

this is the link

http://www.artbycernuda.com

click on gallery and notice that the next button only works the first time, and it always goes to the first painting. I know I must be doing something wrong that can be fixed.

Any ideas?

Thanks in advance

 

[fiuPikeOY]

Here's the code

<cfparam name="url.id" default="1">
<cfparam name="next" default="">
<cfparam name="previous" default="">
<cfscript>
idList = "1,2,3,4,5,6,7,8,10,11,54,56,57,58,59,60,61,78";
if( url.id EQ listFirst(idlist) ){
previous = 0;
}
else{
previous = listgetat(idlist, listfind(idlist, url.id)-1);
}
if( url.id EQ listlast(idlist) ){
next = 0;
}
else{
next = listgetat(idlist, listfind(idlist, url.id)+1);
}
</cfscript>

....
...
...
...
...
<cfif url.id NEQ listfirst(idlist)><a href="lg_imgArcPopUp.cfm?id=#variables.previous#">previous</a></cfif>
-
<cfif url.id NEQ listLast(idList)><a href="lg_imgArcPopUp.cfm?id=#variables.next#">next</a></cfif>
</cfoutput>

 

[fiuPikeOY]

sorry guys...I just had to change the id to imgID. It worked great.

Thanks again

 

[ksea]

bombboy (Programmer) Dec 10, 2004
good solution that would probably work but it's a lot of work. you can do it easier accessing the record directly (queryName.fileName[picToshow])

here is an example. code i wrote about 6 months ago.

<cfquery name = "qGetPics" datasource="dsn">
SELECT filename, title
FROM myTable
ORDER BY id
</cfquery>

<cfif isdefined("url.pic")>
<cfset showPic = url.pic>
<cfelse>
<cfset showPic = 1>
</cfif>
<!--- make back button if not on first image --->
<cfif showPic neq 1>
<a href="pics.cfm?pic=<cfoutput>#evaluate(showPic - 1)#</cfoutput>"><img src="back2.jpg" alt="Back 1 Image" width="92" height="40" border="0"></a>
<!--- show image that doesn't say back or no image at all --->
<cfelse>
<img src="back.jpg" width="92" height="40">
</cfif>

<!--- this is a drop down to jump to the image you want (my images had a descriptive title in the DB as well) --->
<select name = "imageName" onchange = "window.location = 'pics.cfm?pic='+this.value;">
<cfoutput query="dsn">
<option value = "#id#" <cfif showPic eq id>Selected</cfif>>#title#</option>
</cfoutput>
</select>

<!--- show next button --->
<cfif showPic neq qGetpics.recordCount>
<a href="pics.cfm?pic=<cfoutput>#evaluate(showPic + 1)#</cfoutput>"><img src="next2.jpg" alt="Forward 1 Image" width="92" height="40" border="0"></a>
<!--- or a non linked button if it is the last image--->
<cfelse>
<img src="next.jpg" width="92" height="40">
</cfif>

<!--- to show the image use something like this --->
<img src="pics/<cfoutput>#qGetPics.fileName[showPic]#</cfoutput>" width="500" height="500">

This works fairly well until you get to a record where showPic is not EQ to picID

I've been playing around but with this but have troubles getting the image to list when there are gaps in the picID column. 1,2,4,5,6,8 etc... Picture 4 shows up oddly as picture 3 even though there's no photo...

 

[TruthInSatire]

I don't see how, it doesn't use the pic id it uses the place in the query so despite the ID it shows the next query place.

query.image[1] query.image[2] query.image[3] the id's could be 1,4,99 it doesn't matter. the parts in bold make that happen. here is the page i wrote that uses this script.

http://www.travmak.com/heath/pics.cfm

<cfquery name = "qGetPics" datasource="dsn">
    SELECT            filename, title
    FROM        myTable
    ORDER BY    id
</cfquery>
[b]
<cfif isdefined("url.pic")>
    <cfset showPic = url.pic>
<cfelse>
    <cfset showPic = 1>
</cfif>
[/b]
<!--- make back button if not on first image --->
<cfif showPic neq 1>
<a href="pics.cfm?[b]pic=<cfoutput>#evaluate(showPic - 1)#</cfoutput>[/b]"><img src="back2.jpg" alt="Back 1 Image" width="92" height="40" border="0"></a>    
<!--- show image that doesn't say back or no image at all --->
<cfelse>    
<img src="back.jpg" width="92" height="40">    
</cfif>

<!--- this is a drop down to jump to the image you want (my images had a descriptive title in the DB as well) --->
<select name = "imageName" onchange = "window.location = 'pics.cfm?pic='+this.value;">
      <cfoutput query="dsn">
        <option value = "#id#" <cfif showPic eq id>Selected</cfif>>#title#</option>
      </cfoutput>
    </select>

<!--- show next button --->
<cfif showPic neq qGetpics.recordCount>
        <a href="pics.cfm?[b]pic=<cfoutput>#evaluate(showPic + 1)#</cfoutput>[/b]"><img src="next2.jpg" alt="Forward 1 Image" width="92" height="40" border="0"></a>    
<!--- or a non linked button if it is the last image--->
<cfelse>    
<img src="next.jpg" width="92" height="40">    
    </cfif>

<!--- to show the image use something like this --->
<img src="pics/[b]<cfoutput>#qGetPics.fileName[showPic]#</cfoutput>[/b]" width="500" height="500">

A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
-Douglas Adams (1952-2001)