[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1281
  • Last Modified:

Trouble with DataList and Lightbox or Colorbox to work with images

Hello All,
I am having trouble getting a datalist to use any of the lightbox or colorbox examples. I went as far as used the easy lightbox to work but it's not working either. What happens is that either JQuery or Javascript fire an exception that says: Microsoft JScript runtime error: Object doesn't support this property or method. What am I doing wrong????
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript" />
    <script src="Scripts/script.js" type="text/javascript"></script>
    
	
	
    <script type="text/javascript">

    </script>
    <div style="background-color: Gray; color: White;">
        <h1 style="color: White;">
            Photo Gallery</h1>
    </div>
    <div>
        Listing for the photo gallery.
        <asp:DataList runat="Server" ID="rptImages" RepeatColumns="4">
            <ItemTemplate>
                <asp:HyperLink runat="server" NavigateUrl='<%# Eval("FilePath") %>' Title='<%# Eval("FilePath") %>' 
                CssClass="lightbox">
                    <asp:Image runat="Server" 
                                ImageUrl='<%# Eval("FilePath") %>' 
                                Height="200"
                                Width="200" 
                                
                                 />
                </asp:HyperLink>
            </ItemTemplate>
        </asp:DataList>
    </div>
</asp:Content>

Open in new window

0
fishbowlstudios
Asked:
fishbowlstudios
  • 4
  • 4
1 Solution
 
Roman GhermanSenior Software EngineerCommented:
Hi,
The problem here is that you are using prototype library and jQuery library together which causes conflicts because of $ sign.

See this link to solve conflicts.

--------------------------
You can find me on: http://extremedev.blogspot.com
0
 
fishbowlstudiosAuthor Commented:
well I got suppressed the error but nothing happens when I click on the picture.
0
 
Roman GhermanSenior Software EngineerCommented:
Is there an online version which I can access?

-----------
You can find me on: http://extremedev.blogspot.com
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
fishbowlstudiosAuthor Commented:
I'm sorry, I got caught up with a few work projects that kept me away from this project.

No, there is not an online version currently but I can work on that in the next couple of days if you still want to help.
0
 
Roman GhermanSenior Software EngineerCommented:
Hi,

If it is possible to make an online version which I can access then great.
0
 
fishbowlstudiosAuthor Commented:
I've uploaded the changes to the website. You may view them at http://www.countrysidequail.com
0
 
Roman GhermanSenior Software EngineerCommented:
ok, as I was guessing it there is a conflict between lightbox and jquery. check this link:
http://api.jquery.com/jQuery.noConflict/


you may also use other photo gallery libraries like this one: http://leandrovieira.com/projects/jquery/lightbox/

but first try with noConflict.
0
 
fishbowlstudiosAuthor Commented:
I tried noconflict but I couldn't get it to work right. But I used the other photo gallery and it worked flawlessly. Thanks for you help!
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now