2017-01-03 39 views
-6

使用asp.net C#web表單的動態新聞紙張佈局。我正在嘗試實現動態的新聞紙,但沒有得到如何設置滑塊內的新聞紙張大小頁面佈局。而且當我點擊新聞報道的特定區域時,那麼該區域新聞應該使用中繼器控制或任何其他合適的控制來顯示在新頁面中以獲得這個要求。使用asp.net C#web表單的動態新聞紙張佈局

下面是我的所有代碼。

<head runat="server"> 
<title></title> 

</head> 
<body> 
<form id="form1" runat="server"> 
    <div id="Box"> 
     <div class="smallbox"> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Small0.jpg" /> 
       </a> 
      </div> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Small1.jpg" /> 
       </a> 
      </div> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Small2.jpg" /> 
       </a> 
      </div> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Test.jpg" /> 
       </a> 
      </div> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Test.jpg" /> 
       </a> 
      </div> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Test.jpg" /> 
       </a> 
      </div> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Test.jpg" /> 
       </a> 
      </div> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Test.jpg" /> 
       </a> 
      </div> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Test.jpg" /> 
       </a> 
      </div> 
      <div class="subbox"> 
       <a href="#"> 
        <img alt="" src="Test.jpg" /> 
       </a> 
      </div> 
     </div> 

     <div id="bigbox"> 
      <img id="BigImg" alt="" src="" /> 
     </div> 
     <div id="bomdiv"> 
      <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="arrow-left.jpg" OnClientClick="return LeftChange()" /> 
      <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="arrow-right.jpg" OnClientClick="return RightChange()" /> 
     </div> 
    </div> 
</form> 

我想實現像任何以下網址。

http://www.epaperoheraldo.in/

http://tribune.com.pk/epaper/

注:

大的圖像大小爲900 * 552。

小圖像尺寸爲165 * 150。

我的屏幕尺寸是1583px;

圖片名稱規則爲:Small0.jpg,Small1.jpg,Small2.jpg ......... Big0.jpg,Big1.jpg,Big2.jpg .......... ............

上面的代碼來自谷歌,但我試圖實現上面的任何行相同。

+0

你的問題既不是c#不是asp.net。關於「如何設置滑塊內佈局」 - 如果我將所有代碼複製到https://jsbin.com/hofopiyiju/edit?html,output - 那裏有什麼確切的問題?什麼是滑塊? – Alex

+0

我已經告訴過,在使用Repeater的上述問題中,我想你知道中繼器會在asp.net下,我之前嘗試瞭解我想要理解html和j查詢,所以爲什麼發佈這些,我的問題只是以動態。上面已經提到的問題提到了我需要實現的兩個環節,就像我使用的那樣,請建議不要混淆不要投票,如果你不想回答。 @ 2316116 3 – MMK

+0

你的問題目前還不清楚。您是否想使用Repeater控件在左側顯示圖像列表? – Alex

回答

0

對於採取一些想法,請檢查該代碼和內容片段...

window.onload = function() { 
 
     // show default image(Big image and small image) when first open 
 
     //eq(index) can get object through index 
 
     $(".smallbox .subbox").eq(0).trigger("click"); 
 
    } 
 
    //set a global variable index 
 
    var index; 
 
    $(function() { 
 
     //click small box can get this index and show the Big image with this index 
 
     $(".smallbox .subbox").click(function() { 
 
      $("#BigImg").attr("src", $(this).find("img").attr("data-big")); 
 
      $(".smallbox .subbox").removeClass("NewSty"); 
 
      $(this).addClass("NewSty"); 
 
      this.scrollIntoView(false); 
 
     }) 
 
    }); 
 
    function LeftChange() { 
 
     $(".NewSty").prev().trigger("click"); 
 
    } 
 
    function RightChange() { 
 
     $(".NewSty").next().trigger("click"); 
 
    }
* { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
::-webkit-scrollbar { 
 
    width: 10px; 
 
} 
 

 
    #Box { 
 
     height: 300px; 
 
     width: 600px; 
 
     border: 1px solid red; 
 
    } 
 

 
    .smallbox { 
 
     width: 100px; 
 
     height:100%; 
 
     border: 1px solid purple; 
 
     overflow-y: auto; 
 
     overflow-x: auto; 
 
     float:left; 
 
    } 
 

 
    .subbox { 
 
     border: 1px solid yellow; 
 
    } 
 
    .subbox img{width:100%; height:100%;} 
 

 
    #bigbox { 
 
     width: 300px; 
 
     height: 550px; 
 
     border: 1px solid black; 
 
     float:left; 
 
     margin: 10px; 
 
    } 
 

 
    #bomdiv { 
 
     width: 500px; 
 
     height: 100px; 
 
    } 
 

 
    #ImageButton2 { 
 
     margin-top: 10px; 
 
     margin-left: 150px; 
 
    } 
 

 
    .NewSty { 
 
    border : 2px solid blue; 
 
     /*box-shadow: 10px 10px 5px blue;*/ 
 
    } 
 

 
.newsArea{ 
 
    position:absolute; 
 
    text-decoration:none; 
 
    background-color: rgba(0,0,255,.1); 
 
} 
 

 
.newsArea:hover{ 
 
    background-color: rgba(0,0,255,.5); 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form1" runat="server"> 
 
    <div id="Box"> 
 
     <div class="smallbox"> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/> 
 
       </a> 
 
      </div> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/> 
 
       </a> 
 
      </div> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/> 
 
       </a> 
 
      </div> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/> 
 
       </a> 
 
      </div> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/> 
 
       </a> 
 
      </div> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/> 
 
       </a> 
 
      </div> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/> 
 
       </a> 
 
      </div> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/> 
 
       </a> 
 
      </div> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG" /> 
 
       </a> 
 
      </div> 
 
      <div class="subbox"> 
 
       <a href="#"> 
 
        <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/> 
 
       </a> 
 
      </div> 
 
     </div> 
 

 
     <a id="ImageButton1" style="float:left;margin-top:100px;background-color:yellow;" href="#" onclick="LeftChange()"><</a> 
 
     
 
     <div id="bigbox"> 
 
      <img id="BigImg" alt="" src="" style="width:100%;"/> 
 
     </div> 
 
      
 
     <a id="ImageButton2" style="float:left;margin-top:100px;background-color:yellow;" href="#" onclick="RightChange()">></a> 
 

 
    </div> 
 
     
 
     
 
     <!-- when Selected paper changed, this areas must refresh for selected page --> 
 
     
 
     <a class="newsArea" style="left:150px; top:100px; width:140px; height:120px;" 
 
       href="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG" target="_blank" onclick="alert('new page will open')">&nbsp;</a> 
 
     
 
     <a class="newsArea" style="left:300px; top:40px; width:70px; height:200px;" 
 
       href="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG" target="_blank" onclick="alert('new page will open')">&nbsp;</a>

+0

我的代碼和你的代碼邏輯有什麼區別? @Serhat MERCAN – MMK

+0

簡單的差異並不重要,但我想表明論壇網站或類似網站的工作方式。您必須使用服務器端代碼(asp.net)更改html代碼和JavaScript代碼。圖片來源太... –

+0

我檢查你的代碼是不是正常工作,請你可以嘗試使用asp.net web窗體你的代碼。 @Serhat MERCAN – MMK

0

與中繼器的代碼替換的HTML代碼的重複片段。

實施例:在左邊的列表包括多個項目,每個項目由

<div class="subbox"> 
    <a href="#"><img alt="" src="{...}.jpg" /></a> 
</div> 

即包裹,代替<div class="smallbox">...</div>添加中繼器作爲

<div class="smallbox"> 
<asp:Repeater ID="Repeater1" runat="server"> 
<ItemTemplate> 
    <div class="subbox"> 
     <a href="#"><img alt="" src="<%# Container.DataItem.ToString() %>" /></a> 
    </div> 
</ItemTemplate> 
</asp:Repeater> 
</div> 

和用於數據的代碼可能是

List<string> data = new List<string>() { "Small0.jpg", "Small1.jpg", "Small2.jpg" }; 
Repeater1.DataSource = data; 
Repeater1.DataBind(); 

這應該輸出相同的HTML代碼與不同的圖像

<div class="subbox"> 
    <a href="#"><img alt="" src="Small0.jpg" /></a> 
</div> 
<div class="subbox"> 
    <a href="#"><img alt="" src="Small1.jpg" /></a> 
</div> 
...