Fancybox jquery not working inside the emptydatatemplate of a gridview. May be since it's not loading with $(document).ready itself i.e, on page load

Question

0.00/5 (No votes)

See more:

I picked "Fancybox Jquery" from http://fancybox.net/howto but it is not working in one of my page. Actually, I aspire it to work like a Linkbutton ----> Gallery of images (Pop up) ----> Each of the image from Gallery in original size with navigation arrows on both sides (another Pop up)

But for me, after the Linkbutton click, gallery is opening with thumbnails fine. But after a thumbnail get clicked, images are not opening with navigation arrows. Opening just as an image redirection ie, opening as URL redirection one image for each click.

<script type="text/javascript">
        $(document).ready(function () {
            $("a.fancybox").fancybox();
        });

<asp:Panel ID="TourPoster" runat="server" Visible="false">
            <div class="Referral1">
                <table>
        <tr><th class="Title" style="text-align: center;">Sample Tournament Posters<asp:ImageButton runat="server" ImageUrl="~/StyleSheets/Images/CloseButton.png" ImageAlign="Right" OnClick="LBSampleTournPostersClose_Click" /></th></tr>
        <tr>
            <td>
                <a class="fancybox" rel="group" href="/Images/Samples/Sample1.jpg"><img src="/Images/Samples/Sample1.jpg" alt=""/></a>
                <a class="fancybox" rel="group" href="/Images/Samples/Sample2.jpg"><img src="/Images/Samples/Sample2.jpg" alt=""/></a>
                <a class="fancybox" rel="group" href="/Images/Samples/Sample2.png"><img src="/Images/Samples/Sample2.png" alt=""/></a>
                <a class="fancybox" rel="group" href="/Images/Samples/Sample3.jpg"><img src="/Images/Samples/Sample3.jpg" alt=""/></a>
                <a class="fancybox" rel="group" href="/Images/Samples/Sample4.jpg"><img src="/Images/Samples/Sample4.jpg" alt=""/></a>
            </td>
        </tr>
</table>
        </div>
</asp:Panel>

Is there any mistake with the code? I have even tried modifying inside

<script type="text/javascript">
        $(document).ready(function () {
            $("a.fancybox").fancybox();
 });

It's too not working. Kindly help

What I have tried:

I have even tried modifying inside

<script type="text/javascript">
$(document).ready(function () {
$("a.fancybox").fancybox();
});

but it doesn't affect a thing.

Posted 13-Sep-16 20:57pm

Bigprey

Updated 16-Sep-16 18:24pm

v7

Add a Solution

Comments

Vjay Y 14-Sep-16 7:10am

just go through the fancybox documentation and read and implement examples carefully

Bigprey 16-Sep-16 0:48am

I tried their documentation already and it's working fine in all my other pages except here.

I had the doubt that the problem might be due to the fact that the Panel is set to false while loading, so that $(document).ready(function () doesn't function properly. So, I tried

<asp:Panel ID="TourPoster" runat="server" style="visibility:hidden;">

-----------

protected void LBSampleTournPosters_Click(object sender, EventArgs e)
{
TourPoster.Style.Add("Visibility", "Visible");
}

But it's not activating the "Fancybox" too.

Even if I put <asp:Panel ID="TourPoster" runat="server" style="visibility:Visible;"> or simply <asp:Panel ID="TourPoster" runat="server">, the fancybox is not working...

Actually, this whole Panel is called from inside an Empty Data template of a gridview.

Will it be a concern? Thanks for your time mate and have a nice day ahead.

Karthik_Mahalingam 14-Sep-16 8:28am

getting any error in console window?

Bigprey 16-Sep-16 0:47am

No errors are shown.

I had the doubt that the problem might be due to the fact that the Panel is set to false while loading, so that $(document).ready(function () doesn't function properly. So, I tried

<asp:Panel ID="TourPoster" runat="server" style="visibility:hidden;">

-----------

protected void LBSampleTournPosters_Click(object sender, EventArgs e)
{
TourPoster.Style.Add("Visibility", "Visible");
}

But it's not activating the "Fancybox" too.

Even if I put <asp:Panel ID="TourPoster" runat="server" style="visibility:Visible;"> or simply <asp:Panel ID="TourPoster" runat="server">, the fancybox is not working...

Actually, this whole Panel is called from inside an Empty Data template of a gridview.

Will it be a concern? Thanks for your time mate and have a nice day ahead.

Karthik_Mahalingam 16-Sep-16 1:11am

which library?
url ?

Bigprey 16-Sep-16 2:02am

http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css

http://fancybox.net/

Karthik_Mahalingam 16-Sep-16 3:34am

ok i wil chk this library

Bigprey 16-Sep-16 4:45am

I guess, the library should be fine because it's working fine in the other pages of the same website... It's happening only here, may be, because of the Emptydatatemplate of the gridview or Jquery's inability to call the panel since it's not loading when $(document).ready

Similar issue is posted at http://stackoverflow.com/questions/17811844/gridview-filtering-wont-work-when-it-has-returned-empty

Thanks

ZurdoDev 14-Sep-16 16:00pm

1. First, make sure you are using valid DOCTYPE

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ZurdoDev · Answer 1 · 2016-09-14T10:05:00

Solution 1

Your panel is not visible. Setting Visible=false means that the control will not even be sent to the client. Therefore, your document.ready that use the jQuery selector of $("a.fancybox") will not find anything because they are not there.

You could instead do style='visibility: hidden;' on your panel and then it will be hidden in the browser but all the controls will still be in the html.

Posted 14-Sep-16 10:05am

ZurdoDev

Comments

Bigprey 15-Sep-16 1:12am

I also had the same doubt and have tried like

<asp:Panel ID="TourPoster" runat="server" style="visibility:hidden;">

-----------

protected void LBSampleTournPosters_Click(object sender, EventArgs e)
{
TourPoster.Style.Add("Visibility", "Visible");
}

But it's not activating the "Fancybox" too.

ZurdoDev 15-Sep-16 6:04am

Then you'll have to debug it and find out what is happening. Put a breakpoint in your document.ready() event and check what $("a.fancybox").length is.

Bigprey 15-Sep-16 7:20am

Even if I put <asp:Panel ID="TourPoster" runat="server" style="visibility:Visible;"> or simply <asp:Panel ID="TourPoster" runat="server">, the fancybox is not working...

Actually, this whole Panel is called from inside an Empty Data template of a gridview.

Similar issue is posted at http://stackoverflow.com/questions/17811844/gridview-filtering-wont-work-when-it-has-returned-empty

Will it be a concern? Thanks for your time mate and have a nice day ahead.