Using jQuery to Pass an Index Value to a Shadowbox.js Gallery

I ran into a bit of a hair-pulling incident recently and I really couldn't find any help on the web with this one. So I thought I'd share my frustration and the solution I came up with in case anyone else runs into a similar problem ... or heck, maybe you've got a better solution for me. In short, I needed to be able to pass an index value to Shadowbox.js when a gallery was launched so that it would begin at the desired position. However, I personally find it more interesting to understand the evoution of the problem and the eventual solution. If you're not like me, feel free to jump down to the jQuery and HTML code below.

The Problem Challenge

Well, this all started out when one of my clients wanted one of those fancy-dancy "hover-over-a-group-of-thumbnails-and-swap-a-medium-sized-image" thing-a-ma-bobs. Trust me, this was not the challenge ... using a few lines of jQuery and fancy-dancy-be-done.

Then, after looking things over a bit, the client wanted to be able to click on the thumbnail and open a modal window of the original, much larger, image. Again, no worries ... using a bit of Shadowbox.js magic, and client-be-happy.

Finally, after reviewing my jQuery/Shadowbox/programming magic, the client was happy ... but they wanted one more thing ... to be able to click on the medium-sized image and have it launch a modal window of the original, much larger, image too. So, after a little extra thought and tweaking around, I got it working ... well, sort of.

Here's the Deal

Everything worked just fine except for the fact that if I enabled the 'continuous' attribute so that people could click "Next" and "Previous" links, something odd occurred.

If I clicked a thumbnail, the Shadowbox opened and did its thing as expected. If there were four (4) image thumbnails, then when the modal window opened, the "Next" and "Previous" links would cycle through four (4) images. But when I clicked the medium-sized image, the larger version of the image would appear twice in the modal window for a total of five (5) images.

Anyway, I realized fairly quickly that by default, Shadowbox creates a cached array of things such as all links with a 'rel' attribute of 'shadowbox' when the page loads. You can easily override this feature in the Shadowbox init() method by setting the 'skipSetup' attribute to true. But that's not what I really needed, or wanted, to do. I already had the thumbnails working and just wanted to get the 'Medium' sized image to also open the Shadowbox.

The My Solution

Ultimately, I needed a way to keep track of the index of each Shadowbox link element so that I could use it when calling a Shadowbox function I hadn't used before called "" I knew there just had to be a way of passing the index value to Shadowbox so that way when the modal window would open, it would just cue up to the cached index in Shadowbox.

So I created a custom attribute for the "a" link of the thumbnail images called "idx" and since I was already outputting the thumbnails from a query, this was pretty easy to do. However, since I was using a ColdFusion loop to output an array of the images, I couldn't just use the index value of the loop since ColdFusion arrays start at 1 while just about every other programming language, including JavaScript, have their arrays start at zero (0). So for you ColdFusion peeps, just remember you'll want to add your own "counter" variable that starts at zero and then increment it at the end of each iteration of the loop.

Once I had an attribute I could access using jQuery, I knew I was in business. The next thing I needed to find out was how to pass this index value to Shadowbox. Again, nothing on the web helped me out here. I did stumble across someone's post in the Shadowbox forum about how they modified the source code to accommodate something like this, but I chose not to go that route. In addition, this was a site using Mura CMS and I really didn't want to make any alterations to any included third-party code if I really didn't have too.

After studying the Shadowbox source code for a bit, I found this line of code in the method (around line 2122):

// is it a link?
    if(typeof obj.shadowboxCacheKey == 'undefined' || typeof cache[obj.shadowboxCacheKey] == 'undefined'){
        // link element that hasn't been set up before
        // create an object on-the-fly
        obj = this.buildCacheObj(obj, opts);
        // link element that has been set up before, get from cache
        obj = cache[obj.shadowboxCacheKey];

Notice the "shadowboxCacheKey" bit? Bingo! Now I knew all I needed to do was tweak my jQuery code to add this sweet little attribute to the link and then call the method along with some options to tell Shadowbox which gallery I wanted to use and at what index to begin! Can you tell I was a little excited?

So instead of continuing to bore the crap out of you, I'll just go ahead and show you what I came up with.

The jQuery

$(document).ready(function() {
        function() { // handlerIn
            var mediumImage = $(this).find('a').attr('medium');
            var imgLink = $(this).find('a').attr('href');
            // this holds the 'Shadowbox' cacheKey index value!
            var imgIndex = $(this).find('a').attr('idx');
            return false;

    $("#featuredImage >
a#swapLink").click(function(event) {
        // grab the 'Shadowbox' cacheKey index value
        var idx = $('#featuredImage').find('a').attr('idx');
        // now add the index key to the link so that when we call open, it knows this link already exists
        this.shadowboxCacheKey = idx;,{gallery:"products",continuous:true});



<div id="imageThumbs">
    <div class="imageThumb"><a rel="shadowbox[products];options={continuous:true};" idx="0" href="img1.jpg" title="" medium="img1-med.jpg"><img src="img1-thumb.jpg" alt="" width="70" height="70" /></a></div>
    <div class="imageThumb"><a rel="shadowbox[products];options={continuous:true};" idx="1" href="img2.jpg" title="" medium="img2-med.jpg"><img src="img2-thumb.jpg" alt="" width="70" height="70" /></a></div>
    <div class="imageThumb"><a rel="shadowbox[products];options={continuous:true};" idx="2" href="img3.jpg" title="" medium="img3-med.jpg"><img src="img3-thumb.jpg" alt="" width="70" height="70" /></a></div>
    <div class="imageThumb"><a rel="shadowbox[products];options={continuous:true};" idx="3" href="img4.jpg" title="" medium="img4-med.jpg"><img src="img4-thumb.jpg" alt="" width="70" height="70" /></a></div>
<div id="productImages">
    <div id="featuredImage"><a idx="0" id="swapLink" href="img1.jpg" ><img id="swapImg" src="img1-med.jpg" border="0" alt="" /></a></div>

That's it! I hope this helps someone else and saves some hair pulling. Enjoy!

Hello there, my tiresome effort to gain access to a worthy blog ends here! The information you did share is amazing, thanks for sharing!
# Posted By cheap essay writing service | 3/9/18 11:15 AM
Thank you for such a wonderful post!
# Posted By Tutuapp Android | 8/29/18 9:27 AM
Grasscutters are utilized in the patio nurseries and w utilize this in commonly. This yard cutter is helping us to evacuate or to short the length of grass which have a long length. It's tad simple to expel this grass by utilizing garden cutters then alternate things.
# Posted By Ritglas | 10/16/18 4:16 AM
Must be access the all setting of windows connection to audio device this is the use full for batter work on digital platform and start the full way of communication thanks.
# Posted By audio device windows 10 | 11/10/18 12:43 AM
The reference bullets alongside books demonstrate my own preference towards them; more indicators implies it was more good in my eyes. Thinking back on patterns, significantly more comical composition, journals, and books that drive me to take a gander at the world an alternate route are towards my top picks.
# Posted By | 11/22/18 2:50 AM
Searching so done all of the time we may additionally land up undertaking even greater matters with some distance much less attempt. Yoga has a way of strengthening our abilities throughout our entire lives.
# Posted By Pro Homework Help | 11/22/18 2:52 AM
He didn't like it because it had to be worn at all times, even in the bathroom. It had a motion sensor on it to, that was supposed to sound an alarm if you were still (not breathing) for too long.

# Posted By Get Homework Online | 12/12/18 6:59 AM
All the more normally mysterious capacities are passed as parameters to different capacities. Keep in mind that capacities are top of the line questions in JavaScript, they can be dealt with simply like some other-esteem. Capacities can be the estimation of a variable, be returned as qualities from different capacities, and as just referenced be passed as parameters.
# Posted By Assignment Doer | 12/26/18 5:07 AM
Hello I am michael, There is one information,Are your looking for someone to write your assignment, here are assignment helpers of Programming Assignment Help well efficient and capable of creating unique assignments for students.
# Posted By Assignment Help | 1/4/19 11:51 PM
Dollar General created its abbreviation, the letters “DG”, as a store brand for “inexpensive” household products sold through the Dollar General stores.
# Posted By dgcustomerfirst com | 12/19/19 7:06 AM
most of them are staggering and broad, the investigation for which eats up a tremendous portion of their critical time.
# Posted By online essay writing service | 7/3/20 7:42 AM
the language-related undertaking, our gathering is available 24*7 to decide it inside a stipulated time.
# Posted By computer technology topics | 7/24/20 12:17 AM
Quite great post. I just unearthed your blog and needed to state that I have truly delighted in perusing your blog entries. Any way I'll be buying in to your feed and I trust you post again soon. Huge much obliged for the valuable information.
# Posted By Riya | 9/24/20 5:31 AM
Your site is so pleasant and it gave me such a decent data. Glad to peruse on this point and information is really great.
# Posted By Kiya | 9/24/20 5:31 AM
The Knovva Academy understands the need for online high school classes, as is all set to combat the post-pandemic circumstances by the virtual model G20 summit.
# Posted By Best High School in USA | 12/23/20 12:25 PM
Through this post, I like that your tangling information in playing with the inside and out of the pieces was titanic.
I brief that here I notice issues I've been looking for. You have a talented now dazzling design for appearing.
# Posted By Isha Garg | 2/7/22 3:11 AM
# Posted By Isha Garg | 2/7/22 3:14 AM
Get spread out data. I thank you zeroed in on that.
Absolutely it will be goliath for my future endeavors. Should see a couple of remarkable presents on a nearby subject!.
# Posted By Isha Garg | 2/7/22 3:14 AM

© 2023, Stephen J. Withington, Jr.  |  BlogCFC was created by Raymond Camden – Version 5.9.004

Creative Commons License  |  This work is licensed under a Creative Commons Attribution 3.0 Unported License.  |  Hosted by