JSON Image Gallery Horizontal 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://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
<div id='imageswrapper' class='clearfix img-polaroid'>

<div class='col-lg-4 picboxes'>
    <div id='thumbswrapper' >
        <div id='thumbs'></div>
     </div>
</div>
    
<div class='col-lg-4 picboxes'>
    <img id='largeimage' class='img-polaroid ' src='img/default-image.jpg'><hr class='clearfix'>
<i class='icon-chevron-left prev' data-dir='prev'></i><i class='icon-chevron-right next' data-dir='next'></i>
</div>
    
</div>

CSS

#imageswrapper .next, #imageswrapper .prev{ 
       position: relative;
    z-index:400;
        border:4px solid #333;
    border-radius:50%;

    color:#ffffff;
    opacity:0.3;
    filter: alpha(opacity=30);
    cursor:pointer;
}

#imageswrapper .next {
    left: 50%;
    top:28%;
}
#imageswrapper .prev {
    left: 40%;
    top:28%;
}



#imageswrapper .next:hover, #imageswrapper .prev:hover {
    filter: alpha(opacity=1);
    opacity:1;
}

#imageswrapper {
    margin:10px auto;
    padding:8px 2px 2px 12px;
    min-height:250px;
        max-width:98%;
    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:1px solid #1462a6; }

#thumbswrapper {

    min-height:90px;
    background:transparent;
}
.picboxes{display:inline-block;border:2px solid }

#thumbs img {

    cursor:pointer
}

#largeimage {
      margin:0px auto;
    display:block;
   width: auto;
    max-height: 400px;
 
}

JavaScript

$(document).ready(function () {

    var hoteluniq = '254746'; // 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 =...