JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<link rel="stylesheet" href="http://johnpatrickgiven.com/jquery/Image-Scale-Carousel/jQuery.isc/jQuery.isc.css">
<script src="http://johnpatrickgiven.com/jquery/Image-Scale-Carousel/jQuery.isc/jquery-image-scale-carousel-condensed.js"></script>
<div id="ph">
    <div id="photo_container"></div>
</div>

CSS

#nav_container {
	width: 960px;
	margin: auto;
}

#photo_container {
	width: 960px;
	height: 400px;
	margin: auto;
	background-color: #000;
}

.clear {
	clear: both;
}

JavaScript

var carousel_images = [
    "http://johnpatrickgiven.com/jquery/Image-Scale-Carousel/images/1.jpg",
    "http://farm4.static.flickr.com/3328/3575375564_79ab90dca8_b.jpg",
    "http://farm4.static.flickr.com/3163/2505235306_b456603cf3_b.jpg",
    "http://farm4.static.flickr.com/3235/2925947121_8b1f95c95b_b.jpg",
    "http://farm3.static.flickr.com/2769/4481220450_91b0aa9e99_b.jpg",
    "http://farm1.static.flickr.com/118/299048945_faba1a6a4b_b.jpg",
    "http://farm4.static.flickr.com/3089/2335224771_cec36d33a6_o.jpg" // Example of a local image
];

$(window).load(function () {
    $("#photo_container").isc({
        imgArray: carousel_images
    });

});

// This is a personal function written to show how dynamic the image viewer can be.
// I don't recommend using this funtion unless you understand what this function is doing.
function resize(w, h) {

    $("#photo_container").remove();
    $("#count_container").remove();
    $("#ph").html('<div id="photo_container"></div>');

    $("#photo_container").css({
        "width": w + "px",
            "height": h + "px"
    });



    $("#photo_container").isc({
        imgArray: carousel_images
    });
}