Question

I’m a bit stuck on this – I am using a WordPress shortcode with a modal overlay plugin to insert multiple overlays into the content editor. However, I’m trying not to repeat my jQuery code multiple times for each ID.

As you can see in the shortcode I can set the ID of the overlay in WordPress’s editor like so:

Shortcode

[osu_overlay linktext="Text for link" oid="1"] ... content for overlay ... [/osu_overlay]

This creates the following HTML markup:

HTML

<a id="overlaylink-1" class="overlaybox" rel="overlaybox-1" href="javascript:void(0);">Text for link</a>
<div id="overlaybox-1" class="overlaybox" style="display:none;"> ... content for overlay ...</div>

This is the jQuery I don’t want to have to repeat for each ID i.e. for overlaylink-1, overlaylink-2 etc.

jQuery

// Check if .overlaylink exists first
if($("#overlaylink-1").length == 0) {
    // #overlay-link-1 doesn't exist
} else {
    // Start overlay
    $('#overlaylink-1').click(function(){
        function dialogFadeIn() {
            dialogFadeIn.data.fadeIn('slow');
        }
        $("#overlaybox-1").modal({
            persist: true,
            onOpen: function(dialog) {
                dialog.overlay.fadeIn('medium', function () {
                    dialog.data.hide();
                    dialog.container.show()
                    dialog.data.fadeIn('medium');
                });
            }
        });
    });
}

Is there a way of writing the jQuery code above so that it accounts for all IDs i.e. ‘overlaylink-x’ and overlaybox-x’ where x is any number?

Thanks for any help

Osu

–*– EDIT –*–

Here’s the final jQuery code – I’ve updated the HTML and Shortcode as well to include rel=”” which is needed for this jQuery plugin code to work. Thanks to @DingoEatingFuzz for this solution (below).

New jQuery

// Check if .overlaylink exists first
if($(".overlaylink").length == 0) {
    // nada bc doesn't exist
} else {

    // Get Box to overlay from link rel
    var link = $('overlay-link-1'),
        box = $('#' + link.attr('rel'));

    // Plugin for showing overlay
    (function($) {
        $.fn.osuModal = function(options) { 
            // $.fn is the jQuery plugin object
            // make sure to loop in case the selector specified returns more than one object
            // make sure to return to support function chaining
            return this.each(function() {
                var $this = $(this);
                $this.click(function() {
                    function dialogFadeIn() {
                        dialogFadeIn.data.fadeIn('slow');
                    }
                    $('#' + $this.attr('rel')).modal({
                        persist: true,
                        onOpen: function(dialog) {
                            dialog.overlay.fadeIn('medium', function() {
                                dialog.data.hide();
                                dialog.container.show();
                                dialog.data.fadeIn('medium');
                            });
                        }
                    });
                }); // End '$this.click(function()'
            }); // End 'return this.each(function()'
        }
    })(jQuery);

    // Run the plugin
    $('.overlaylink').osuModal();

}

WP Shortcode PHP

This is in case anyone wants to do the same in WordPress (you place this in your functions.php file):

// Shortcode for overlays
function osu_overlay($atts, $content = null) {
    extract(shortcode_atts(array('linktext' => '#', 'oid' => '#'), $atts));
    return '<a class="overlaylink" id="overlaylink-' . $oid . '" rel="overlaybox-' . $oid . '" href="javascript:void(0);">' . $linktext . '</a><div class="overlaybox" id="overlaybox-' . $oid . '" style="display:none;">' . do_shortcode($content) . '</div>';
}
add_shortcode('osu_overlay', 'osu_overlay');

Answer 1

Although there are ways to do what you are asking, I think you are creating a problem for yourself that can be avoided with different markup.

I would reference the div in the a tag like this:

<a href='#' id='overlay-link-1' rel='overlaybox-1'>Text For Link</a>

This way, the selector for the box can be derived from the link.

var link = $('overlay-link-1'),
    box = $('#' + link.attr('rel'))
;

Now id of the div and the id and rel of the anchor tag aren’t important, as long as they match. The last step is to abstract the modal feature into a plugin for a simple interface.

(function($) {
    $.fn.osuModal = function(options) { // $.fn is the jQuery plugin object
        // make sure to loop in case the selector specified returns more than one object
        // make sure to return to support function chaining
        return this.each(function() {
            var $this = $(this);
            $this.click(function() {
                function dialogFadeIn() {
                    dialogFadeIn.data.fadeIn('slow');
                }
                $('#' + $this.attr('rel')).modal({
                    persist: true,
                    onOpen: function(dialog) {
                        dialog.overlay.fadeIn('medium', function() {
                            dialog.data.hide();
                            dialog.container.show();
                            dialog.data.fadeIn('medium');
                        });
                    }
                });
            }
        }
})(jQuery);

Lastly, call the modals however you feel like.

$('.generic-class-for-all-modals').osuModal();
$('#specific-modal').osuModal();
$('#generated-modal-1').osuModal();
$('#generated-modal-1 #generated-modal-2').osuModal();