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

How to implement a for loop within a Vue.js method

How can I gather information from members who have already signed up?

Using jQuery to Toggle the Height of Multiple Sections with a Single Function

How to toggle the display of a div by its id using index in Javascript

What is the best way to ensure an image is shown in full screen exclusively on mobile devices?

conceal the bootstrap navigation bar while the page is being

How can I ensure the button remains disabled until all inputs are completed in Redux form?

Event that signifies a change in the global state of the Angular 2 router

Tips for triggering an event from a function instead of the window

What are the steps to fix the "Invariant Violation" issue that is linked to the redux store?

``How can I effectively handle and display Angular JSON text in an alert message?

Pass JS POST request data as body parameters

Why is my HTML image stored in the database not showing up in TCPDF?

Puppeteer throwing an error when querying selectors cannot be done (TypeError: selector.startsWith is not a supported function)

What is the best way to retrieve the value of the "Observer" object?

Exploring the proper syntax of the reduce() method in JavaScript

What steps are involved in incorporating watchify into my gulp file?

The jQuery panel slider magically appears when you click the button, but refuses to disappear

Display/conceal within a jQuery fixed navigation bar (center-aligned)

What is the best way to assign a value to process.env within an npm script?