locked
Dispaly images RRS feed

  • Question

  • User-401818107 posted

    I have a page, where I want to display the images of the products. I do not want to store the images in the database, but in the folder.
    Currently I have a problem. Since some of the products have one or two images, and some of the products have more than 2. If the products have less than 5 images, the image folder which do not have 5 image will be displayed as X (no image). How to fix the coding below?  How to declare numberOfProductImages? Thank you!

           <ul id="carousel" class="jcarousel jcarousel-skin-tango">
       @for (int i = 1; i <= numberOfProductImages; i++)
       {
          <li><a href="#" rel="p1"><img src="images/<%=idProduct%>/<%=@i%>.jpg"></a></li>
       }
    </ul>
    

    Thursday, December 6, 2018 8:05 PM

Answers

  • User-401818107 posted

    Thank you! I will try it and let you know!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 10, 2018 5:33 AM

All replies

  • User475983607 posted

    Jessy

    I have a page, where I want to display the images of the products. I do not want to store the images in the database, but in the folder.
    Currently I have a problem. Since some of the products have one or two images, and some of the products have more than 2. If the products have less than 5 images, the image folder which do not have 5 image will be displayed as X (no image). How to fix the coding below?  How to declare numberOfProductImages? Thank you!

           <ul id="carousel" class="jcarousel jcarousel-skin-tango">
       @for (int i = 1; i <= numberOfProductImages; i++)
       {
          <li><a href="#" rel="p1"><img src="images/<%=idProduct%>/<%=@i%>.jpg"></a></li>
       }
    </ul>

    How do you currently find the product image count?  Count the number of files in the product Id folder?

    Thursday, December 6, 2018 8:08 PM
  • User-401818107 posted

    Base on the Idproduct. Below is my previous coding

     <ul id="carousel" class="jcarousel jcarousel-skin-tango">
    <li><a href="#" rel="p1"><img src="images/small/<%=idProduct%>/1.jpg" /></a></li>
    <li><a href="#" rel="p2"><img src="images/small/<%=idProduct%>/2.jpg" ></a></li>
    <li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/3.jpg" ></a></li>
      </ul>


    :

    Thursday, December 6, 2018 9:52 PM
  • User1724605321 posted

    HI Jessy ,

    Could you please explain more about that , how do you get the file account based on Idproduct?

    Best Regards,

    Nan Yu

    Friday, December 7, 2018 5:20 AM
  • User-401818107 posted

    The folder name is labeled by ID. If the idProduct is 3, the folder is 3. In folder 3  there are three images, and in folder 4, there are 2 images, but in folder 6 there are 7 images.  

    In the coding as below, the images for idproduct 3 and idproduct 4  will be displayed as X (no images) starting from image 4 and image 3 separately. How to modify the coding?  Thank you!

    ul id="carousel" class="jcarousel jcarousel-skin-tango">
    <li><a href="#" rel="p1"><img src="images/small/<%=idProduct%>/1.jpg" /></a></li>
    <li><a href="#" rel="p2"><img src="images/small/<%=idProduct%>/2.jpg" ></a></li>
    <li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/3.jpg" ></a></li>
    <li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/4.jpg" ></a></li>
    <li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/5.jpg" ></a></li>
    <li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/6.jpg" ></a></li>
    <li><a href="#" rel="p3"><img src="images/small/<%=idProduct%>/7.jpg" ></a></li>
    </ul>
    Saturday, December 8, 2018 3:11 AM
  • User1724605321 posted

    Hi Jessy ,

    So the key point is do  you get the correct numberOfProductImages ? You can loop the folder and show the images like :

    @{DirectoryInfo dir = new DirectoryInfo(Server.MapPath(Url.Content("~/Content/Images")));}
    @foreach (var file in dir.GetFiles())
    {
        <img src="@Url.Content("~/Content/Images/" + file.Name)" />
    }

    Best Regards,

    Nan Yu

    Monday, December 10, 2018 2:42 AM
  • User-401818107 posted

    Thank you! I will try it and let you know!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 10, 2018 5:33 AM
  • User-401818107 posted

    I have followed your instructions. The scroll images are working,  When mouse over the scroll images, it will be displayed the bigger size of the image. The bigger one does not work after fixing the bottom. Below is the coding for the big image.

    <div id="slideshow-main">
    
    			<ul>
    				<li class="p1 active" >
    					<a href="#">
    						
    <img src="images/big/<%=idProduct%>//1.jpg?url=images/zoom/<%=idProduct%>/1.jpg" class="dg-picture-zoom" style="float:right" alt=""/>
    
    						
    					</a>
    				</li>
    				<li class="p2">
    					<a href="#">
    						<img  src="images/big/<%=idProduct%>/2.jpg?url=images/zoom/<%=idProduct%>/2.jpg" class="dg-picture-zoom" style="float:right" alt=""/>
    						
    					</a>
    				</li>
    				<li class="p3">
    					<a href="#">
    						<img  src="images/big/<%=idProduct%>/3.jpg?url=images/zoom/<%=idProduct%>/3.jpg" class="dg-picture-zoom" style="float:right" alt=""/>
    						
    					</a>
    				</li>
    
    				<li class="p4">
    					<a href="#">
    						<img src="images/big/<%=idProduct%>/4.jpg?url=images/zoom/<%=idProduct%>/4.jpg" class="dg-picture-zoom" style="float:right" alt=""/>
    						
    					</a>
    				</li>
                    
                    <li class="p5">
    					<a href="#">
    						<img src="images/big/<%=idProduct%>/5.jpg?url=images/zoom/<%=idProduct%>/5.jpg" class="dg-picture-zoom" style="float:right" alt=""/>
    						
    					</a>
    				</li>
    				
    				
    			</ul>	
                
                </div>									

    When displaying the bigger size of the image, it will zoom when click the bigger size image.  The line url=images/zoom/<%=idProduct%>/1.jpg zoom the image of the big size. Thank you!

    Thursday, December 13, 2018 10:44 PM
  • User-401818107 posted

    I have worked it out. Thanks for all the experts's advice!

    Sunday, December 16, 2018 5:20 AM
  • User379720387 posted

    Marking helpful suggestions as answers is another way you can say thanks.

    Tuesday, December 18, 2018 11:16 AM