Revolutionary newspaper design utilizing asp.net's C# web forms

Question

Revolutionary newspaper design utilizing asp.net's C# web forms

Trying to create a dynamic newspaper layout using ASP.NET C# web form. Struggling to set the page layout size inside a slider and display specific news content on a new page when clicking on an area of the newspaper using Repeater or another suitable control.

Below is all of my code:

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

... (Code continues) ...

Attempting to achieve a layout similar to the following URLs:

Note:

Big image size is 900*552.

... (Additional notes) ...

The provided code was sourced from Google, but I'm aiming for a result similar to the examples referenced above.

css

Answer 1

Answer №1

To gain inspiration, review the following code snippets...

window.onload = function () {
        // display default image(Big image and small image) when first opened
        //eq(index) can retrieve object by index
        $(".smallbox .subbox").eq(0).trigger("click");
    }
    //set a global variable index
    var index;
    $(function () {
        //clicking on small box captures this index and displays 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>
  
            <!-- more code here -->

Answer 2

To gain inspiration, review the following code snippets...

window.onload = function () {
        // display default image(Big image and small image) when first opened
        //eq(index) can retrieve object by index
        $(".smallbox .subbox").eq(0).trigger("click");
    }
    //set a global variable index
    var index;
    $(function () {
        //clicking on small box captures this index and displays 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>
  
            <!-- more code here -->

Answer 3

Answer №2

Streamline your HTML code by using a Repeater.

For instance, if you have a list of items like this:

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

Instead of repeating

<div class="smallbox">...</div>

, you can utilize a Repeater:

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

You can then populate the Repeater with data like this:

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

By doing so, you can achieve the same output HTML code but with different images:

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

Answer 4

Streamline your HTML code by using a Repeater.

For instance, if you have a list of items like this:

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

Instead of repeating

<div class="smallbox">...</div>

, you can utilize a Repeater:

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

You can then populate the Repeater with data like this:

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

By doing so, you can achieve the same output HTML code but with different images:

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

Revolutionary newspaper design utilizing asp.net's C# web forms

Answer №1

Answer №2

Similar questions

Arrangement of elements across rows and columns in a grid pattern

Connect to dynamically generated div on separate page

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

Incorporating a technique for aligning text towards the right as the number of characters or digits expands

Guide on creating frozen columns in an Angular 2 table with the ability to scroll through multiple columns

Tips for updating the font color of BarMenu in Blazorise

What is the simplest way to shift an icon to the right in the header of an Expansion panel using Vuetify

Is it possible to incorporate a CSS3 transition into the styling of a list of images?

Bring to life the div that has been clicked

Tips for embedding HTML/CSS snippets in backticks when using TypeScript with AngularJS

Use radio buttons to enable switching between different data options within a dropdown menu

Switching the arrow direction in Bootstrap 4 menu toggles

Denied rendering of design due to incompatible MIME type

Introducing Bootstrap 5 with a sleek two-column layout that effortlessly allows text to wrap around captivating images

Leveraging the :checked state in CSS to trigger click actions

Can a single SVG file be referenced and reused multiple times in a project?

Move the focus to the previous input field by removing the key

Production environment poses a challenge as Rails 4 struggles to locate fonts

The background image doesn't extend to the bottom of the page due to the inability to utilize background-attachment

Transforming the style of a particular element within React using Array().fill().map's method