jQuery Carousel with lightbox integration

donboe · June 12, 2013, 3:54pm

Hi Pullo. I am looking for a way to give the active link from the active carousel a different colour. I tried some approaches, but I think that the e.preventDefault(); is holding me from make it work.

James_Hibbard · June 13, 2013, 8:41am

Hi donboe,

So, let’s start with the links then.

Define a selected class in your CSS:

#fmenu li a.selected { text-decoration: underline }

Then apply it in your JavaScript.

functions.js:

  $("#fmenu a").on("click", function(e){
    e.preventDefault();
		
    $("#fmenu li a").removeClass("selected");
    $(this).addClass("selected");

    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
        });
      }
    });
  });

Preventing the link’s default action shouldn’t interfere with styling it differently on click.

donboe · June 13, 2013, 10:17am

Hi Pullo I have integrated and it working perfect. I had basically the same script integrated, I only didn’t have the CSS like you have. I just had the class without the #fmenu li in front of it. Anyway it is working great. Thank you a lot :tup:

James_Hibbard · June 13, 2013, 12:25pm

Hi,

Yeah, you have to be more specific with your “selected” styles, so that they don’t get overwritten by the more generic ones.

So, returning to tightening up the JS, I had a couple more comments.

Your resize function might be a good place to start.

Run this code on your machine with a browser console open.
Manually resize the window (using its drag handles) to see how often the resize handler is called:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Resize handler example</title>
  </head>
  
  <body>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $(window).on("resize", function(){
        console.log("Resize handler just fired");
      });
    </script>
  </body>
</html>

As you can see, it can easily be called a couple of hundred times.

Now consider this:

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);
}

$(window).resize(function () {
  resizePanel();
});

You are querying the DOM multiple times within your resize function.
You can improve things by caching your selectors outside of the resize function:

var $items = $('.item'),
    $debug = $('#debug'),
    $wrapper = $('#wrapper'),
    $mask = $('#mask');			
	
function resizePanel() {
  var width = $(window).width(),
      height = $(window).height(),
      mask_width = width * $items.length;

  $debug.html(width  + ' ' + height + ' ' + mask_width);
  $.merge($wrapper, $items).css({width: width, height: height});
  $mask.css({width: mask_width, height: height});
  $wrapper.scrollTo($('a.selected').attr('href'), 0);
}

Also, I’m not sure what this line is doing:

$debug.html(width  + ' ' + height + ' ' + mask_width);

Maybe you can remove it.

Finally, this line throws an error:

$wrapper.scrollTo($('a.selected').attr('href'), 0);

Uncaught Error: Syntax error, unrecognized expression: #

.

The has being the contents of the anchor tag’s href attribute.

donboe · June 18, 2013, 7:22am

Hi Pullo. Sorry I couldn’t come back to you about this any earlier. This way it is much tighter indeed. Thank you for all your input! I have one last question of which I don’t know if it is do-able. When the carousel has museum_id = 1 (Porsche) I need to append an image coming from another folder:

<img src=“videos/porche.jpg” alt=“” id=“” />

With the following <ahref> properties

<a class=“fancybox-media” href=“http://www.youtube.com/watch?v=IC9wzNu-k3E” title=“Diem is painting Porsche”></a>

How would I include that in the echo:

echo “<a class=‘fancybox’ data-fancybox-group=‘gallery’ href='http://diem.sothenwhat.com/museum_photos/photos/” . $row->photo . “’ rel=‘lightbox’><img src='http://diem.sothenwhat.com/museum_photos/carousel/” . $row->photo . "’ /></a>

Thank you in advance

James_Hibbard · June 18, 2013, 8:41am

Hi donboe,

So when you display the images from the Porsche collection the PHP script returns:

<a class="fancybox" data-fancybox-group="gallery" href="http://diem.sothenwhat.com/museum_photos/photos/porsche1.jpg" rel="lightbox">
  <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche1.jpg">
</a>
...
lots more images
...
<a class="fancybox" data-fancybox-group="gallery" href="http://diem.sothenwhat.com/museum_photos/photos/porsche25.jpg" rel="lightbox">
  <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche25.jpg">
</a>

Now you want to append this to the end:

<a class="fancybox-media" href="http://www.youtube.com/watch?v=IC9wzNu-k3E" title="Diem is painting Porsche">
  <img src="videos/porche.jpg" alt="" id="" />
</a>

So that the entire thing will look like:

<a class="fancybox" data-fancybox-group="gallery" href="http://diem.sothenwhat.com/museum_photos/photos/porsche1.jpg" rel="lightbox">
  <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche1.jpg">
</a>
...
lots more images
...
<a class="fancybox" data-fancybox-group="gallery" href="http://diem.sothenwhat.com/museum_photos/photos/porsche25.jpg" rel="lightbox">
  <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche25.jpg">
</a>
<a class="fancybox-media" href="http://www.youtube.com/watch?v=IC9wzNu-k3E" title="Diem is painting Porsche">
  <img src="videos/porche.jpg" alt="" id="" />
</a>

Is that correct?

donboe · June 18, 2013, 12:38pm

Hi Pullo . That is indeed correct

James_Hibbard · June 18, 2013, 6:43pm

Hey donboe,

This should work:

<?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'];
$imgString= "";

$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()) {
  $imgString+= "<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>";
}

if ($museum_id == 1){
  $imgString += "<a class='fancybox-media' href='http://www.youtube.com/watch?v=IC9wzNu-k3E' title='Diem painting Porsche'><img src='videos/porche.jpg' alt='' id='' /></a>";
}

echo $imgString;

Saying that, it’s untested, so let me know how you get on.

donboe · June 19, 2013, 4:36am

Hi Pullo. Thank you for the reply I have changed the php file to the above, but when I click one of the links I just get a 0 (zerro) as you can see on the site Artwork. I have no idea what to change, since PHP is not my strongest point as you might have noticed.

James_Hibbard · June 19, 2013, 5:41am

Oops, sorry. Change the += to .=

<?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'];
$imgString= "";

$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()) {
  $imgString .= "<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>";
}

if ($museum_id == 1){
  $imgString .= "<a class='fancybox-media' href='http://www.youtube.com/watch?v=IC9wzNu-k3E' title='Diem painting Porsche'><img src='videos/porche.jpg' alt='' id='' /></a>";
}

echo $imgString;

donboe · June 19, 2013, 6:06am

Hi Pullo. That works great indeed. Thank you very very much. :tup: One last thing, really How do I turn those two arround. So that the video is the first one (the centerd image) ?

James_Hibbard · June 19, 2013, 6:39am

Hi donboe,

Just swap the position of the if and while statements.

donboe · June 19, 2013, 7:31am

Hi Pullo,

Do you mean like this:

while ($museum_id == 1) {
$imgString .= “<a class=‘fancybox-media’ href=‘http://www.youtube.com/watch?v=IC9wzNu-k3E’ title=‘Diem painting Porsche’><img src=‘videos/porche.jpg’ alt=‘’ id=‘’ /></a>”;
}

if ($row = $stmt->fetchObject()){
$imgString .= “<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>”;
}

James_Hibbard · June 19, 2013, 8:27am

Sorry for the short reply, I’m at work and mobile.
Just take the if block, don’t change anything and move these three lines to before the while block.

donboe · June 19, 2013, 11:12am

Ha okay. Thank you again. This will work out!