Additional Data Attributes

[badrobotbrain]

This isn't really an issue, more of a question. I'd like to add a headline and description to .superbox-show. How would you go about registering more data attributes in the js?

To be more specific, I've added "data-description" that holds this information in the img tag after "data-img" in the html. I'm trying to sort out what I need to add to the jquery.superbox.js to get this information to display in div.superbox-show along with img.superbox-current-img.

Any assistance is be greatly appreciated.

[seyDoggy]

You'd just need to grab the data and propagate (or create) some html with it.

[badrobotbrain]

I've managed to add a container (sbDescription) to div.superbox-show in the declarations and methods section of the js

        var sbIsIconShown = false,
            sbIsNavReady = false,
            sbShow = $('<div class="superbox-show"/>'),
            sbImg = $('<img src="../wp-content/themes/snitilycarr2013/img/ajax-loader.gif" class="superbox-current-img"/>'),
            sbDescription = $('<div id="bio-content">'),
            sbClose = $('<a href="#" class="superbox-close"><i class="icon-remove-sign"></i></a>'),
            sbPrev = $('<a href="#" class="superbox-prev"><i class="icon-circle-arrow-left"></i></a>'),
            sbNext = $('<a href="#" class="superbox-next"><i class="icon-circle-arrow-right"></i></a>'),
            sbFloat = $('<div class="superbox-float"/>'),
            sbList = this.find('>div'),
            sbList8 = this.find('>div:nth-child(8n)'),
            sbList6 = this.find('>div:nth-child(6n)'),
            sbList4 = this.find('>div:nth-child(4n)'),
            sbList2 = this.find('>div:nth-child(2n)'),
            sbWrapper = this;

                    if (type === 'A') {
                        sbShow.append(sbImg).append(sbDescription).append(sbClose).append(sbPrev).append(sbNext).insertAfter(elem.nextAll('.superbox-last:first'));
                    } else {
                        sbShow.append(sbImg).append(sbDescription).append(sbClose).insertAfter(elem);
                    }

Which renders the container on screen. And the data is in the image. The bit that I'm having trouble with is grabbing that data from the image and putting it into the container that sbDescription renders.

As you can probably tell, I am a jQuery novice, really I'm more of a design/front-end guy. I've tried working out this solution with a couple other plugins (that Codrops one for instance) but your solution is the slickest by far, which is why I'm stoked to get it working.

[seyDoggy]

So your image would likely need to contain a data-desc, like this:

<img src="img/superbox/superbox2-thumb-7.jpg"
data-img="img/superbox/superbox2-full-7.jpg" data-desc="This is my
description for this image" alt="">

Then somewhere (like your own method), write the inner HTML of sbDescription using the jQueries .data(), something like this:

sbDescription.html(elem.data('desc'));

Where elem refers to the current selected image.

[badrobotbrain]

This makes sense on a high level, but I'm flummoxed as to where/how I should write that method. I can see where you wrote the HTML for the image. Would this be done similarly? I tried and biffed it a lot of ways that seemed to make sense to me, but nothing quite worked.

[seyDoggy]

If you have a fork that I can look at I can maybe take a peek under the hood.

[badrobotbrain]

I will try to set one up. I'm new to this whole Github scene.

On Wed, Apr 16, 2014 at 12:21 PM, Adam Merrifield [email protected]:

If you have a fork that I can look at I can maybe take a peek under the hood.

Reply to this email directly or view it on GitHubhttps://github.com/seyDoggy/superbox/issues/5#issuecomment-40626599 .

Matt Bryant

9 out of 10 people agree, he's a pretty swell guy. Why not hit him up on Twitter @badrobotbrain

[badrobotbrain]

I forked the project over at https://github.com/badrobotbrain/superbox I hope I didn't bork something in the process.

[NimbleHost]

@badrobotbrain Add this line of code to the query.superbox.js file, in the revealImage function, after line 221:

sbWrapper.find('.superbox-show #bio-content').html(elem.find('img').data('desc')).animate({opacity:1},750);

That takes the code inside the images data-desc attribute and inserts it into the #bio-content element you created for the image description.

There are likely other/better ways to do this, but this should at least get things working. I'll submit a similar pull request to @seyDoggy's repo for this later, when I get the time to do so.

[badrobotbrain]

That did the trick. Thank you for the assist.

[badrobotbrain]

@NimbleHost I don't suppose you could tell me what to change to make the height of div.superbox-show based on the content instead of the height of the image?