2017-01-03 70 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> 
...