Question

我正在建立一个网站，我正在尝试使用灯箱以放大的形式显示照片。我无法在.aspx内容页面的形式上对齐图像。我也在使用母版页，所以我想知道是否需要将所有灯箱信息放在母版页上，或者我是否应该将它们放在内容页面上。

当我将所有图像放在内容页面上时，它们会重叠在另一个上面。这是我的MASTER PAGE代码：

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Default.master" 
Inherits="MadelinesFarm._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Madeline's Farm</title>
<script type="text/javascript" src="Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="Scripts/lightbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
<script type="text/javascript">
    $(function () {
        $('#images a').lightBox();
    });
</script>

</head>
<body>
<form id="form1" runat="server">
<div align="center">
<br />
<p align="center">

        <asp:ImageMap ID="ImageMap1" runat="server" AlternateText="Madeline's Farm" 
            DescriptionUrl="~/Default.aspx" Height="80px" HotSpotMode="Navigate" 
            ImageUrl="~/Images/title.png" Width="625px" 
            ToolTip="Madeline's Farm Homepage">
            <asp:RectangleHotSpot HotSpotMode="Navigate" 
                NavigateUrl="Default.aspx" Target="_parent" Right="625" Top="80" />
        </asp:ImageMap>
&nbsp;<br />
</p>
<hr />
<p align="center">

        <asp:Button ID="Button7" runat="server" BackColor="#CC9900" BorderColor="Black" 
            Font-Bold="True" Font-Size="Medium" Text="Yearlings" Width="125px" 
            PostBackUrl="~/Yearlings.aspx" />
        &nbsp;
        <asp:Button ID="Button8" runat="server" BackColor="#CC9900" BorderColor="Black" 
            Font-Bold="True" Font-Size="Medium" Text="Foal Arrivals" Width="125px" 
            PostBackUrl="~/FoalArrivals.aspx" />
        &nbsp;
        <asp:Button ID="Button9" runat="server" BackColor="#CC9900" BorderColor="Black" 
            Font-Bold="True" Font-Size="Medium" Text="Photo Gallery" Width="125px" 
            PostBackUrl="~/PhotoGallery.aspx" />
        &nbsp;
        <asp:Button ID="Button10" runat="server" BackColor="#CC9900" 
            BorderColor="Black" Font-Bold="True" Font-Size="Medium" Text="Directions" 
            Width="125px" PostBackUrl="~/Directions.aspx" />
        &nbsp;
        <asp:Button ID="Button11" runat="server" BackColor="#CC9900" 
            BorderColor="Black" Font-Bold="True" Font-Size="Medium" Text="Contact Us" 
            Width="125px" PostBackUrl="~/ContactUs.aspx" />

</p>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

    </asp:ContentPlaceHolder>
<hr />

    </form>

</body>
</html>

这是我的内容页代码：

<%@ Page Title="" Language="vb" AutoEventWireup="false"   
MasterPageFile="~/Default.Master" CodeBehind="PhotoGallery.aspx.vb" 
Inherits="MadelinesFarm.WebForm4" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div id="images">
<a href="Images/FlagPole.jpg" class="lightbox" rel="group">
<img src="Images/FlagPole.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/BirthingBarn.jpg" class="lightbox" rel="group">
<img src="Images/BirthingBarn.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/FarmMares.jpg" class="lightbox" rel="group">
<img src="Images/FarmMares.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/BigBoy.jpg" class="lightbox" rel="group">
<img src="Images/BigBoy.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/BigBoy2.jpg" class="lightbox" rel="group">
<img src="Images/BigBoy2.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/BigBoy3.jpg" class="lightbox" rel="group">
<img src="Images/BigBoy3.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/BigBoy4.jpg" class="lightbox" rel="group">
<img src="Images/BigBoy4.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/BigBoy5.jpg" class="lightbox" rel="group">
<img src="Images/BigBoy5.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/BigBoy6.jpg" class="lightbox" rel="group">
<img src="Images/BigBoy6.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/BigBoy7.jpg" class="lightbox" rel="group">
<img src="Images/BigBoy7.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/BigBoy8.jpg" class="lightbox" rel="group">
<img src="Images/BigBoy8.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/Desire.jpg" class="lightbox" rel="group">
<img src="Images/Desire.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/Desire2.jpg" class="lightbox" rel="group">
<img src="Images/Desire2.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/Desire3.jpg" class="lightbox" rel="group">
<img src="Images/Desire3.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/DSC_0643.jpg" class="lightbox" rel="group">
<img src="Images/DSC_0643.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/DSC_0644.jpg" class="lightbox" rel="group">
<img src="Images/DSC_0644.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/DSC_0646.jpg" class="lightbox" rel="group">
<img src="Images/DSC_0646.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/DSC_0648.jpg" class="lightbox" rel="group">
<img src="Images/DSC_0648.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/DSC_0655.jpg" class="lightbox" rel="group">
<img src="Images/DSC_0655.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/MadelinesBigBoy.jpg" class="lightbox" rel="group">
<img src="Images/MadelinesBigBoy.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/Mares2.jpg" class="lightbox" rel="group">
<img src="Images/Mares2.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/Mares3.jpg" class="lightbox" rel="group">
<img src="Images/Mares3.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/Mares4.jpg" class="lightbox" rel="group">
<img src="Images/Mares4.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/Mares5.jpg" class="lightbox" rel="group">
<img src="Images/Mares5.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/Ranger.jpg" class="lightbox" rel="group">
<img src="Images/Ranger.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/Ranger2.jpg" class="lightbox" rel="group">
<img src="Images/Ranger2.jpg" width="150" height="150" alt="" />
</a>
<a href="Images/RittersDragon.jpg" class="lightbox" rel="group">
<img src="Images/RittersDragon.jpg" width="150" height="150" alt="" />
</a>

</div>


</asp:Content>

任何帮助将不胜感激!!谢谢!!

Answer 1

这是一个链接，向您展示如何使用简单的CSS创建灯箱效果。尝试将您的图像放在某种表格中并创建边距或缓冲区，以免它们溢出。

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

Answer 2

尝试

.img_container{
/*position: relative;
text-align: center;
width: 180px; height: 100px; margin-right: 10px;*/
display: table-cell;
height: 100px;
margin-right: 10px;
text-align: center;
width: 180px;}

.imgdivbox a {
    width: 190px;
}

和

<div class="imgdivbox">
    <div class="img_container">
        <a title="Your_Title" href="Link2pic1.JPG" data-lightbox="container_name">
        <img src="Link2pic1.JPG" data-lightbox="container_name" /></a>
    </div>
    <div class="img_container">
        <a title="Your_Title" href="Link2pic2.JPG" data-lightbox="container_name">
        <img src="Link2pic2.JPG" data-lightbox="container_name" /></a>
    </div>
</div>

在asp.net中使用lightbox

2 个答案: