使用lightbox和asp.net

-1

我正在建設一個網站，我試圖用lightbox來放大顯示照片。我無法對齊.aspx內容頁面的圖像。我也在使用母版頁，所以我想知道是否需要將所有的燈箱信息放在母版頁上，或者我是否應該將它們放在內容頁面上。使用lightbox和asp.net

當我將所有圖像放在內容頁面上時，它們會重疊在一起。這裏是我的母版頁代碼：

<%@ 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>

任何幫助將不勝感激！謝謝！！

來源

2014-05-04 KrisRedHead

這是一個鏈接，向您展示如何使用簡單的CSS創建燈箱效果。嘗試將您的圖像放在某種表格中，並創建一個邊距或緩衝區，以避免溢出。

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

來源

2014-05-22 05:55:46 Blairg23

嘗試

.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>

來源

2015-07-22 10:07:19 Maludasek

使用lightbox和asp.net

回答

相關問題