Dispaly images

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>

Answer 1

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?

Answer 2

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>

:

Answer 3

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

Answer 4

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>

Answer 5

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

Answer 6

User-401818107 posted

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

Answer 7

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!

Answer 8

User-401818107 posted

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

Answer 9

User379720387 posted

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