JSON Image Gallery with thumb and Large Preview - replace

JSON Image Gallery with thumb and Large Preview - replace: by Andrew Pougher

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="imageswrapper" class='clearfix img-polaroid'>
     <i class='icon-chevron-left prev' data-dir="prev"></i><i class='icon-chevron-right next' data-dir="next"></i>
     <h4>Hotel Photos</h4>


    <div id='thumbswrapper'>
        <div id='thumbs'></div>
    </div>
    <img id='largeimage' class='img-polaroid'>
</div>

CSS

body {
    margin:30px
}
#imageswrapper .next, #imageswrapper .prev {
    position: relative;
    z-index:200;
        border:4px solid #333;
    border-radius:50%;
    color:#ffffff;
    opacity:0.3;
    filter: alpha(opacity=30);
    cursor:pointer;
}
#imageswrapper h4 {
    margin:-20px auto auto 38%;
    
}
#imageswrapper .next {
    left: 90%;
    top:-4%;
}
#imageswrapper .prev {
    left: 1%;
    top:-4%;
}
#imageswrapper .next:hover, #imageswrapper .prev:hover {
    filter: alpha(opacity=1);
    opacity:1;
}
#imageswrapper {
    margin:-10px auto;
    padding:8px 2px 2px 2px;
    max-width:520px;
    display:block;
    background: #d7e0ea;
    /* Old browsers */
    background: -moz-linear-gradient(top, #d7e0ea 0%, #ffffff 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e0ea), color-stop(100%, #ffffff));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d7e0ea 0%, #ffffff 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d7e0ea 0%, #ffffff 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d7e0ea 0%, #ffffff 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #d7e0ea 0%, #ffffff 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7e0ea', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */
}
.t-selected {
    border:2px solid #1462a6;
}
#thumbswrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-y: hidden;
    height:90px;
    background:transparent;
}
#thumbs img {
    cursor:pointer
}
#largeimage {
    width: auto;
    max-height: 400px;
    margin:0px auto;
    display:block
}

JavaScript

$(document).ready(function () {

    var hoteluniq = '418219'; // 418219 413233 254746 (good) 
    photosUrl = "http://api.ean.com/ean-services/rs/hotel/v3/info?minorRev=22&cid=55505&apiKey=sahaahrmg27wfg2acwcs3p2k&customerUserAgent=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_8_2)%20AppleWebKit/536.26.17%20(KHTML,%20like%20Gecko)%20Version/6.0.2%20Safari/536.26.17&customerIpAddress=82.22.104.212&customerSessionId=0ABAA849-049C-B791-3D32-E9A87BB92A70&locale=en_US&options=HOTEL_IMAGES&hotelId=" + hoteluniq;
    $.ajax({
        url: photosUrl,
        dataType: "jsonp",
        beforeSend: function () {
            $("#thumbs").html('loading...');
        },
        success: function (data) {
            if (data.HotelInformationResponse.EanWsError) {
                $("#thumbs").append("Sorry, there are no photos at this time");
                return false
            } else {
                var base = (data.HotelInformationResponse.HotelImages.HotelImage);
                var thumbnailUrl = [];
                $(base).each(function (eventID, eventData) {
                    // IMS
                    $(this).each(function (index, val) {
                        thumbnailUrl.push(
                            "<img src='" + (val.thumbnailUrl) + "' class='img-polaroid'>");
                    });

                });
                $("#thumbs").css('width', thumbnailUrl.length * 80 + 'px');
                $("#thumbs").html(thumbnailUrl);


            } // end else

        },
        complete: function () {
            $('#thumbs > img:first').addClass('t-selected');
            $("#largeimage").attr("src", checkName($('#thumbs img:first').attr('src')));
            $('#thumbs').delegate('img', 'click', function (e) {

                $('#thumbs > img').removeClass('t-selected');
                $(this).addClass('t-selected');
                var getPic = $(this).attr("src")
                if (getPic.match("_t.jpg$")) {
                    getPic =...