Rearrange the order of items in the fancybox gallery

Question

Rearrange the order of items in the fancybox gallery

Typically, fancybox displays items in the gallery based on the order they are added in the HTML code.

Is there a way to customize the order of items when they are opened in the popup, while keeping the original order when displayed on the page?

The solution involves adding a optional data- attribute to each item:

<a class="fancybox" rel="gallery1" href="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_b.jpg" title="Morning Godafoss (Brads5)">
    <img src="http://farm2.staticflickr.com/1617/24108587812_6c9825d0da_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3691/10185053775_701272da37_b.jpg" title="Vertical - Special Edition! (cedarsphoto)">
    <img src="http://farm4.staticflickr.com/3691/10185053775_701272da37_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_b.jpg" title="Racing against the Protons (tom.leuzi)">
    <img src="http://farm1.staticflickr.com/574/22407305427_69cc6e845f_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg" title="Lupines (Kiddi Einars)">
    <img src="http://farm1.staticflickr.com/291/18653638823_a86b58523c_m.jpg" alt="" />
</a>

JavaScript code for fancybox initialization:

$(".fancybox").fancybox();

JSFiddle

If you want to open the images in the popup in a different order than they appear on the page, you can use the following setup:

Specify the desired order using the data-fancybox-order attribute like this:

<a class="fancybox" rel="gallery1" data-fancybox-order="3" ... >
<a class="fancybox" rel="gallery1" data-fancybox-order="1" ... >
<a class="fancybox" rel="gallery1" data-fancybox-order="4" ... >
<a class="fancybox" rel="gallery1" data-fancybox-order="2" ... >

With this setup, navigation buttons will adjust based on the specified order. For example, if the second image is clicked (data-fancybox-order="1"), there will be no previous button. Clicking next will open the fourth image, then the first, and finally the third image (data-fancybox-order="4"), after which the next button will disappear.

What's the best approach to implement this?

javascript jquery html css fancybox-2

Answer 1

Answer №1

Regrettably, fancybox does not provide an option for that specific feature. It may be necessary to manually create and initiate the fancybox gallery in the desired sequence.

To achieve this, you must assign a data attribute to each html element to specify the display order within the fancybox gallery. For instance:

<a class="fancybox" href="image03.jpg" title="title 3" data-order="3">...
<a class="fancybox" href="image01.jpg" title="title 1" data-order="1">...
<a class="fancybox" href="image04.jpg" title="title 4" data-order="4">...
<a class="fancybox" href="image02.jpg" title="title 2" data-order="2">...

As the gallery will be constructed programmatically, the rel attribute becomes redundant.

Instead of utilizing the standard fancybox initialization script $(".fancybox").fancybox(), you need to bind a click event to dynamically create and launch the fancybox gallery:

$(".fancybox").click(function(){
    // establish the fancybox gallery here
    return false; // prevent default event behavior and propagation
});

Upon clicking any of the html thumbnails, the process involves:

obtaining the index of the clicked image (data-order attribute)
collecting all html elements with class fancybox (querySelectorAll())
initializing the array of elements for the fancybox gallery
iterating through the html elements and adding them to the fancybox gallery array
sorting the fancybox array

Since the fancybox gallery object will consist of an array of objects, a function is required to sort such an array based on a chosen property. This function can be sourced from this answer:

// function to sort array of objects by a property
var sortObjectsBy = function(field, reverse, primer) {
  var key = primer ? function(x) {
    return primer(x[field])
  } : function(x) {
    return x[field]
  };
  reverse = !reverse ? 1 : -1;
  return function(a, b) {
    return a = key(a),
      b = key(b),
      reverse * ((a > b) - (b > a));
  }
}

Subsequently, all components are integrated after the click event:

$(".fancybox").on("click", function() {
  // retrieve the index of the clicked image
  var thisIndex = this.dataset.order - 1;
  // gather all html elements
  var elements = document.querySelectorAll(".fancybox");
  // initialize the array for the fancybox gallery
  var fancyElements = [];
  // include the html elements in the fancybox gallery
  for (var i = 0, elLength = elements.length; i < elLength; i++) {
    fancyElements.push({
      href: elements[i].href,
      title: elements[i].title + " - " + elements[i].dataset.order,
      order: elements[i].dataset.order
    });
  }
  // sort the fancybox array of objects by the "order" property
  fancyElements.sort(sortObjectsBy("order", false, function(a) {
    return a;
  }));
  // programmatically launch fancybox
  $.fancybox(fancyElements, {
    helpers: {
      title: {
        type: "inside"
      }
    },
    // specify starting index
    index: thisIndex // commence gallery from the selected element
  })
  return false;
});

You have the flexibility to incorporate additional fancybox options into the script, similar to the inclusion of the title type. Moreover, the addition of the order to the title serves illustrative purposes to validate the orderly presentation determined by the data-order attribute.

Moreover, while the order property is non-essential for fancybox functionality, it facilitates sorting the array effectively.

Refer to JSFIDDLE for further details.

Answer 2

Regrettably, fancybox does not provide an option for that specific feature. It may be necessary to manually create and initiate the fancybox gallery in the desired sequence.

To achieve this, you must assign a data attribute to each html element to specify the display order within the fancybox gallery. For instance:

<a class="fancybox" href="image03.jpg" title="title 3" data-order="3">...
<a class="fancybox" href="image01.jpg" title="title 1" data-order="1">...
<a class="fancybox" href="image04.jpg" title="title 4" data-order="4">...
<a class="fancybox" href="image02.jpg" title="title 2" data-order="2">...

As the gallery will be constructed programmatically, the rel attribute becomes redundant.

Instead of utilizing the standard fancybox initialization script $(".fancybox").fancybox(), you need to bind a click event to dynamically create and launch the fancybox gallery:

$(".fancybox").click(function(){
    // establish the fancybox gallery here
    return false; // prevent default event behavior and propagation
});

Upon clicking any of the html thumbnails, the process involves:

obtaining the index of the clicked image (data-order attribute)
collecting all html elements with class fancybox (querySelectorAll())
initializing the array of elements for the fancybox gallery
iterating through the html elements and adding them to the fancybox gallery array
sorting the fancybox array

Since the fancybox gallery object will consist of an array of objects, a function is required to sort such an array based on a chosen property. This function can be sourced from this answer:

// function to sort array of objects by a property
var sortObjectsBy = function(field, reverse, primer) {
  var key = primer ? function(x) {
    return primer(x[field])
  } : function(x) {
    return x[field]
  };
  reverse = !reverse ? 1 : -1;
  return function(a, b) {
    return a = key(a),
      b = key(b),
      reverse * ((a > b) - (b > a));
  }
}

Subsequently, all components are integrated after the click event:

$(".fancybox").on("click", function() {
  // retrieve the index of the clicked image
  var thisIndex = this.dataset.order - 1;
  // gather all html elements
  var elements = document.querySelectorAll(".fancybox");
  // initialize the array for the fancybox gallery
  var fancyElements = [];
  // include the html elements in the fancybox gallery
  for (var i = 0, elLength = elements.length; i < elLength; i++) {
    fancyElements.push({
      href: elements[i].href,
      title: elements[i].title + " - " + elements[i].dataset.order,
      order: elements[i].dataset.order
    });
  }
  // sort the fancybox array of objects by the "order" property
  fancyElements.sort(sortObjectsBy("order", false, function(a) {
    return a;
  }));
  // programmatically launch fancybox
  $.fancybox(fancyElements, {
    helpers: {
      title: {
        type: "inside"
      }
    },
    // specify starting index
    index: thisIndex // commence gallery from the selected element
  })
  return false;
});

You have the flexibility to incorporate additional fancybox options into the script, similar to the inclusion of the title type. Moreover, the addition of the order to the title serves illustrative purposes to validate the orderly presentation determined by the data-order attribute.

Moreover, while the order property is non-essential for fancybox functionality, it facilitates sorting the array effectively.

Refer to JSFIDDLE for further details.

Rearrange the order of items in the fancybox gallery

Answer №1

Similar questions

Selenium is not designed for scraping images

Placing text in a box in the corner while maintaining the ability to scroll

Getting HTML from Next.js middleware - a step-by-step guide

Is it possible to utilize the output of a function nested within a method in a different method?

Modifying Ajax-injected HTML with JQuery's editInPlace functionality

Automatically forward after submitting the form

Routing with nested modules in Angular 2 can be achieved by using the same

Navigating with React Router Dom and parsing objects in search parameters

Initiate a Gravity Forms form refresh after modifying a hidden field with jQuery

The concept of nested views in Angular UI-Router allows for a

Run JavaScript when ColdFusion page is being loaded

Arranging a list of objects with a designated starting value to remain at the forefront

Utilizing Mongoose Schema Enums Alongside TypeScript Enums

Link a function to a button in a 3rd party library

Navigating with Anchors, Styling and jQuery

How can I combine multiple requests in RxJS, executing one request at a time in parallel, and receiving a single combined result?

Transitioning from a multipage application to Piral: A comprehensive guide

Preventing clicks underneath in Internet Explorer with CSS overlay

Promise and Determination failing to produce results

Guide on retrieving file information after transmitting it to another PHP file through Ajax