Home/ Questions/Q 8398357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T21:02:13+00:00

I am using the Featured Box Slider to create a couple galleries on my

  • 0

I am using the Featured Box Slider to create a couple galleries on my site but have run into an issue when running two galleries at the same time on the same page.

I have navigation setup on the gallery a simple Previous and Next button. But when I click next or previous it will operate only one gallery instead of operating for their respective gallery.

How do I fix this issue?

Here is the code:

JS

//Gallery 1 

jQuery(document).ready(function($j) {
gallery = $j("#transformed-aviation-gallery").featuredbox({
        width: 940,
        height: 400,
        slidesAnimation: "slide-left",
        startPositionOffsetX: 0,
        startPositionOffsetY: 0,
        slidesSpeed: "slow",
        hParts: 1,
        vParts: 6,
        blocksWaitInterval: 50,
        descriptionAnimation: "fade",
        descriptionSpeed: "slow",
        rotateInterval: 0,
        slidesReverseAnimation: false,
        slidesPattern: "random",
        previous: ".next",
        useFadeIn: true,
        pauseOnMouseHover: true
        });            
});

//Gallery 2
jQuery(document).ready(function($j) {
gallery = $j("#changed-aviation-gallery").featuredbox({
        width: 940,
        height: 400,
        slidesAnimation: "slide-left",
        startPositionOffsetX: 0,
        startPositionOffsetY: 0,
        slidesSpeed: "slow",
        hParts: 1,
        vParts: 6,
        blocksWaitInterval: 50,
        descriptionAnimation: "fade",
        descriptionSpeed: "slow",
        rotateInterval: 0,
        slidesReverseAnimation: false,
        slidesPattern: "random",
        previous: ".next",
        useFadeIn: true,
        pauseOnMouseHover: true
        });            
});

HTML

<div id="transformed-aviation">
  <div class="box-wrap">
   <div class="border">
    <div class="featuredbox-wrapper" id="transformed-aviation-gallery">
      <!-- Gallery Images --> 
</div>
</div>
<div  class="small img-center"> 
<a href="javascript: gallery.prev();">Previous</a>
 | 
<a href="#" id="back1" class="back">Back</a>
 | 
<a href="javascript: gallery.next();">Next</a>
</div>
</div>

<div id="changed-aviation">
  <div class="box-wrap">
   <div class="border">
    <div class="featuredbox-wrapper" id="changed-aviation-galleryy">
      <!-- Gallery Images --> 
</div>
</div>
<div  class="small img-center"> 
<a href="javascript: gallery.prev();">Previous</a>
 | 
<a href="#" id="back2" class="back">Back</a>
 | 
<a href="javascript: gallery.next();">Next</a>
</div>
</div>

I assume I need to identify which gallery the previous or next is supposed to be controlling but how do I do that?

Note: The last or 2nd gallery is the one that can move forward or backwards. The first gallery doesn’t do anything when clicking next or previous.

Please provide examples.

Thanks!

UPDATE

I attempted to add an iframe to the site to see if I could get the galleries to play nice and that completely broke the gallery.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I had to make a change to the gallery code: 

    //Gallery 1 

jQuery(document).ready(function($j) {
gallery1 = $j("#transformed-aviation-gallery").featuredbox({ //I added a 1 to gallery
        //gallery code
        });            
});

//Gallery 2
jQuery(document).ready(function($j) {
gallery2 = $j("#changed-aviation-gallery").featuredbox({ //I added a 2 to gallery
        //gallery code
        });            
});

    Then I had to change the links to associate with the correct gallery: 

    <!-- For Gallery 1 --> 
<div class="small img-center">
<a href="javascript: gallery1.prev();">Previous</a>
| 
<a href="javascript: gallery1.next();">Next</a>


<!-- For Gallery 2 --> 
<div class="small img-center">
<a href="javascript: gallery2.prev();">Previous</a>
| 
<a href="javascript: gallery2.next();">Next</a>
    • 0