jQuery Carousel with lightbox integration

There are actually two tables involved. artwork and arwok_photos. Where artwork_photos has a foreign key to the artwork table! Please give me some time to create that page

Yeah, no problem.
I still haven’t fully understood what you are pulling from the DB, but my idea is that when you hit one of the buttons (e.g. Porsche), you fire off an AJAX call which returns a blob of HTML which we can then catch in the JS success function and use to initiate a carousel without page refresh.

Failing that, an alternative approach would be to create all of the carousels at once, hide the ones we’re not interested in, then fade them in and out accordingly (also without page refresh).

It all depends on what you’re getting back from your db …

Hi Pullo. This is the page

And this the HTML/CF:


<cfquery name="getGallery" datasource="DSN">
  SELECT
             M.museum_id
           , M.museum_serie_eng
           , MP.photo
  FROM
             museum M
  INNER
  JOIN     museum_photos MP 
    ON     M.museum_id = MP.museum_id 
  WHERE
             M.museum_id = <cfqueryparam cfsqltype="cf_sql_idstamp" value="#Val( 1 )#" /> 	
</cfquery>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
 margin: 0;
 padding: 0; 
}

html, body {
 width: 100%;
 height: 100%; 
}

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 100%;
}

#wrapper {
 width: 918px;
 min-height: 100%;
 margin: 50px auto 0;
 position: relative; 
}

#wrapper h1 {
 padding: 0 0 30px;
 font-size: 1.4em;
 font-weight: bold;   
}

#gallery {
 width: 918px;
 overflow: hidden;
 clear: both; 
}

#gallery li {
 width: 458px;
 float: left;
 text-align: center; 
 list-style: none;
}
</style>
</head>

<div id="wrapper">
<cfoutput>
  <h1>#getGallery.museum_serie_eng#</h1>
  <ul id="gallery">
    <cfloop query="getGallery"
      <li><img src="museum_photos/carousel/#getGallery.photo#"></li>    
    </cfloop>
  </ul>
</cfoutput>
</div>
</body>
</html>

Hope this will give you some more idea. Thank you in advance

Hi Donald,

We’re getting there.

Can you make it so that the ColdFusion page only outputs this:

<img src="museum_photos/carousel/porsche1.jpg">
<img src="museum_photos/carousel/porsche2.jpg">
<img src="museum_photos/carousel/porsche3.jpg">
<img src="museum_photos/carousel/porsche4.jpg">
<img src="museum_photos/carousel/porsche5.jpg">
<img src="museum_photos/carousel/porsche6.jpg">
<img src="museum_photos/carousel/porsche7.jpg">
<img src="museum_photos/carousel/porsche8.jpg">
<img src="museum_photos/carousel/porsche9.jpg">
<img src="museum_photos/carousel/porsche10.jpg">
<img src="museum_photos/carousel/porsche11.jpg">
<img src="museum_photos/carousel/porsche12.jpg">
<img src="museum_photos/carousel/porsche13.jpg">
<img src="museum_photos/carousel/porsche14.jpg">
<img src="museum_photos/carousel/porsche15.jpg">
<img src="museum_photos/carousel/porsche16.jpg">
<img src="museum_photos/carousel/porsche17.jpg">
<img src="museum_photos/carousel/porsche18.jpg">
<img src="museum_photos/carousel/porsche19.jpg">
<img src="museum_photos/carousel/porsche20.jpg">
<img src="museum_photos/carousel/porsche21.jpg">
<img src="museum_photos/carousel/porsche22.jpg">
<img src="museum_photos/carousel/porsche23.jpg">
<img src="museum_photos/carousel/porsche24.jpg">
<img src="museum_photos/carousel/porsche25.jpg">

We don’t need the rest.

Hi Pullo. Sure! Here it is

Cool.

So let’s see if we can load the gallery into the page via AJAX and initialize it.

Try this:

<!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>
    <button id="send">Send</button>
    <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>
      $("#send").on("click", function(){
        $.ajax({
          type: "GET",
          url: "gallery.cfm",
	  cache: false,
          dataType: "html",
          success:function(res)	{
	    $("#result").html(res);
	    $("#result").waterwheelCarousel();
            $("#result").css({top:200});
          }
        });
      });
    </script>
  </body>
</html>

HereIs a demo of it working on my server.
Notice, no page refresh.

This is great. Now the next question. Normaly I have links like this with url variables in order to load the right serie:


<a href="test.cfm?artwork=porsche" title="">Porsche</a>|<a href="test.cfm?artwork=hemingway" title="">Hemingway</a>|<a href="test.cfm?artwork=univers" title="">Universe</a>

How would I integrate that in your system?

Hi donboe,

What you need to do next is to make a second ColdFusion page with the second gallery (just the same as the first).
Then let me know and I’ll update the demo.

Here’s a demo of where I’m going with this.

So basically what you say is to have a page for each gallery! But what if I don’t know how many galleries there will be. The owner can add galleries when he needs to

If it was me, I would do it like this (using PHP):

Say you have five links for different galleries.
When the user clicks on one of these links, the link’s default action is prevented.
Then an ajax request is fired to a PHP script, which passes a parameter indicating which gallery the user wants to view.
Based on whatever parameter the PHP script receives, it can go and get all of the images tagged with that parameter (from the DB?) and return the appropriate HTML to the original page.
Then, you would use JS to initialize the carousel with whatever HTML was returned.

I hope that is possible in Cold Fusion. It would’t be difficult in PHP.

Also, if this is something your client should maintain himself, could you briefly describe the steps he would take (in an ideal world) to add images to the gallery.

Hi Pullo I have the idea that we are talking about the exact same thing. The differernt galleries are based on a mySql query:


<cfquery name="getArtwork">
SELECT
        A.artwork_id
     ,  A.artwork_name
FROM
        artwork A
INNER
  JOIN artwork_photos AP
    ON  A.artwork_id = AP.artwork_id
WHERE
     A.artwork_id = URL.artwork
</cfquery>

So what you call the parameter, did I call URL variable in my previous post. So basically there is just one page holding the query and output and indeed as you mentioned should the gallery show related to the link/button that is pressed. The links are created dynamically. So then the link in the Coldfusion situation would be:


<cfoutput query="getArtwork">
<a href="#ajaxlink('test.cfm?artwork=#getArtwork.artwork_id#' )#">#getArtwork.artwork_name#</a>
</cfquery>

where artwork behind the ? is the URL variable and the #getArtwork.artwork_name# the gallery name. And since you use GET as TYPE one would think that that you could do something similar using your ajax method?

The clent can add a a gallery, by first giving it a name(artwork_name) , which is going into the table artwork. After which he can add photos to the table artwork_photos. the relation is created true a session. The same will happen when he wants to add photos to an existing gallery. Hope this makes everything a bit clearer.

Hi,

Thanks for the explanation. That certainly makes things clearer.

So, do I understand you correctly, that to display the images associated with Porsche, your CF script needs the parameter artwork=porsche and to display the images associated with Hemminway, your CF script needs the parameter artwork=hemmingway?

That is indeed what i mean :slight_smile: In the mySql query that I showed you I used the artwork_id as an example to make it more clear, but I prefer to use the artwork_name, to make the URL more friendly looking. Can you do something with that

Sure can, Sir.

Here’s a demo.

Here’s the revised HTML:

<!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-gallery="porsche">Porsche</a>
    <a href="#" data-gallery="hemmingway">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 gallery = $(this).data("gallery");
        $.ajax({
          type: "GET",
          url: "test3.php",
          data: {artwork: gallery},
          cache: false,
          dataType: "html",
          success:function(res)  {
            $("#result").html(res);
            $("#result").waterwheelCarousel();
            $("#result").css({top:200});
          }
        });
      });
    </script>
  </body>
</html>

And the revised PHP:

<?php
  $gallery = $_GET['artwork'];
  
  if($gallery == "porsche"){
    echo('
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche1.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche2.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche3.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche4.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche5.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche6.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche7.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche8.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche9.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche10.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche11.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche12.jpg">
    ');  
  } else {
    echo('
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche13.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche14.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche15.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche16.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche17.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche18.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche19.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche20.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche21.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche22.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche23.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche24.jpg">
    <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche25.jpg">
    ');  
  }
?>

As you can see, that when a link is clicked, the parameter is retrieved from the data-gallery attribute and passed to the PHP script.
The PHP script then reacts accordingly.
In your setup, this would then be used to build the DB query, in mine I am just returning some images.

Does that help?

Hi Pullo, it is coming very near to what I need indeed, but I try to understand the principle of what you have done, so I can translate it into Coldfusion. So I have a few questions:

  1. Is artwortk $gallery = $_GET[‘artwork’]; in test3.php the mySql query?
  2. Can you please explain the following two lines in your script “var gallery = $(this).data(“gallery”);” and data: {artwork: gallery},

I would be very greatful.

Hi donboe,

What is happening is that the JavaScript is listening for clicks on any anchor element.
When a click takes place, it prevents the link’s default action, then assigns the link’s data-gallery attribute to a gallery variable.
Example: If I click the “Porsche” link, then gallery holds the value “porsche”. If I click “Hemmingway” then gallery holds the value “hemmingway”.
The JavaScript then executes an asynchronous GET request to test3.php.
It assigns whatever value is held in the gallery variable to a new variable called artwork and passes that to the PHP script.
In the PHP script this variable is available as $_GET['artwork'].
The PHP script reads this value and returns a lump of HTML accordingly. I have hard-coded this HTML in my example, but you will want to do something a little bit more dynamic in your CF script.
The main thing is, that the CF script returns different HTML (i.e. different pictures) for different values of $_GET['artwork'].
Back in the JavaScript, we catch teh return value and initialize the carousel.

Does that help?

Hi Pullo, I start to understand the principle :), still leaves me with the question about the mySql query getArtwork that actually will return the photos! In which of the pages is that integrated. In test3.php?

Hi,

Are the images themselves stored in the DB or are they stored on the file system with a reference to them in the DB?

Hi Pullo. The images are stored in a folder in the root, the references are stored in the DB.