Custom Gallery

/* FUNCTION FOR NEW GALLERY TYPE */

if( $("#xmlFeed").length > 0){
$("body").addClass("galleryXML");
xmlink = $("#xmlFeed").attr("href");
newGallery(xmlink);

}


function newGallery(xml,num){

num = typeof num !== 'undefined' ? num : 6; //set default val to 6

var imageArray = [];
var thumbArray = [];
var linkArray = [];
var titleArray = [];
var descArray = [];
var currentImage = 0;
var totalImage = 0;

$.ajax({
type: "GET",
url: xml,

dataType: "xml",
success: function(xml) {


$(xml).find('item').each(function(){

titleArray.push($(this).find('title').text());
linkArray.push($(this).find('link').text());
thumbArray.push( $(this).find('media\\:thumbnail, content').attr('url') );
imageArray.push( $(this).find('media\\:content, content').attr('url') );
descArray.push( $(this).find('media\\:description, content').text() );

}); //close each(

//build the gallery
bCode = '<div id="galleryXML"><div id="galleryWrap" style="min-height:350px;"><div id="imageSet" data-cycle-auto-height=container data-cycle-loader="wait">';

for(i=0;i<imageArray.length;i++){
//if(i<num){
bCode += '<div class="image"><img class="galleryXMLimage" src="'+imageArray[i]+'" /></div>';
//}
}
bCode += '</div><div id="next"></div><div id="prev"></div><!-- end imageSet --></div><!-- end galleryWrap --><div id="galleryStrap"><div id="galleryXMLdesc">'+descArray[0]+'</div><div id="galleryLoad">Loading images...</div><div id="galleryCount"><span id="currentNum">1</span> of <span id="totalNum">'+imageArray.length+'</span></div></div>';

//build the thumbs
bCode += '<div id="thumbWrap"><div id="thumbPrev" class="thumbBtn">&lt;</div><div id="thumbSet"><div id="thumbSled">';
for(i=0;i<thumbArray.length;i++){
bCode += '<div class="thumbbox" style="background-image:url('+thumbArray[i]+')";><img class="galleryXMLthumb" src="'+thumbArray[i]+'" title="'+titleArray[i]+'"/></div>';
}
bCode += '</div></div><div id="thumbNext" class="thumbBtn">&gt;</div></div></div><!--end galleryXML -->';

$("#ContentCMS").append(bCode);
//$("#thumbWrap,#next,#prev,#galleryCount").css("display","none");
$("#thumbWrap,#galleryXMLdesc,#next,#prev,#galleryCount,#imageSet").hide();

$( '#imageSet' ).on( 'cycle-post-initialize', function( event, opts ) {

$("#galleryLoad").css("display","none");
//$("#thumbWrap,#next,#prev,#galleryCount").css("display","block");
$("#thumbWrap,#next,#prev,#galleryCount,#imageSet,#galleryXMLdesc").fadeIn("fast", function() {

//FIREFOX FIX
theheight = $("#imageSet .image:first-child img").height();
firstheight = $("#imageSet .image:first-child").height();
console.log("H"+theheight+" F"+firstheight)
if(firstheight > 0){
//do nothing
} else{
$("#imageSet .image:first-child").height( theheight );
}
});


});

$( '#imageSet' ).on( 'cycle-pre-initialize', function( event, opts ) {
//load in rest of images
for(i=0;i<imageArray.length;i++){
if(i>=num){

//$('#imageSet').cycle('add', '<div class="image"><img class="galleryXMLimage" src="'+imageArray[i]+'" /></div>');
}
}

});

$('#imageSet').cycle({
fx: 'scrollHorz',
speed: '1000',
timeout: 0,
next: '#next',
prev: '#prev',
slides:'> div',
centerHorz:true,
pager: '#thumbSled',
'pagerTemplate': ''
});


$( '#imageSet' ).on( 'cycle-after', function( event, opts ) {

//console.log("after"+opts.slideNum);
//console.log("after"+opts.currSlide);

$("#galleryXMLdesc").text(descArray[opts.slideNum-1]);
$("#currentNum").text(opts.slideNum);



newcurrentSet = Math.floor((opts.slideNum-1)/num);


if(currentSet != newcurrentSet){

currentSet = newcurrentSet;
target = -(currentSet*(num*157));

$("#thumbSled").animate({
marginLeft:target
}, 500);
}

});

//set thumbnail box width based on requirement (num)

$("#thumbSet,#thumbWrap").css("width",num*157);

var currentSet = 0;
var currentMax = Math.ceil(thumbArray.length / num);


$("#thumbNext").click(function(){
if(currentSet < currentMax-1){
currentSet++;
target = -(currentSet*(num*157));
$("#thumbSled").animate({
marginLeft:target
}, 500);
}
});

$("#thumbPrev").click(function(){

if(currentSet > 0){
currentSet--;
target = -(currentSet*(num*157));

$("#thumbSled").animate({
marginLeft:target
}, 500);

}

});

$(".galleryXMLthumb").click(function(evt){
$("#galleryXMLdesc").text(descArray[$(this).index()]);

});


//end of success---------------------//
},
error: function(xml,error) {
alert("!2 "+error);
}
});

}
/**** END GALLERY ****/

/**** END DOC READY ****/

});
/*------------------------*/

Index Previous Next