Click here to Skip to main content
15,567,786 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Good Day all

i have just created a slide show in my website. and i am facing a problem.
the Problem is my pictures are not fitting into the panel the picture file type is JPEG.
My question is how do i make them fit the exact size of the panel?
I have tried using Photoshop to resize them but it is not helping.

Thanks in advance.
Regards
Posted
Comments
vinodkumarnie 23-Feb-13 6:20am    
Can share your source code...?

1 solution

You needed to describe in details about your slider that you are using to your website. There are a few free slider that you can use with out any hesitation.

I can suggest a slider that may release your problem.Here is the link.
http://flexslider.woothemes.com/[^]

The slider is well known as flexslider & it is responsive. This could be helpful to you. Have try with it.

Happy coding thanks.
 
Share this answer
 
Comments
Georges23 25-Feb-13 0:51am    
hi dpalash can you please tell me ho to include flexslide into my project. i am new to web development.
dpalash 25-Feb-13 2:08am    
ya sure. why not? Please follow the steps to do so.
Step 1: Download the zipped file from the link that i have provided and then extract the zipped file.
Step 2: After extracting the zipped file you will get a css file and two js files at the root directory.
Step 3: Put the images folder and the flexslider.css file in a new folder and name the folder css.
Step 4: Download the jquery-1.8.2-min.js and make a new folder and name it js. put the downloaded file and jquery.flexslider.js file in the js folder.
Step 5: Now link the css and js file in the following order.

<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2-min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
Step 6: Then add the following script at the header section of your .aspx page
<script type="text/javascript">
$(document).ready(function () {
InitializeImageSlider();
});
function InitializeImageSlider() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: true,
directionNav: true,
itemWidth: "100%",
itemHeight: 400
});
}
</script>
Step 7: Then Copy the code below and paste it anywhere in the page.

<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_caramel.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>


Step 8: Then link the images properly. I think you will be able to manage the rest.
Thanks
Georges23 25-Feb-13 6:49am    
thanks
Georges23 25-Feb-13 7:02am    
hi dpalash do you perhaps know how to reduce the size of the thumbnails because mine is too big and whenever i add more pictures it falls apart.further i also want to put the thumbnails on the right hand side of the slider, please how do i do this?. thanks in advance.
dpalash 25-Feb-13 12:30pm    
You need to resize your image while uploading. There are available resources to resize the image in c#. You can search for one.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900