BxGallery -- jQuery

[asalute]

http://www.technogadge.com/bxgallery-jquery-image-gallery-plugin/ How to get this to work please the creator no longer supports and I'm trying to implement on a web page. code will be in two parts due to character restrictions



/*
bxGallery v1.1
Plugin developed by: Steven Wanderski
http://bxgalleryplugin.com
http://stevenwanderski.com

Released under the GPL license:
http://www.gnu.org/licenses/gpl.html
*/
(function($) {
$.fn.extend({
bxGallery: function(options) {
var defaults = {
maxwidth: '',
maxheight: '',
thumbwidth: 200,
thumbcrop: false,
croppercent: .35,
thumbplacement: 'bottom',
thumbcontainer: '',
opacity: .7,
load_text: '',
load_image: 'http://i302.photobucket.com/albums/nn92/wandoledzep/spinner.gif',
wrapperclass: 'outer'
}
var options = $.extend(defaults, options);
var o = options;
var cont = '';
var caption = '';
var $outer = '';
var $orig = this;
var tall = 0;
var wide = 0;
var showing = 0;
var i = 0;
var k = $orig.find('img')
.size();
var current;
preload_img();

function preload_img() {
$orig.hide();
if (o.load_text != '') {
$orig.before('<div id="loading">' + o.load_text + '</div>');
} else {
$orig.before('<div id="loading"><img src="' + o.load_image + '" /></div>');
}
$orig.parent()
.find('#loading')
.css({
'textAlign': 'center',
'width': o.maxwidth
});
$orig.find('img')
.each(function() {
var the_source = $(this)
.attr('src');
var the_img = new Image();
the_img.onload = function() {
preload_check();
};
the_img.src = the_source;
});
}

function preload_check() {
i++;
if (i == k) {
init();
}
}

function init() {
set_layout();
set_main_img();
place_thumbcontainer();
set_thumbs();
}

function set_layout() {
$orig.parent()
.find('#loading')
.hide();
$orig.show();
$orig.wrap('<div class="' + o.wrapperclass + '"></div>');
$outer = $orig.parent();
$orig.find('li')
.css({
'position': 'absolute'
});
}

function set_main_img() {
$orig.find('img')
.each(function() {
var $this = $(this);
var $imgheight = $this.height();
var $imgwidth = $this.width();
if ($this.attr('title') != '') {
caption = $this.attr('title');
$this.parent()
.append('<div class="caption">' + caption + '</div>');
}
if (o.maxwidth != '') {
if ($this.width() > o.maxwidth) {
$this.width(o.maxwidth);
$this.height(($imgheight / $imgwidth) * o.maxwidth);
}
}
if (o.maxheight != '') {
if ($this.height() > o.maxheight) {
$this.height(o.maxheight);
$this.width(($imgwidth / $imgheight) * o.maxheight);
}
}
if ($this.height() + $this.parent()
.find('.caption')
.height() > tall) {
tall = $this.height() + $this.parent()
.find('.caption')
.height();
}
if ($this.width() > wide) {
wide = $this.width();
}
cont += '<li><img src="' + $this.attr('src') + '" /></li>';
});
$orig.find('li:not(:first)')
.hide();
$orig.height(tall);
$orig.width(wide);
$outer.find('.caption')
.width(wide);
}

[asalute]

Here is the rest of the code from above. please help me to get this working in a webpage I know some css can be added I can figure that part out but how to get the jquery and/or fancybox part working?





function place_thumbcontainer() {
if (o.thumbplacement == 'top') {
$outer.prepend('<ul class="thumbs">' + cont + '</ul>');
$outer.find('.thumbs')
.css({
'overflow': 'auto'
});
} else if (o.thumbplacement == 'left') {
$outer.prepend('<ul class="thumbs">' + cont + '</ul>');
$orig.css({
'float': 'left'
});
$outer.find('.thumbs')
.css({
'float': 'left'
});
} else if (o.thumbplacement == 'bottom') {
$outer.append('<ul class="thumbs">' + cont + '</ul>');
} else if (o.thumbplacement == 'right') {
$outer.append('<ul class="thumbs">' + cont + '</ul>');
$orig.css({
'float': 'left'
});
$outer.find('.thumbs')
.css({
'float': 'left'
});
}
$outer.append('<div style="clear:both"></div>');
if (o.thumbcontainer != '') {
$outer.find('.thumbs')
.width(o.thumbcontainer);
}
}

function set_thumbs() {
$outer.find('.thumbs li')
.each(function() {
var $this = $(this);
var $img = $this.find('img');
var $imgwidth = $img.width();
var $imgheight = $img.height();
if (o.thumbcrop) {
$img.width($imgwidth * o.croppercent);
$img.height(($imgheight / $imgwidth) * $img.width());
$this.css({
'float': 'left',
'width': o.thumbwidth,
'height': o.thumbwidth,
'overflow': 'hidden',
'cursor': 'pointer'
});
} else {
$img.width(o.thumbwidth);
$img.height(($imgheight / $imgwidth) * o.thumbwidth);
$this.css({
'float': 'left',
'cursor': 'pointer'
});
$this.height($img.height());
}
$this.click(function() {
var x = $outer.find('.thumbs li')
.index($this);
if (showing != x) {
$orig.find('li')
.fadeOut();
$orig.find('li')
.eq(x)
.fadeIn();
showing = x;
}
});
});
var $thumb = $outer.find('.thumbs li');
$thumb.eq(0)
.addClass('on');
$thumb.not('.on')
.fadeTo(0, o.opacity);
$thumb.click(function() {
var t = $(this);
var i = $thumb.index(this);
if (current != i) {
$thumb.removeClass('on');
t.addClass('on');
$thumb.not('.on')
.fadeTo(200, o.opacity);
current = i;
}
})
.hover(function() {
$(this)
.stop()
.fadeTo(200, 1);
$(this)
.click();
}, function() {
$(this)
.not('.on')
.stop()
.fadeTo(200, o.opacity);
});
}
}
});
})(jQuery);

[ajfmrf]

there is a lot of examples and options located at this link http://bxslider.com/

[asalute]

ajfmrf,

Thanks for the try, but there isn't one example of the bxgallery, there are plenty of jquery examples and slider examples, but none of the bxGallery which is what I am looking for help with. This looks like a plugin that used to be supported that is no longer supported. :(

[asalute]

Come on guys? no one knows any jQuery? If not do you know where I can get some jQuery help?