SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 75
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Carousel with lightbox integration

    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi donboe,

    'tis done.

    Demo here.

    Code here:

    Code:
    <!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

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. That works great indeed 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)
    Code:
    <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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  9. #9
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    On the carousel pages, change your JS to this:

    Code JavaScript:
    $(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:

    Code JavaScript:
    $(document).ready(function() {
      $('#carousel').hide();
        $('#overlay').hide().delay(1000).fadeIn(1500, function(){
    	$("#carousel").waterwheelCarousel({}).fadeIn(1500);
        });
      });
    });

    Hope that helps.

  10. #10
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  11. #11
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  12. #12
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    <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.

  13. #13
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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:

    Code:
    <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.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  14. #14
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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?

  15. #15
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    We really just need one page which outputs "hello world".
    Is this even possible using ColdFusion?
    I am loosing you here? Ofcource I can have just one page just outouting just that. just go to this page
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  16. #16
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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.

  17. #17
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Pullo
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  18. #18
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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:

    HTML Code:
    <!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.

  19. #19
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. Okay that part is done and it is working. I try to understand what you just did! I like this approach a lot as far as I can see
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  20. #20
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Cool! That was easier than I thought.

    Quote Originally Posted by donboe View Post
    I need to load different artwork categories (coming from the database)
    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).

  21. #21
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  22. #22
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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 ...

  23. #23
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. This is the page

    And this the HTML/CF:

    HTML Code:
    <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
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  24. #24
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi Donald,

    We're getting there.

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

    Code:
    <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.

  25. #25
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,068
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. Sure! Here it is
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •