I am using image slider specified at: here

My images are of different sizes and I want to set the width and height of the image using following code:

<img src='77.png' width="20px" height="20px" />

But this doesnt work.

I am preety new to javascript, any help will be greatly approciated!

I am using image slider specified at: here

My images are of different sizes and I want to set the width and height of the image using following code:

<img src='77.png' width="20px" height="20px" />

But this doesnt work.

I am preety new to javascript, any help will be greatly approciated!

• javascript
• css
• jquery-ui
• jquery

• Anyone out there how can help????????? In a real trouble........... – Abhishek Dhote Commented Dec 3, 2011 at 20:30
• Hi, i would like to suggest you and write the below code, as per my understanding you want all images inside coin-slider with specific height and width for this you can write. $('#coin-slider img').css({'width':'20px','height':'20px'}); – Murtaza Commented Dec 12, 2011 at 5:22

4 Answers 4

I really don't think this code can handle it (perhaps with a very serious overhaul of the javascript). I set up a fiddle here: http://jsfiddle/JLjCP/9/ and in examining what it is doing, it simply does not care what size the image itself is nor does it care if you have resized the image explicitly through the width and height properties. It is only taking the referenced image file and using it as a repositioned background image for the split ponents which are purely sized by the width and height of the display and the number of sections you tell it to do it in.

So the short answer is this code will not do what you want it to do.

put this in your css :

    .cs-coin-slider
    {
    /*i think the class name is depend on what you set*/ 
        -o-background-size: 20px 20px;
        -webkit-background-size: 20px 20px;
        -khtml-background-size: 20px 20px;
        -moz-background-size: 20px 20px;
        background-size: 20px 20px;
    }

if you insist to use this coin-slider, no matter you set the size in html or set the css width+height of the image, it wont resized because this plugin treats the image as background..and that css3 background resize that is the only way that save you :)

The documentation on that page says that you can pass size options to the constructor:

$('#coin-slider').coinslider({ width: 20, height: 20 });

If you have different sized images in the same slideshow and you want to change the slider's size dynamically, it might not be possible. Use same sized images or tweak the CSS so that you get black bars around smaller images or something to that effect.

Please post your plete HTML/JS source code, the image size shouldn't matter as long as they are the same height/width as the container of the slideshow. Chances are you are possibly calling the plugin in the wrong way in your JS.