I am looking for a jQuery carousel something like this one but with lightbox integration. What I mean that the lightbox will only open when you click on the image that is centered. Any advise would be highly appreciated. Thank you in advance
Hi donboe,
That shouldn’t be too difficult to implement.
In the example you link to the image that is centered has a class name of “roundabout-in-focus”.
You would just use this class name to hook the picture up with lightbox functionality.
If you make simple demo of the carousel working with four or five images, I don’t mind helping you out after that.
Hi Pullo,
Here is a basic example. I used a different plugin then the one in my initianal post. Instead I used jQuery Waterwheel Image Carousel. But I am still after the same effect. Thank you in advance.
Hi donboe,
'tis done.
Demo here.
Code here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
margin: 0;
Padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
background: #CCC;
}
#wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
z-index: 1;
}
#carousel {
width:100%;
height:600px;
margin-top: 50px;
position:relative;
clear:both;
overflow:hidden;
z-index: 2;
}
#carousel img {
visibility: hidden;
cursor: pointer;
}
</style>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="carousel">
<a href="http://diem.sothenwhat.com/artwork/portrait1.jpg" rel="lightbox"><img src="http://diem.sothenwhat.com/artwork/portrait1.jpg" id="item-1" /></a>
<a href="http://diem.sothenwhat.com/artwork/portrait2.jpg" rel="lightbox"><img src="http://diem.sothenwhat.com/artwork/portrait2.jpg" id="item-2" /></a>
<a href="http://diem.sothenwhat.com/artwork/portrait3.jpg" rel="lightbox"><img src="http://diem.sothenwhat.com/artwork/portrait3.jpg" id="item-3" /></a>
<a href="http://diem.sothenwhat.com/artwork/portrait4.jpg" rel="lightbox"><img src="http://diem.sothenwhat.com/artwork/portrait4.jpg" id="item-4" /></a>
<a href="http://diem.sothenwhat.com/artwork/portrait5.jpg" rel="lightbox"><img src="http://diem.sothenwhat.com/artwork/portrait5.jpg" id="item-5" /></a>
<a href="http://diem.sothenwhat.com/artwork/portrait6.jpg" rel="lightbox"><img src="http://diem.sothenwhat.com/artwork/portrait6.jpg" id="item-6" /></a>
<a href="http://diem.sothenwhat.com/artwork/portrait7.jpg" rel="lightbox"><img src="http://diem.sothenwhat.com/artwork/portrait7.jpg" id="item-7" /></a>
<a href="http://diem.sothenwhat.com/artwork/portrait8.jpg" rel="lightbox"><img src="http://diem.sothenwhat.com/artwork/portrait8.jpg" id="item-8" /></a>
</div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<script type="text/javascript" src="http://diem.sothenwhat.com/js/jquery.waterwheelCarousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#carousel").waterwheelCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
});
</script>
</body>
</html>
Hope that helps
Hi Pullo. That works great indeed :tup: Only instead of using lightbox, I have used fancybox.js. You can see a working example here. I have one more question/proble. When you initially com on that page, there isnt’t a carousel. I have it hidden. Only when you click on one of the categories(porsche, hemingway, etc) the carousel will appear. To make the photos in the carousel stand out more I also us an white overlay(60%) which should be initially hidden as well, but it isn’t as you will see if you open the page. It should fade in when, for the first time when coming on this page, an category is clicked and I only want it to fade in once (when another category is clicked it should stay as it is). To try to accomplisch this I used my server side scripting (Coldfusion)
<cfif structKeyExists( Url, "artwork" )>
<script type="text/javascript">
document.getElementById('carousel').style.top =
"-" + document.getElementById('carousel_container').offsetHeight/2 + "px";
$(document).ready(function() {
$("#carousel").waterwheelCarousel({
});
$('#overlay').hide().fadeIn(1500);
$('#carousel').hide().delay(1000).fadeIn(1500);
});
</script>
<cfelse>
<script type="text/javascript">
$(document).ready(function(){
$('#overlay').hide();
$('#bg').hide().fadeIn(1500);
$('#header').hide().delay(2000).fadeIn(1500);
});
</script>
</cfif>
but as you can see it isn’t working. So what I really would like to accomplisch is the following:
- When you come on the page artwork, from another page, first the background should fade in followed by the menu ( this is working)
- Carousel and Overlay should be hidden (carousel is hidden because of a variable I have set, but the overlay isn’t hidden( is fading in)
- When one of the categories is clicked , the overlay should fade in (only 1 time) followed by the carousel
- When another category is clicked the overlay should stay as it is and the carousel with the other category should fade in
I could only come up with the declaration as in the code above, but like i said that isn’t working. Can this be done just in Javascript. Thank you in advance.
Hi I have part of this working. I made a separate function to try let the overlay fade in just one time, and then only when one of the categories is clicked. Here are the functions I used:
<cfif structKeyExists( Url, "artwork" )>
<script type="text/javascript">
document.getElementById('carousel').style.top =
"-" + document.getElementById('carousel_container').offsetHeight/2 + "px";
$(document).ready(function() {
$("#carousel").waterwheelCarousel({
});
var func =
function()
{
$('#overlay').hide().delay(1000).fadeIn(1500);
}.onetime();
$('#carousel').hide().delay(2000).fadeIn(1500);
});
</script>
<cfelse>
<script type="text/javascript">
$(document).ready(function(){
$('#overlay').hide();
$('#bg').hide().fadeIn(1500);
$('#header').hide().delay(1500).fadeIn(1500);
});
</script>
</cfif>
The problem is, that neither the overlay or the carousel are fading in they are just there when I click one of the categories as you can see here! So it seems that the .onetime(); function is working but the fadein for the overlay and carousel not? All advise would be highly appreciated
Hi donboe,
I just looked at the page you link to and it seems that things have moved along since you wrote this.
I tried clicking on “Porsche” and “Hemmingway”, but nothing happens.
As I cannot currently reproduce your problem, it is a little difficult to help.
Just let me know when you get back to this and I’m sure we’ll be able to sort it out 
Hi Pullo, that was because I had a other issue going on as well with the sub menu. But I have it back as it was as you can see here. As you will see is overlay not fading in after you clicked one of the categories the first time and nether is the carousel. When afterwards another category is clicked the background should stay as it is (not fading in again) but the carousel, with the category that is clicked, should fade in, but that isn’t happening either.
Hey,
On the carousel pages, change your JS to this:
$(document).ready(function() {
$('#overlay').hide().delay(1000).fadeIn(1500, function(){
$('#carousel').waterwheelCarousel();
});
});
That will fade in the overlay as required, then show the carousel.
I tried hiding the carousel div, creating the carousel and then fading it in, but it seems that if you call .waterwheelCarousel() on a hidden element, it doesn’t display when you fade it back in.
Maybe this is a z-index issue.
Here’s the JS in case you can solve that:
$(document).ready(function() {
$('#carousel').hide();
$('#overlay').hide().delay(1000).fadeIn(1500, function(){
$("#carousel").waterwheelCarousel({}).fadeIn(1500);
});
});
});
Hope that helps.
Hi Pullo. It is indeed some kind of z-index problem I quess. I couldn’t figure out what as yet but it is working as I want it right now so I am a happy person. Thank you for all the help
Hi Pullo, I am experiencing a problem with the waterwheel carousel and I have no idea how to fix it and more important in which forum I need to ask my question. The problem is the following. I need to load different artwork categories (coming from the database) in the carousel depending on which category is clicked. I would like to avoid that the page is reloading every time a category is clicked, so I desided to use Ajax in combination with Coldfusion (the server side scripting i am using) So I try to use the <cfdiv> tag to load a different page with the different galleries. When I have the function call in the main page, the carousel is not reacting at all, it simply place the photos in a line. When on the other hand I have the have the function call in the page that I am loading i get an error
Error processing JavaScript in markup for element test: [Enable debugging by adding ‘cfdebug’ to your URL parameters to see more information]
I realy have no idea how to solve this
Hey donboe,
Let’s try something - do me a favour and make a Cold Fusion page, that when you open it up in a browser does nothing more than output “HELLO WORLD”.
Something like this:
<cfoutput>#ucase("hello world")#</cfoutput>
Let me know when you have done that and we’ll see if we can get CF talking to jQuery.
Hi Pullo. I have created two pages. One called cfdiv.cfm and one called test.cfm. The first page is holding the <cfdiv> tag where the second one is loaded in, and the second one is holding the the text. I really am struggling for hour already. I have tried jQuery.noConflict() but without any result. Hope you see what I am doing wrong., or how I could solve this.
Hi,
We really just need one page which outputs “hello world”.
Is this even possible using ColdFusion?
Also, do you have the ability to run PHP on your server?
I am loosing you here? Ofcource I can have just one page just outouting just that. just go to this page
Hi, I’m currently tied up, but I should be in front of the PC in about half an hour.
Then I’ll have a bit of time and we can see if we can make this work.
Thank you so much Pullo
So, back with you now.
Let’s start off by seeing if we can get jQuery and ColdFusion talking to each other:
Make a file called index.html and add this to it:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ColdFusion test</title>
</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>
$("#send").on("click", function(){
$.ajax({
type: "POST",
url: "test.cfm",
dataType: "html",
success:function(res) {
$("#result").html(res);
}
});
});
</script>
</body>
</html>
Upload index.html to the same directory as test.cfm on your web server (important to not just open it from your PC in the browser, as then the AJAX call might not work).
If all goes according to plan, when you open index.html and click the button, you should see “Hello, World!” appear in the div below.
Let me know how it goes.
Hi Pullo. Okay that part is done and it is working. :tup: I try to understand what you just did! I like this approach a lot as far as I can see
Cool! That was easier than I thought.
So what exactly is stored in the database?
What would now be perfect is if you could make a ColdFusion page which fetches the paintings for one category and displays them on the page as unformatted HTML (i.e. no carousel).