Images showing in the images area

Reply

Member

17 Points

Images showing in the images area

Dec 08, 2018 04:42 AM|Jessy|LINK

Hi expert, I used the bootstrap framework. In the category page, there are checkbox underneath the image, when the users check the box, the image will be added to the bottom image area at the bottom where the maxim of 4 images can be added. I have problems as below:

1. It works perfectly here if the image is listed individually.

 <div class="col-sm-4 col-md-3">
          <div class="thumbnail">
           
 <div class="thumbnail-img">
              <img src="images/1.jpg" width="150" height="150" class="img-p1">
            </div>
           
              <h3>Product 1</h3>
              <p>10 $</p>
              <p><input type="checkbox" class="p1"> Compare Product
              </p>
            </div>
          </div>


But if apply it to the datalist as below, it does not work.

<asp:DataList ID="compare"
									           CellPadding="0"
                                               CellSpacing="0"
                                               RepeatDirection="Horizontal"
									           borderstyle= "none"
									           GridLines="None"
									           RepeatLayout="Table"
									           RepeatColumns="3"									          
									           ShowBorder="false"
									           runat="server" HeaderText="" HeaderStyle-BackColor="#fff" HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true">

                                   <ItemTemplate>
								   
	
 

<table>
      <tr>
		<td> <a href="products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
   
        <div class="thumbnail"> <div class="thumbnail-img"><img src="images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" class="img-p1"> </div></a>

</td>
	</tr>

 <tr><td><input type="checkbox" class="p1"> Compare Product</td></tr>

2. How to add the Compare link to the comparing area, which will be linked to the page with the four compared products. Click each product and then linked to the product page.

Reply

Brando ZWZ

Star

9831 Points

3120 Posts

Re: Images showing in the images area

Dec 10, 2018 01:08 PM|Brando ZWZ|LINK

Hi Jessy,

According to your description, I suggest you could try to use jquery to achieve your requirement.

You could bind change function to the checkbox, then you could get the image div according to the selected checkbox.

More details, you could refer to below codes:

<head runat="server">
    <script src="../Scripts/jquery-3.0.0.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <title></title>
    <script>
        $(function () {
              var img = [];
            $("input[type='checkbox']").change(function () {
              
                var a = $(this).parent().find('a').clone();
                if (img.length < 4) {
                    img.push(a);
                    $("#div1").append(a);
                } else
                {
                    alert("You have chosen more than 4 products")
                }
                 
            })
        })      

    </script>
</head>
<body>
    <form id="form1" runat="server">
            <h2>Image</h2>
              <asp:DataList ID="compare" runat="server">
                  <ItemTemplate>

                    <table>
                        <tr>
                            <td>                               
                           <div class="thumbnail"> 
                               <div class="thumbnail-img"> 
                               <a href="products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>" >
                            <img src="../images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" class="img-p1" width="100" height="100"></a>  <br /> 
                                 <input type="checkbox" > Compare Product
                            </div>                 
                           </div>

                            </td>
                        </tr>
    
                    </table>
                  </ItemTemplate>
              </asp:DataList>
        
            <h2>PRODUCT</h2>
           
          <div id="div1" class="thumbnail">
           
 <div class="thumbnail-img">
           
            </div> 
               </div>    
         
       
   
    </form>
    
</body>
</html>

Code-behind:

protected void Page_Load(object sender, EventArgs e)
        {
            string sql = "select idProduct from bootstrap";
            this.compare.DataSource = SqlHelper.ExecuteDataTable(sql);
            compare.DataBind();//Bind datalist to Database

        }
products.aspx.cs:
 protected void Page_Load(object sender, EventArgs e)
        {
            string s = Request.QueryString["id"];
            Response.Write("this is " + s+"Image");
        }

Result:

Best Regards,

Brando

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

Jessy

Member

17 Points

490 Posts

Re: Images showing in the images area

Dec 11, 2018 11:53 PM|Jessy|LINK

Thank you! Now the message pops up if checked more than 4 checkboxes, but there were no images added at the bottom area.

Could you give the hyperlink for <script src="../Scripts/jquery-3.0.0.js"></script> ?

Could you convert the followig to vb? Thank you!

  {
            string s = Request.QueryString["id"];
            Response.Write("this is " + s+"Image");

Reply

Brando ZWZ

Star

9831 Points

3120 Posts

Re: Images showing in the images area

Dec 12, 2018 06:21 AM|Brando ZWZ|LINK

Hi Jessy,

Jessy
Thank you! Now the message pops up if checked more than 4 checkboxes, but there were no images added at the bottom area.

As you see, I add the image div into the "$("#div1")" on my page and I don't add the compare datalist as your codes.

If you want to add the image into the compare datalist as your codes, you should modify the "$("#div1")" to "$("#compare")".

Like below:

    <script>
        $(function () {
              var img = [];
            $("input[type='checkbox']").change(function () {
              
                var a = $(this).parent().find('a').clone();
                if (img.length < 4) {
                    img.push(a);
                    $("#compare").append(a);
                } else
                {
                    alert("You have chosen more than 4 products")
                }
                 
            })
        })      

    </script>

Jessy

Could you give the hyperlink for <script
src="../Scripts/jquery-3.0.0.js"></script> ?

This is general jquery libaray, you could replace it with the "https://code.jquery.com/jquery-3.3.1.js".

Jessy

Could you convert the followig to vb? Thank you!
  {
            string s = Request.QueryString["id"];
            Response.Write("this is " + s+"Image");

Of course,

This code is the image hyperlink redirect page which used to show the image id.

VB.Net Code:

    Dim s As String = Request.QueryString("id")
    Response.Write("this is " & s & "Image")

Best Regards,

Brando

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

Jessy

Member

17 Points

490 Posts

Re: Images showing in the images area

Dec 12, 2018 11:49 PM|Jessy|LINK

Thank you BZ! Now it is working. But I still have the following issues.

1 Now when I have three repeat columns and starting from second check box, and when the check one box is checked, the second column starts moving one column to the right. Then checks another checkbox, it moves to the right again per the coding.

<asp:DataList ID="compare"
									           CellPadding="0"
                                               CellSpacing="0"
                                               RepeatDirection="Horizontal"
									           borderstyle= "none"
									           GridLines="None"
									           RepeatLayout="Table"
									           RepeatColumns="3"									          
									           ShowBorder="false"
									           runat="server" HeaderText="" HeaderStyle-BackColor="#fff" HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true">

                                  
                  <ItemTemplate>

2. Before the checkbox is checked, the comparing area is hidden. When user checks the checkbox, the comparing area slides up. Is there any way to do this?

Reply

Brando ZWZ

Star

9831 Points

3120 Posts

Re: Images showing in the images area

Dec 13, 2018 12:20 AM|Brando ZWZ|LINK

Hi Jessy,

Jessy
1 Now when I have three repeat columns and starting from second check box, and when the check one box is checked, the second column starts moving one column to the right. Then checks another checkbox, it moves to the right again per the coding.

Since I don't see your whole codes, I couldn't understand why your column moves to the right.

Could you please show the codes you have used now related with the image area? e.g. Which codes is used to select the image checkbox? Which codes is used to show the compare image?

Best Regards,

Brando

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

Jessy

Member

17 Points

490 Posts

Re: Images showing in the images area

Dec 13, 2018 06:56 PM|Jessy|LINK

Here is the coding.

<div runat="server" ID="lblMessage">
			 </div>
 <asp:DataList ID="dg1"
									           
      RepeatDirection="Horizontal
       RepeatLayout="Table"
       RepeatColumns="
       runat="server">                                  
                  <ItemTemplate>

                    <table>
                        <tr>
                            <td>                               
                           <div class="thumbnail"> 
                               <div class="thumbnail-img"> 
                               <a href="products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>" >
                            <img src="images/small/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" class="img-p1"></a>  <br /> 
                                 <input type="checkbox" > Compare Product
                            </div>                 
                           </div>

                            </td>
                        </tr>
    
                    </table>
                  </ItemTemplate>
              </asp:DataList>

Reply

Jessy

Member

17 Points

490 Posts

Re: Images showing in the images area

Dec 14, 2018 04:39 AM|Jessy|LINK

1, The coding I posted above has some issues. After first checkbox is checked, the second column moved to the right every time when the checkbox is checked.

2. If there are too many products in the page, the page will be very long. So when the checkbox is checked and when the images are added to the comparing box at the bottom, they can barely be seen unless scroll all the way to the bottom. So I want to add the slide up and down box at the bottom of the page. When checkbox is checked, the comparing box will slide up. When all the four check boxes are unchecked, the comparing box will slide down. I have one problem now. The comparing box will slide and down, but the comparing box is empty and no image is added even the checkbox is checked. Below is the JavaScript

<script> 
 
 
 $(function() {
  $('body').on('change', 'input:checkbox', function() {
    var elm_class = $(this).attr('class');

    if (this.checked) {
      $('#compare-box-products').slideDown();
      $('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
    } else {
      $('.compare-image-container .img-' + elm_class).replaceWith('<div class="empty-border"> </div>');
    }

    if ($('input:checkbox:checked').length === 0) {
      $('#compare-box-products').slideUp();
    }
  });
})
 
 </script>

Below is the coding for the datalist. Please advise how to fix the coding in order to add the image to the comparing box. I used two files: jquery.min.js and bootstrap.min.css.

Or based on BZ's coding, add the slide up and down feature. Thank you!

<asp:DataList ID="compare"
									           CellPadding="0"
                                               CellSpacing="0"
                                               RepeatDirection="Horizontal"
									           borderstyle= "none"
									           GridLines="None"
									           RepeatLayout="Table"
									           RepeatColumns="3"									          
									           ShowBorder="false"
									           runat="server" HeaderText="" HeaderStyle-BackColor="#fff" HeaderStyle-ForeColor="#FFFFFF" HeaderStyle-Font-Bold="true">

                                   <ItemTemplate>
								   
				

 


<table>

      <tr>
		<td>
        
        
        
        
        
        
        
        <a href="<%=LINK_DOMAIN%>products.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>">
<img style=" border: 1px solid gray;" src="images/small/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg" alt="" /></a> 
       
          
  
</td></tr>
<tr>
		<td><%# DataBinder.Eval(Container.DataItem, "productname") %>	</td>
	</tr>  
<div class="img-p"><div class="p"><input type="checkbox">compare</div></div>	
</table>
 
									       
					          </ItemTemplate>
									
</asp:DataList>

Images showing in the images area RSS

7 replies

Shortcuts

Related Links

Images showing in the images area

Re: Images showing in the images area

Re: Images showing in the images area

Re: Images showing in the images area

Jessy

Jessy

Jessy

Re: Images showing in the images area

Re: Images showing in the images area

Jessy

Re: Images showing in the images area

Re: Images showing in the images area