Results 1 to 5 of 5

Thread: BxGallery -- jQuery

  1. #1
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default BxGallery -- jQuery

    http://www.technogadge.com/bxgallery...allery-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

    Code:
    /*
    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);
                }

  2. #2
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?



    Code:
        
     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);

  3. #3
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

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

    Bud

  4. #4
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Similar Threads

  1. Replies: 4
    Last Post: 08-26-2012, 03:21 PM
  2. jQuery Multi Level CSS Menu #2 not working in IE6 using jQuery 1.4.x
    By Rikko in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-28-2010, 10:57 PM
  3. Replies: 0
    Last Post: 10-18-2010, 01:05 PM
  4. Integrate ddPowerZoomer.js with bxGallery.js
    By nnbr01 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-22-2010, 10:41 PM
  5. jQuery Multi Level CSS Menu #2 and jQuery 1.4
    By Lee.K in forum Bug reports
    Replies: 1
    Last Post: 04-13-2010, 04:40 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •