any way to add a box-shadow to images in a jssor slider?

Question

I've used Jssor to create a slider/slideshow. I'd ideally like to have a shadow showing beneath each image. I added a box-shadow to my img styling but the shadow only shows up on some of the images and even then, only on one side. I've also tried adding a border but the thing only appears on 3 sides (the missing edge depends on whether the image is portrait or landscape). If I style my tag, of course the thumbnails get the styling too and all of them have similar issues displaying the shadow.

here's the css (apologies if I'm not using this correctly, im new here!)

img {
    padding:0px;
    margin:0px;
    border:medium solid black;
    box-shadow: 10px 10px 5px #888;
}

TIA Rob

Any way you could make a quick demo and put it on jsfiddle or something? — brbcoding, Jan 02 '15 at 18:42
difficult to "fiddle" with this - im not really sure which part of the jssor gallery code is causing me an issue (have to say, I'm trying to enhance here - there's nothing actually wrong with the original code!). I'll try to elucidate as I debug — Robert White, Jan 04 '15 at 23:12

score 1 · Answer 1 · answered Jan 02 '15 at 18:59

you could leave the styling on the images but only the big ones like so,# Edited to make shadow all round image

img[width="150"]{
    padding:0px;
    margin:10px;
    border:medium solid black;
    box-shadow: 10px 10px 5px #888, -10px -10px 5px #888,-10px 10px 5px #888, 10px -10px 5px #888;
}

<img width="150" height="150" src="http://lorempixel.com/200/200/sports/1"/>
<img width="150" height="150" src="http://lorempixel.com/200/200/sports/1"/>
<img width="150" height="150" src="http://lorempixel.com/200/200/sports/1"/>
<img width="60" height="60" src="http://lorempixel.com/200/200/sports/1"/>
<img width="60" height="60" src="http://lorempixel.com/200/200/sports/1"/>
<img width="60" height="60" src="http://lorempixel.com/200/200/sports/1"/>

Ok, great, I see what you're doing here and thanks - I didnt know I could style images based on size. In this instance, I dont know each image's size up-front and my main problem is getting a shadow to appear at all - the issue seems more to do with the container which JSSOR puts around the img. Thanks. R — Robert White, Jan 04 '15 at 22:12

score 1 · Accepted Answer · answered Jan 03 '15 at 01:27

<style>
    .shadow {
        padding:0px;
        margin:0px;
        border:medium solid black;
        box-shadow: 10px 10px 5px #888;
    }

</style>


<script>

    jQuery(document).ready(function ($) {
        var options = {
            $AutoPlay: true,
            $DragOrientation: 3
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        //you can add shadow for outer container after jssor slider initialized.
        $("slider1_container").addClass("shadow");
        //or you can add shadow for slides container
        //$("slides1_container").addClass("shadow");
    });
</script>


<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div id="slides1_container" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
        overflow: hidden;">
        ...
    </div>
</div>

Thanks for this. I tried this on the slider1_container but got no changes. Do you think I should see this "shadow" class in my browser's markup inspector tool? If I add a thin solid black border to the img element (using the inspector tool) I still only get either left&right or top&bottom showing - I wonder if it's the scaling mechanism making the image larger than the container? I'll try removing the scaling call. Rob — Robert White, Jan 04 '15 at 22:44
Well, I'm going to accept this as the answer since your comments led me to understand the code a little more.. In function LoadImageCompleteEventHandler (in jssor.slider) I've made the image 5 pixels smaller than "full size" - this gives the important space in which I can show the box-shadow. **$JssorUtils$.$SetStyleWidth(_ImageItem, fillWidth-5); //fillWidth will be 1000 (same as parents). I make the image thinner so the shadow can be seen.** — Robert White, Jan 05 '15 at 00:45

any way to add a box-shadow to images in a jssor slider?

2 Answers2