2017-01-03 12 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> 

私は、以下のURLのいずれかのように達成しようとしています。

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

上記のコードはGoogleから取得しましたが、私は同じ行の上で同じことを達成しようとしています。いくつかのアイデアを取るために

+0

あなたの質問はc#ではなくasp.netです。 「スライダの内側にレイアウトを設定する方法」について - すべてのコードをhttps://jsbin.com/hofopiyiju/edit?html,outputにコピーすると、そこにはどんな問題がありますか?スライダーとは? – Alex

+0

私はすでにリピーターを使用して上記の質問では、私はリピーターがasp.netの下に来ることを知っていると思う、私はhtmlとjのクエリを考えることを理解したいと思っているので、これらを投稿した理由は、 。私が使用しているもののためにそれを達成する必要がある2つのリンクを上記の問題に既に挙げてください。あなたが答えたくない場合は、混乱しないよう投票してください。 @ 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="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> 

として代わりリピータ<div class="smallbox">...</div>の追加、

<div class="subbox"> 
    <a href="#"><img alt="" src="{...}.jpg" /></a> 
</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> 
... 
関連する問題