Home/ Questions/Q 3855672
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T17:48:43+00:00

I am new to programming especially jQuery. I am trying to use ColorBox to

  • 0

I am new to programming especially jQuery.

I am trying to use ColorBox to display photos from an album using the example from http://www.xdevsoftware.com/blog/post/Using-ColorBox-in-ASPNET.aspx The details of the photo are stored and retrived from a DB.

Everything works fine like the photos for the selected album display in the DataList, the problem is that when I click on a photo, instead of using coloBox to display the photo, it opens the actual photo e.g. localhost:3478/FPOS_v2/uploads/08012011080.JPG

Below is the .aspx code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="ColorBox/colorbox.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" /> 
    <script src="ColorBox/jquery.colorbox.js" type="text/javascript" />

    <script type="text/javascript">
        $(document).ready(function () {
            $("a[rel='example1']").colorbox();
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DataList runat="server" ID="dlColorBox" 
                    RepeatColumns="3" 
                    RepeatDirection="Horizontal">
        <ItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" 
                            NavigateUrl='<%# "~/uploads/"+Eval("OriginalFilePath") %>' 
                            rel="example1" 
                            Title='<%# Eval("FileName") %>'>
                    <asp:Image ID="Image1" runat="server" 
                            ImageUrl='<%# "~/uploads/"+Eval("ThumbFilePath") %>' 
                            Width="100" 
                            Height="100" 
                            BorderStyle="None" />
            </asp:HyperLink>
        </ItemTemplate>
    </asp:DataList>

    </div>
    </form>
</body>
</html>

Below is the vb.net code:

    Imports SqlHelper
Imports System.Data


Partial Class colorBoxDisplay
    Inherits System.Web.UI.Page

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        DAL.connectionstring = ConfigurationManager.ConnectionStrings("fpaConnectionString").ConnectionString
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        BuildDataSet()
    End Sub

    Private Sub BuildDataSet()
        Dim dataset As DataSet

        dataset = SqlHelper.ExecuteDataset(DAL.connectionstring, "fpa_SP_album_view_by_id_gridview", 34)

        dlColorBox.DataSource = dataset
        dlColorBox.DataBind()
    End Sub

Could someone please tell how to correct this? or to be able to display the photos within dlColorBox DataList using ColorBox?

So it is displays the photos within the selected album like Grouped Photo 1 example colorpowered.com/colorbox/core/example1/index.html

I am new to jQuery so could you please indicate how to make this work by changing the code as I have spent last 3 days looking at different examples on the internet.

Any help would be much appreciated 🙂

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check Colorbox javascript and css files loaded properyly. And check html output of your page.

    • 0