Is it possible to invoke fancybox using a class selector?

Question

Is it possible to invoke fancybox using a class selector?

I'm having trouble using fancybox on an element with this code:

$(this).parent().parent().parent().find('.comments').fancybox();

Is it not feasible? Could it be because it's a class and not an id?

I have multiple rows of items, so assigning individual ids is not practical.

Any suggestions? Below is the complete JS code (show() functions properly, but fancybox() doesn't):

$(".action").click(function(e) {
        e.preventDefault();
        $(this).parent().parent().parent().find('.comments').show();
        return false;
    });

javascript jquery css fancybox

Answer 1

Answer №1

You seem to be approaching it incorrectly; consider trying the below approach:

$('.action').click(function(e){
    e.preventDefault();
    target = $(this).closest('.comments').html();
    $.fancybox({
        content: target
        // Additional Options
    });
    return false;
});

I trust this solution will be beneficial!

Answer 2

You seem to be approaching it incorrectly; consider trying the below approach:

$('.action').click(function(e){
    e.preventDefault();
    target = $(this).closest('.comments').html();
    $.fancybox({
        content: target
        // Additional Options
    });
    return false;
});

I trust this solution will be beneficial!

Answer 3

Answer №2

Using the .fancybox() function on an element will simply initialize fancybox. The most effective way to incorporate this depends on your specific HTML structure, which unfortunately was not provided.

Nevertheless, a possible solution is as follows:

$(".action").click(function(e) {
    e.preventDefault();

    var a = document.createElement('a');
    var jqA = $(a);

    jqA.fancybox({
        content: $(this).parent().parent().parent().find('.comments').html()
        // additional options can be included here
    });

    jqA.click();

    return false;
});

Answer 4

Using the .fancybox() function on an element will simply initialize fancybox. The most effective way to incorporate this depends on your specific HTML structure, which unfortunately was not provided.

Nevertheless, a possible solution is as follows:

$(".action").click(function(e) {
    e.preventDefault();

    var a = document.createElement('a');
    var jqA = $(a);

    jqA.fancybox({
        content: $(this).parent().parent().parent().find('.comments').html()
        // additional options can be included here
    });

    jqA.click();

    return false;
});

Answer 5

Answer №3

simply utilize

$(this).closest('.remarks').fancybox();

beyond the scope of click functions.

Answer 6

simply utilize

$(this).closest('.remarks').fancybox();

beyond the scope of click functions.

Is it possible to invoke fancybox using a class selector?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to present sorted items on a user interface?

A guide to accessing a prop from a child component in ReactJS

Why is it that the value of "json_encode( $custom_query['query_vars']" is null?

Using C# Selenium WebDriver to interact with JavaScriptExecutor for handling prompt windows

I'm experiencing difficulties with JS on my website. Details are provided below – any suggestions on how to resolve this issue

What is the best way to implement data validation for various input fields using JavaScript with a single function?

What steps can I take to ensure my header appears perfectly aligned? (HTML/CSS)

Does the Parent Tag style override the child tag style when hovering?

Adding a type declaration to the severity property in React Alert - A guide to Typescript

Organizing files on a website for collaborative projects involving multiple team members

Creating a Python web scraper that utilizes Selenium and PhantomJS to extract DOM information

Is there a method to incorporate a scroll event into the ng-multi-selectdropdown, a npm package?

What steps can be taken to prevent the "unable to convert undefined to an object" error from occurring?

The key to successful filtering in Next.js with Hasura is timing - it's always a step

Is it possible to shift your phone to see various segments of the spherical panorama?

Ensure that the form is submitted when a checkbox is clicked, while also maintaining the native browser

What is the most effective way to showcase a variety of random styles for various text elements within a single webpage?

Gathering information from the server once it has completed its processing phase

Having difficulty formatting text alignment using CSS

Unable to play video using the play() method in Video.js player instance