In that case, couldn’t you write something like this:
<?php
$tag= $_GET['artwork'];
$sql= "SELECT * FROM images WHERE tag= :tag";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':tag', $tag, PDO::PARAM_STR);
$stmt->execute();
while ($row = $stmt->fetchObject()) {
echo "<img src='" . $row->path . "' />"
}
?>
Sorry I can’t help you more with the ColdFusion.
Hi Pullo, this is going over my head to translate this to Coldfusion so I think I should go fo the PHP method instead to make this work. The code in your previous post is that complete or should i make adjustments. My CF query should normally look like:
SELECT
M.museum_id
, M.museum_serie_dut
, M.museum_serie_eng
, M.museum_serie_name
, MP.photo
FROM
museum M
INNER
JOIN museum_photos MP
ON M.museum_id = MP.museum_id
WHERE
museum_serie_name = <cfqueryparam cfsqltype="cf_sql_varchar" value="#Trim( Url.artwork )#" />
How do I translate that into php. Another thing is that the carousel isn’t working in your link, it just show the photo’s in a couple of rows, should I add the jQuery plugin to the test3.php page instead?
Hi donbe,
The PHP code is incomplete, but I can make it work for you.
Can you tell me:
The name of the database.
The name of the table where the paths of the images is stored.
The column name containing the paths of the images.
The column name containing the tag/identification for the various images (e.g. Hemmingway, Porsche etc.)
An example path (e.g. /projects/diem/images/porsche1.jpg)
This I don’t understand. The carousel is doing what it is supposed to as far as I can see.
Or do you mean that you can’t get it to work for you, on your PC?
should I add the jQuery plugin to the test3.php page instead?
No. The only job of test3.php is to return a lump of HTML containing the image tags.
Hi Pullo. The DB name is DIEMDB. The are two tables involved. The first one museum:
CREATE TABLE IF NOT EXISTS `museum` (
`museum_id` tinyint(2) NOT NULL auto_increment,
`museum_serie_dut` varchar(255) default NULL,
`museum_serie_eng` varchar(255) default NULL,
`museum_serie_name` varchar(255) default NULL,
PRIMARY KEY (`museum_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `museum` (`museum_id`, `museum_serie_dut`, `museum_serie_eng`, `museum_serie_name`) VALUES
(1, 'Porsche', 'Porsche', 'porsche'),
(2, 'Hemmingway', 'Hemmingway', 'hemingway'),
(3, 'Koeien', 'Cows', 'cows'),
(4, 'Muiek', 'Music', 'music'),
(5, 'Dieren', 'Animals', 'animals'),
(6, 'Portretten', 'Portraits', 'portraits'),
(7, 'Abstract', 'Abstract', 'abstract');
and museum_photos:
CREATE TABLE IF NOT EXISTS `museum_photos` (
`photo_id` smallint(2) NOT NULL auto_increment,
`museum_id` tinyint(2) NOT NULL,
`photo` varchar(255) default NULL,
`photo_description_dut` varchar(255) default NULL,
`photo_description_eng` varchar(255) default NULL,
PRIMARY KEY (`photo_id`),
FOREIGN KEY (`museum_id`) REFERENCES `museum` (`museum_id`) ON DELETE CASCADE ON UPDATE NO ACTION
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
INSERT INTO `museum_photos` (`photo_id`, `museum_id`, `photo`, `photo_description_dut`, `photo_description_eng`) VALUES
(1, 1, 'porsche1.jpg', NULL, NULL),
(2, 1, 'porsche2.jpg', NULL, NULL),
(3, 1, 'porsche3.jpg', NULL, NULL),
(4, 1, 'porsche4.jpg', NULL, NULL),
(5, 1, 'porsche5.jpg', NULL, NULL),
(6, 1, 'porsche6.jpg', NULL, NULL),
(7, 1, 'porsche7.jpg', NULL, NULL),
(8, 1, 'porsche8.jpg', NULL, NULL),
(9, 1, 'porsche9.jpg', NULL, NULL),
(10, 1, 'porsche10.jpg', NULL, NULL),
(11, 1, 'porsche11.jpg', NULL, NULL),
(12, 1, 'porsche12.jpg', NULL, NULL),
(13, 1, 'porsche13.jpg', NULL, NULL),
(14, 1, 'porsche14.jpg', NULL, NULL),
(15, 1, 'porsche15.jpg', NULL, NULL),
(16, 1, 'porsche16.jpg', NULL, NULL),
(17, 1, 'porsche17.jpg', NULL, NULL),
(18, 1, 'porsche18.jpg', NULL, NULL),
(19, 1, 'porsche19.jpg', NULL, NULL),
(20, 1, 'porsche20.jpg', NULL, NULL),
(21, 1, 'porsche21.jpg', NULL, NULL),
(22, 1, 'porsche22.jpg', NULL, NULL),
(23, 1, 'porsche23.jpg', NULL, NULL),
(24, 1, 'porsche24.jpg', NULL, NULL),
(25, 1, 'porsche25.jpg', NULL, NULL),
(26, 2, 'hemingway1.jpg', NULL, NULL),
(27, 2, 'hemingway2.jpg', NULL, NULL),
(28, 2, 'hemingway3.jpg', NULL, NULL),
(29, 3, 'cow1.jpg', NULL, NULL),
(30, 3, 'cow2.jpg', NULL, NULL),
(31, 3, 'cow3.jpg', NULL, NULL),
...........
...........
(71, 7, 'abstract6.jpg', NULL, NULL),
(72, 7, 'abstract7.jpg', NULL, NULL),
(73, 7, 'abstract8.jpg', NULL, NULL);
Which are joind true museum_id
There is no column holding the path, I usually have the path like: museum_photos/carousel/queryname.photo so the path is: museum_photos/carousel/photo.jpg
The column name holding the tag/identification for the various images is museum_serie_name in the table museum.
I hope this is all the information needed. Again thank you for all the help. :tup:
Hi donboe,
So using the SQL you supplied, I recreated the museum_photos table on my machine.
For our purposes here, the museum table was irrelevant.
I then updated the HTML, so that when you click on any of the links, the corresponding museum_id is passed to the PHP script.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ColdFusion test</title>
<style>img{ float:left;}</style>
</head>
<body>
<a href="#" data-museum-id="1">Porsche</a>
<a href="#" data-museum-id="2">Hemmingway</a>
<div id="result"></div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://diem.sothenwhat.com/js/jquery.waterwheelCarousel.js"></script>
<script>
$("a").on("click", function(e){
e.preventDefault();
var id = $(this).data("museum-id");
$.ajax({
type: "GET",
url: "test4.php",
data: {museum_id: id},
cache: false,
dataType: "html",
success:function(res) {
$("#result").html(res);
$("#result").waterwheelCarousel();
$("#result").css({top:200});
}
});
});
</script>
</body>
</html>
Then in test4.php I connect to the database, retrieve the museum_id from the $_GET array, query the database for the names of all photos associated with the museum_id, then iterate over them outputting an image tag for each one.
<?php
try
{
$pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'password');
}
catch (PDOException $e)
{
echo 'Unable to connect to the database server.';
exit();
}
$museum_id= $_GET['museum_id'];
$sql= "SELECT photo FROM museum_photos WHERE museum_id= :museum_id";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':museum_id', $museum_id, PDO::PARAM_STR);
$stmt->execute();
while ($row = $stmt->fetchObject()) {
echo "<img src='http://diem.sothenwhat.com/museum_photos/carousel/" . $row->photo . "' />";
}
Hope that helps you.
Hi Pullo, the pages are communicating with each other very well, I see some light on the horizon. I only can’t get the carousel to work as it should as you can see here. The last question is that I need to add a hyperlink arround the images for the use of jQuery Lightbox. But I have no idea how to implement that into the echo? The image path for that is:
img src='http://diem.sothenwhat.com/museum_photos/photos/ . $row->photo
Thank you in advance!
Hey,
That’s good progress 
All we need to do now is to turn this:
<img src="http://diem.sothenwhat.com/artwork/portrait1.jpg" />
into this:
<a href="http://diem.sothenwhat.com/artwork/portrait1.jpg" rel="lightbox"><img src="http://diem.sothenwhat.com/artwork/portrait1.jpg" /></a>
You can do this in the PHP code.
Change:
echo "<img src='http://diem.sothenwhat.com/museum_photos/carousel/" . $row->photo . "' />";
into:
echo "<a href='http://diem.sothenwhat.com/museum_photos/carousel/" . $row->photo . "' rel='lightbox'><img src='http://diem.sothenwhat.com/museum_photos/carousel/" . $row->photo . "' /></a>";
Does that work?
N.B.: Don’t forget to include the lightbox scripts on the page.
Hi Pullo that works great. I have the lightbox/fancybox scripts included and it is working. Leaves me with the carousel, which isn’t working for me as yet. See the page. I had a look at jquery.waterwheelCarousel.js and they are reffering to a container called carousel, so I changed that in my test page but without any result as you will see
Works for me in the latest Chrome.
Which browser are you using and on which OS?
For me it is indeed working in Chrome and IE as well. but in Firefox on Windows it isn’t. Is this a firefox thing?
It works fine for me in the latest Firefox on Windows 8.
What version of FF are you using and which version of Windows?
I have a couple of VMs lying around so maybe I can try to reproduce.
Also be sure that you don’t have any JavaScript blocking extensions installed.
Hi Pullo. It is Firefox 21.0 on Windows 7
Edit. Now it is suddenly working in Firefox as well, but not all the time 
like there are some problems loading the images
Sorry man, I can’t reproduce.
I just opened up a VM running Win7, installed FF 21.0 and have loaded the page many times.
It worked every time.
Are there any other factors at play?
Hi Pullo, Forget my last post. I have just integrated it in the original page and everything is working fine. Thanks a lot for all help and patience :tup:
No problem at all.
Glad we got there in the end and that you found an acceptable solution for your client.
Hi Pullo
I have one last question. The function calls for the functionality are one big mess. I have them combined in a file called functions.js. This how it looks like right now.
// JavaScript Document
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
$(document).ready(function() {
$("#header").delay(6000).animate({top: '+=70'}, 800, 'easeOutBounce');
$(".carousel").waterwheelCarousel();
$('.video-background').videobackground({
videoSource: [['video/porsche.mp4', 'video/mp4'],
['video/porsche.webm', 'video/webm'],
['video/porsche.ogv', 'video/ogg']],
poster: 'video/porsche.jpg',
loadedCallback: function() {
$(this).videobackground('mute');
}
});
});
$(".submenu a").on("click", function(e){
e.preventDefault();
var id = $(this).data("museum-id");
$.ajax({
type: "GET",
url: "artwork.php",
data: {museum_id: id},
cache: false,
dataType: "html",
success:function(res) {
$(".result").html(res);
$(".result").waterwheelCarousel({
flankingItems: 1
});
}
});
});
But I am sure there must be a way to have it more tighten up.
Thank you in advance
Hi,
The very first things we can do that are an easy win are:
Move everything into $(document).ready(function(){ ... });
Remove the second use of $(document).ready(function(){ ... });
Indent the file properly.
Group the different elements together for ease of reference (e.g. all of the click handlers)
Here’s that:
$(document).ready(function() {
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(".submenu a").on("click", function(e){
e.preventDefault();
var id = $(this).data("museum-id");
$.ajax({
type: "GET",
url: "artwork.php",
data: {museum_id: id},
cache: false,
dataType: "html",
success:function(res) {
$(".result").html(res);
$(".result").waterwheelCarousel({
flankingItems: 1
});
}
});
});
$(window).resize(function () {
resizePanel();
});
$("#header").delay(6000).animate({top: '+=70'}, 800, 'easeOutBounce');
$(".carousel").waterwheelCarousel();
$('.video-background').videobackground({
videoSource: [
['video/porsche.mp4', 'video/mp4'],
['video/porsche.webm', 'video/webm'],
['video/porsche.ogv', 'video/ogg']
],
poster: 'video/porsche.jpg',
loadedCallback: function() {
$(this).videobackground('mute');
}
});
});
Drop that into your page, confirm that everything still works, then report back and we’ll have a look at what else could be optimized.
HTH
Hi Pullo. Everything is still working. So we can pick it up from here!
Cool!
Can you post the address of the page where the JS is included (then I don’t need to keep asking you to test everything :))
Sorry if you posted it before, but in this way we are both sure that we are looking at the same thing.
Hi Pullo this is the temporary website. If you think we can tight things even better, please let me know.