(function ($) {
$.fn.portfolioSetter = function (options) {
var defaults = {
//default settings
ppanimationSpeed: false,
ppgroup: 'M300',
pptheme: 'dark_rounded',
ppslideshow: false,
ppautoplay_slideshow: false,
ppoverlay_gallery: false,
ppLightboxTitle: 'False',
ppLightboxDescription: 'False',
ppMediaTitle: 'False',
ppMediaDescription: 'False',
pfqtip: 'False',
pfShowQtip :'False',
pfdiv: 'EasyDNNGallery',
pfShowEffect: 'slide',
pfHideEffect: 'slide',
pfShowDuration: '300',
pfHideDuration: '300',
pfTargetPos: 'topMiddle',
pfTooltipPos: 'topMiddle',
pfTheme: 'cream',
pfcorner: 5,
pfradius: 5,
pfOpenMediaUrl: 'False',
pfOpenMediaTarget: '',
itemsPerPage: 16, //the number of items per page
pageWidth: 960, //the width of each page
pageHeight: 330, //the height of each page
itemMargin: 10, //margin of each of the portfolio items
showCategories: true,
myshowCategories: true, // if set to false, the categories will be hidden
allText: 'ALL', //the ALL text displayed before the categories names
easing: 'easeOutExpo', //the animation easing
animationSpeed: 800, //the speed of the animation of the pagination
navButtonWidth: 21, //the width of the pagination button
wavyAnimation: false, //if set the true, all the elements will fade in consecutively with a wavy effect
xmlSource: 'portfolio.xml', //the XML file from which the data is exctracted
pageWrapperClass: 'page_wrapper', //the class of the div that wraps the items in order to set a page
navigationId: 'portfolio_pagination', //the ID of the pagination div
categoriesId: 'portfolio_categories', //the ID of the categories div
itemClass: 'EDGimage' //the class of the div that wraps each portfolio item data
};
var options = $.extend(defaults, options);
options.pageHolder = $(this);
//define some helper variables
var categories = [], items = [], pageWrappers = [], imagesLoaded = 0, counter = 0, ie = false, categoryHolder;
var root = $('').css({ width: (options.pageWidth * 2), height: options.pageHeight, float: 'left' });
$(this).css({ width: options.pageWidth, height: 'auto', overflow: 'hidden' }).append(root);
var parentId = $(this).attr('id');
init();
function init() {
root.parent().append('');
loadItems();
}
/**
* Parses the XML portfolio item data.
*/
function loadItems() {
$.ajax({
type: 'GET',
url: options.xmlSource,
dataType: 'xml',
success: function (xml) {
//get the settings
if ($(xml).find('show_categories:first').text() === 'off') {
options.showCategories = false;
}
if (options.showCategories) {
//get the portfolio categories
$(xml).find('categories').eq(0).find('category').each(function (i) {
var current = $(this);
var category = {
id: current.attr('id'),
name: current.text()
};
categories.push(category);
});
}
//get the portfolio items
$(xml).find('item').each(function (i) {
var current = $(this);
var thum = current.find('thumbnail:first').text();
var prev = current.find('preview:first').text();
var cat = current.find('category:first').text().split(',');
var desc = current.find('description:first').text();
var imgtitle = current.find('title:first').text();
var imgalt = current.find('title:first').text();
var imgdesc = current.find('description:first').text();
var cssClass = 'empty';
if (imgtitle.length > 0 && options.ppMediaTitle == 'True') {
cssClass = 'title';
}
if (desc.length > 0 && options.ppMediaDescription == 'True') {
cssClass = 'title';
}
if (options.ppLightboxTitle == 'False') {
imgalt = '';
}
if (options.ppLightboxDescription == 'False') {
imgdesc = '';
}
if (options.ppMediaTitle == 'False') {
imgtitle = '';
}
if (options.ppMediaDescription == 'False') {
desc = '';
}
var item = {
thumbnail: thum,
preview: prev,
category: cat,
description: desc,
title: imgtitle,
cClass: cssClass,
ialt: imgalt,
idesc: imgdesc,
MediaTarget: options.pfOpenMediaTarget,
obj: $('')
};
items.push(item);
});
setSetter();
}
});
}
/**
* Calls the main functions for setting the portfolio items.
*/
function setSetter() {
if ($.browser.msie) {
ie = true;
}
root.siblings('.loading').remove();
root.after('');
if (options.myshowCategories) {
displayCategories();
}
loadImages();
}
/**
* Displays the categories.
*/
function displayCategories() {
categoryHolder = $('');
categoryHolder.append('');
root.before(categoryHolder);
var catUl = categoryHolder.find('ul');
//add the ALL link
var allLink = $('' + options.allText + '');
catUl.append(allLink);
showSelectedCat(allLink);
//bind the click event
allLink.bind({
'click': function () {
displayItems();
showSelectedCat($(this));
},
'mouseover': function () {
$(this).css({ cursor: 'pointer' });
}
});
//add all the category names to the list
var catNumber = categories.length;
for (var i = 0; i < catNumber; i++) (function (i) {
var category = $('' + categories[i].name + '');
catUl.append(category);
//bind the click event
category.bind({
'click': function () {
displayItems(categories[i].id);
showSelectedCat($(this));
},
'mouseover': function () {
$(this).css({ cursor: 'pointer' });
}
});
})(i);
}
function showSelectedCat(selected) {
//hide the previous selected element
var prevSelected = categoryHolder.find('ul li.selected');
if (prevSelected[0]) {
var prevHtml = prevSelected.find('div.port_cat').html();
prevSelected.html(prevHtml);
prevSelected.removeClass('selected');
}
//show the new selected element
var html = selected.html();
selected.html('');
selected.addClass('selected');
}
/**
* Loads the images. When all the images are loaded calls the displayItems
* function to display the images.
*/
function loadImages() {
var imageCount = items.length;
for (var i in items) {
if (items.hasOwnProperty(i)) {
var img = new Image();
$(img).load(function () {
imagesLoaded++;
if (imagesLoaded === imageCount) {
//all the images are loaded, display them all
displayItems();
}
}).attr('src', items[i].thumbnail);
}
}
}
/**
* Displays the portfolio items.
*/
function displayItems() {
var filterCat = arguments.length === 0 ? false : true;
//reset the divs and arrays
root.html('');
root.width(200);
pageWrappers = [];
root.animate({ marginLeft: 0 });
var length = items.length;
counter = 0;
var catId = arguments[0];
for (var i = 0; i < length; i++)
(function (i, filterCat, catId) {
if (!filterCat || (filterCat && items[i].category.contains(catId))) {
if (counter % options.itemsPerPage === 0) {
//create a new page wrapper and make the holder wider
root.width(root.width() + options.pageWidth + 20);
var wrapper = $('').css({ float: 'left', width: options.pageWidth + options.itemMargin, height: options.pageHeight });
pageWrappers.push(wrapper);
root.append(wrapper);
}
if (ie) {
//var obj=$('');
// if ($.browser.version.substr(0, 1) <= 7) {
// var obj = $('');
// pageWrappers[pageWrappers.length - 1].append(obj.css({ display: 'none' }));
//obj: $('')
//} else {
var obj = $('');
pageWrappers[pageWrappers.length - 1].append(obj.css({ display: 'none' }));
//}
items[i].obj = obj;
} else {
pageWrappers[pageWrappers.length - 1].append(items[i].obj.css({ display: 'none' }));
}
var timeout = counter >= options.itemsPerPage ? 0 : 100;
if (counter >= options.itemsPerPage || !options.wavyAnimation) {
items[i].obj.fadeIn().animate({ opacity: 1 }, 0);
} else {
setTimeout(function () {
//display the image by fading in
items[i].obj.fadeIn().animate({ opacity: 1 }, 0);
}, counter * 100);
}
counter++;
}
})(i, filterCat, catId);
//call the lightbox plugin
$(document).ready(function () {
if (options.pfOpenMediaUrl == 'False')
{
$('a[rel="PortPhoto[' + options.ppgroup + ']"]').prettyPhoto({
animationSpeed: 'options.ppanimationSpeed',
slideshow: options.ppslideshow,
overlay_gallery: options.ppoverlay_gallery,
autoplay_slideshow: options.ppautoplay_slideshow,
hideflash: false,
showTitle: true,
theme: options.pptheme
});
}
if (options.pfShowQtip == 'True')
{
$('#' + options.pfdiv + ' .EDGcontent a[title]').each(function () {
if ($(this).attr("title").length > 0) {
$(this).qtip({
show: { effect: { type: options.pfShowEffect, length: options.pfShowDuration} },
hide: { effect: { type: options.pfHideEffect, length: options.pfHideDuration} },
position: { corner: { target: options.pfTargetPos, tooltip: options.pfTooltipPos} },
style: { name: options.pfTheme, tip: true, border: { width: options.pfcorner, radius: options.pfradius} }
});
}
});
}
else
{
$('#' + options.pfdiv + ' .EDGcontent a[title]').each(function () {
if ($(this).attr("title").length > 0) {
$(this).attr("title","");
}
});
}
});
//show the navigation buttons
showNavigation();
setHoverFunctionality();
}
/**
* Displays the navigation buttons.
*/
function showNavigation() {
//reset the divs and arrays
var navUl = root.siblings('#' + options.navigationId).find('ul');
navUl.html('');
var pageNumber = pageWrappers.length;
if (pageNumber > 1) {
for (var i = 0; i < pageNumber; i++) (function (i) {
var li = $('');
navUl.append(li);
//bind the click handler
li.bind({
'click': function () {
var marginLeft = i * options.pageWidth + i * options.itemMargin - 2;
//set a bigger margin for IE6
if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
marginLeft += i * options.itemMargin;
}
root.animate({ marginLeft: [-marginLeft, options.easing] }, options.animationSpeed);
navUl.find('li.selected').removeClass('selected');
$(this).addClass('selected');
},
'mouseover': function () {
$(this).css({ cursor: 'pointer' });
}
});
})(i);
navUl.find('li:first').addClass('selected');
//center the navigation
var marginLeft = (options.pageWidth) / 2 - pageNumber * options.navButtonWidth / 2;
navUl.css({ marginLeft: marginLeft });
}
}
function setHoverFunctionality() {
$('.portfolio_item').hover(function () {
$(this).stop().animate({ opacity: 0.8 }, 300);
}, function () {
$(this).stop().animate({ opacity: 1 }, 300);
});
}
};
} (jQuery));
Array.prototype.contains=function(value){
var length=this.length;
for(var i=0; i