Colocar link nas imagens do slideshow

D@rk · Julho 2, 2012

Boa noite,

Tenho um slideshow dentro de uma div, já tentei diversas vezes linkar as imagens para abrir outra página e não consegui...

Segue o trecho:

<div class="style6" id="apDivfilho2">
                <p align="center" class="style7"><img src="images/redessociais.jpg" width="120" height="40" /></p>
                </div>
                <ul id="myGallery">
        <li><img src="images/01.jpg" alt="Lone Tree Yellowstone" />
      <li><img src="images/02.jpg" alt="Is He Still There?!" />
      <li><img src="images/03.jpg" alt="Noni Nectar For Green Gecko" />
      <li><img src="images/04.jpg" alt="Noni Nectar For Green Gecko" />    
      <li><img src="images/05.jpg" alt="Noni Nectar For Green Gecko" />    
</ul>
              </div>
            </div>

Como posso colocar hiperlink em cada imagem que aparece no slideshow?

Abs,

JaguA · Julho 2, 2012

Pronto.

<div class="style6" id="apDivfilho2">
                <p align="center" class="style7"><img src="images/redessociais.jpg" width="120" height="40" /></p>
                </div>
                <ul id="myGallery">
        <li><a href="#"><img src="images/01.jpg" alt="Lone Tree Yellowstone" /></a></li>
      <li><a href="#"><img src="images/02.jpg" alt="Is He Still There?!" /></a></li>
      <li><a href="#"><img src="images/03.jpg" alt="Noni Nectar For Green Gecko" /></a></li>
      <li><a href="#"><img src="images/04.jpg" alt="Noni Nectar For Green Gecko" />  </a>  </li>
      <li><a href="#"><img src="images/05.jpg" alt="Noni Nectar For Green Gecko" /> </a>   </li>
</ul>
              </div>
            </div>

D@rk · Julho 2, 2012

Fiz isso em um dos itens, apliquei no primeiro 01.jpg.

Ele some do slideshow, ficando apenas os outros 4.... o.O

Eu tinha feito isso antes e aconteceu o mesmo problema

JaguA · Julho 3, 2012

tem que ver seu CSS

D@rk · Julho 3, 2012

tem que ver seu CSS

Não seria no .js ? :mellow:

De qualquer forma segue o meu css abaixo:

body{
    padding:0px;
    margin:0px;
    background:#c7c7c7;
    color:#848484;
    font:10px/14px Tahoma, sans-serif;
}

div, p, ul, h2, h3, h4, img, form{padding:0px; margin:0px;}
ul{list-style-type:none;}

.centro {
        position:absolute;
}        
.clear{
clear:both;
}

.frame {
    border: 1px solid #D5E6E0;
}

.text1 {
    font: 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#000;
    font-weight:bold;
}
.text2 {
    font: 11px/14px Tahoma, Geneva, sans-serif;
    color:#000;
    font-weight:normal;
}
.text3 {
    font: 10px/14px Tahoma, Geneva, sans-serif;
    color:#000;
    font-weight:normal;
}

.text4 {
    font: 10px/12px Tahoma, Geneva, sans-serif;
    color:#052578;
    font-weight:bold;
}
.text5 {
    font: 10px/12px Tahoma, Geneva, sans-serif;
    color:#052578;
    font-weight:bold;
}
.fontsiscor {
    font: 10px/12px "Berlin Sans FB";
    color:#000000;
    font-weight:normal;
}

.fontsiscorbold {
    font: 24px/26px "Berlin Sans FB";
    color:#000000;
    font-weight:normal;
}

a:link {
    font: 11px/14px Tahoma, Geneva, sans-serif;
    color:#000;
    font-weight:normal;
    text-decoration:none;
}

a:visited{
    font: 11px/14px Tahoma, Geneva, sans-serif;
    color:#000;
    font-weight:normal;
    text-decoration:none;
}

a:hover {
    font: 11px/14px Tahoma, Geneva, sans-serif;
    color:#000;
    font-weight:normal;
    text-decoration:underline;
}

a.a:link {
    font: 10px/14px Tahoma, Geneva, sans-serif;
    color:#19a1cb;
    font-weight:normal;
    text-decoration:underline;
}

a.a:visited{
    font: 10px/14px Tahoma, Geneva, sans-serif;
    color:#19a1cb;
    font-weight:normal;
    text-decoration:underline;
}

a.a:hover {
    font: 10px/14px Tahoma, Geneva, sans-serif;
    color:#000;
    font-weight:normal;
    text-decoration:none;
}

a.b:link {
    font: 10px/18px Tahoma, Geneva, sans-serif;
    color:#848484;
    font-weight:normal;
    text-decoration:underline;
}

a.b:visited{
    font: 10px/18px Tahoma, Geneva, sans-serif;
    color:#848484;
    font-weight:normal;
    text-decoration:underline;
}

a.b:hover {
    font: 10px/18px Tahoma, Geneva, sans-serif;
    color:#000;
    font-weight:normal;
    text-decoration:none;
}

a.c:link {
    font: 10px/12px Tahoma, Geneva, sans-serif;
    color:#FFF;
    font-weight:normal;
    text-decoration:none;
}

a.c:visited{
    font: 10px/12px Tahoma, Geneva, sans-serif;
    color:#FFF;
    font-weight:normal;
    text-decoration:none;
}

a.c:hover {
    font: 10px/12px Tahoma, Geneva, sans-serif;
    color:#FFF;
    font-weight:normal;
    text-decoration:underline;
}

a.d:link {
    font: 10px/12px Tahoma, Geneva, sans-serif;
    color:#FFF;
    font-weight:normal;
    text-decoration:none;
}

a.d:visited{
    font: 10px/12px Tahoma, Geneva, sans-serif;
    color:#FFF;
    font-weight:normal;
    text-decoration:none;
}

a.d:hover {
    font: 10px/12px Tahoma, Geneva, sans-serif;
    color:#FFF;
    font-weight:normal;
    text-decoration:underline;
}

input, textarea, select{
    border:#fff 1px solid;
    background-color:#EFEFEF;
    font:12px Tahoma;
    color:#000;
}
a.adv:link {text-decoration: none; font-weight:bold; color:#000;}
a.adv:hover {text-decoration: none; font-weight:bold; color:#000;}
a.adv:visited {text-decoration: none; font-weight:bold; color:#000;}
/*

    GalleryView Stylesheet
    
    Use the CSS rules below to modify the look of your gallery.
     
    To create additional rules, use the markup below as a guide to GalleryView's architecture.
*/

/* GALLERY LIST */
/* IMPORTANT - Change '#myGallery' to the ID of your gallery list to prevent a flash of unstyled content */
#myGallery { display: none; }

.gv_galleryWrap { position: relative; background: #222; font-size: 10pt; }

/* GALLERY DIV */
.gv_gallery { overflow: hidden; position: relative;}

.gv_imageStore { visibility: hidden; position: absolute; top: -10000px; left: -10000px; }


/*************************************************/
/**   PANEL STYLES                                **/
/*************************************************/

.gv_panelWrap { filter: inherit; position: absolute; overflow: hidden; }

.gv_panel-loading { background: url(img-loader.gif) 50% 50% no-repeat #aaa; }
.gv_frame-loading { background: url(img-loader.gif) 50% 50% no-repeat #aaa; }

/* GALLERY PANELS */
.gv_panel { filter: inherit; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 100; }
.gv_panel img { position: absolute; }

.gv_overlay { position: absolute; background: #222; color: white; z-index: 200; }
.gv_showOverlay { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    background: url(themes/light/info.png) #222; 
    cursor: pointer;
    z-index: 200;
}
.gv_overlay h4 { color: white; margin: 1em; font-weight: bold; }
.gv_overlay p { color: white; margin: 1em; }

.gv_infobar {
    background: #222;
    padding: 0 0.5em;
    line-height: 1.5em;
    height: 1.5em;
    font-size: 10pt;
    font-weight: bold;
    color: white;
    
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
    vertical-align: middle;
    z-index: 2000;
    
}

/*************************************************/
/**   FILMSTRIP STYLES                            **/
/*************************************************/

.gv_filmstripWrap { overflow: hidden; position: absolute; }


/* FILMSTRIP */
.gv_filmstrip { margin: 0; padding: 0; position: absolute; top: 0; left: 0; }

/* FILMSTRIP FRAMES (contains both images and captions) */
.gv_frame { 
    cursor: pointer;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
}

/* WRAPPER FOR FILMSTRIP IMAGES */
.gv_frame .gv_thumbnail { position: relative;overflow: hidden !important; }

/* WRAPPER FOR CURRENT FILMSTRIP IMAGE */
.gv_frame.current .gv_thumbnail {}

/* FRAME IMAGES */
.gv_frame img { border: none; position: absolute; }

/* FRAME CAPTION */
.gv_frame .gv_caption { height: 14px; line-height: 14px; font-size: 10px; text-align: center; color:white; }

/* CURRENT FRAME CAPTION */
.gv_frame.current .gv_caption { }

/* POINTER FOR CURRENT FRAME */
.gv_pointer {
    border-color: black;
}

/* NAVIGATION BUTTONS */
.gv_navWrap {
    text-align: center;
    position: absolute;
}
.gv_navPlay,
.gv_navPause,
.gv_navNext,
.gv_navPrev {
    
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    filter:alpha(opacity=30);
    display:-moz-inline-stack;
    display:inline-block;
    zoom:1;
    *display:inline;
    vertical-align: middle;
}
.gv_navPlay:hover,
.gv_navPause:hover,
.gv_navNext:hover,
.gv_navPrev:hover {
    opacity: 0.8;
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    filter:alpha(opacity=80);
}

.gv_panelNavPrev,
.gv_panelNavNext {
    position: absolute;
    display: none;
    opacity: 0.50;
    -moz-opacity: 0.50;
    -khtml-opacity: 0.50;
    filter:alpha(opacity=50);
    z-index: 200;
}

.gv_panelNavPrev:hover,
.gv_panelNavNext:hover {
    opacity: 0.9;
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    filter:alpha(opacity=90);
}

.gv_navPlay {
    height: 30px;
    width: 30px;
    cursor: pointer;
    background: url(themes/light/play-big.png) top left no-repeat;
}
.gv_navPause {
    height: 30px;
    width: 30px;
    cursor: pointer;
    background: url(themes/light/pause-big.png) top left no-repeat;
}
.gv_navNext {
    height: 20px;
    width: 20px;
    cursor: pointer;
    background: url(themes/light/next.png) top left no-repeat;
}
.gv_navPrev {
    height: 20px;
    width: 20px;
    cursor: pointer;
    background: url(themes/light/prev.png) top right no-repeat;
}
.gv_panelNavNext {
    height: 20px;
    width: 20px;
    cursor: pointer;
    background: url(themes/light/panel-next.png) top left no-repeat;
}
.gv_panelNavPrev {
    height: 20px;
    width: 20px;
    cursor: pointer;
    background: url(themes/light/panel-prev.png) top right no-repeat;
}

Abs,

Editado Julho 3, 2012 por D@rk

JaguA · Julho 3, 2012

não exsite outro css?

to vendo Class e Ids declarado para esse slideshow mas não vi nada a respeito delas no CSS que você postou.

D@rk · Julho 3, 2012

Cara eu tenho sim. Mas o outro css é do lightbox e não do slideshow. Olha acredito que o .js correspondente a galeria slideshow, talvez tenha algo a ver...

Segue o código:

/*

    GalleryView - jQuery Content Gallery Plugin
    Author:        Jack Anderson
    Version:    3.0 DEVELOPMENT

      See README.txt for instructions on how to markup your HTML
*/

// Make sure Object.create is available in the browser (for our prototypal inheritance)
// Courtesy of Douglas Crockford
if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

(function ($) {
    // custom image object
    var gvImage = function (img) {

        this.src = { 
            panel: img.attr('src'),
            frame: img.data('frame') || img.attr('src')
        };
        this.scale = {
            panel: null,
            frame: null
        };
        this.height = 0;
        this.width = 0;
        this.attrs = {
            title: img.attr('title') || img.attr('alt'),
            description: img.data('description')
        };
        this.href = null;
        this.dom_obj = null;
        
        return this;
    },
    
    // utility function wrapper
    gv = {
        getInt: function(i) {
            i = parseInt(i, 10);
            return isNaN(i) ? 0 : i;
        },
        innerWidth: function(elem) {
            return this.getInt(elem.css('width')) || 0;    
        },
        outerWidth: function(elem) {
            return     this.innerWidth(elem) + 
                    this.extraWidth(elem);
        },
        extraWidth: function(elem) {
            return    this.getInt(elem.css('paddingLeft')) +
                    this.getInt(elem.css('paddingRight')) +
                    this.getInt(elem.css('borderLeftWidth')) +
                    this.getInt(elem.css('borderRightWidth'));    
        },
        innerHeight: function(elem) {
            return this.getInt(elem.css('height'))|| 0;
        },
        outerHeight: function(elem) {
            return     this.innerHeight(elem) + 
                    this.extraHeight(elem);
        },
        extraHeight: function(elem) {
            return     this.getInt(elem.css('paddingTop')) +
                    this.getInt(elem.css('paddingBottom')) +
                    this.getInt(elem.css('borderTopWidth')) +
                    this.getInt(elem.css('borderBottomWidth'));
        }
    },
    
    /*
        GalleryView - Object
            The main gallery class
    */        
    GalleryView = {
        // array of dom elements
        elems: [
            '.gv_galleryWrap',    '.gv_gallery',        '.gv_panelWrap',        '.gv_panel',
            'img.gv_image',        '.gv_infobar',        '.gv_filmstripWrap',    '.gv_filmstrip',
            '.gv_frame',        '.gv_thumbnail',     '.gv_caption',             'img.gv_thumb',
            '.gv_navWrap',        '.gv_navNext',        '.gv_navPrev',            '.gv_navPlay',
            '.gv_panelNavNext',    '.gv_panelNavPrev',    '.gv_overlay',            '.gv_showOverlay',
            '.gv_imageStore'
        ],
        
        // create a jQuery element and apply attributes
        createElem: function(attrs,elem) {
            elem = document.createElement(elem);
            var $elem = $(elem);
            return $elem.attr(attrs);
        },
        
        // get the position of an element with respect
        // to the gallery wrapper
        getPos: function (el) {
            var self = this,
                dom = this.dom,
                el = el[0],
                el_id = el.id,
                left = 0,
                top = 0,
                gPos, gLeft, gTop;
                
            if (!el) { return { top: 0, left: 0 }; }
            
            if (el.offsetParent) {
                do {
                    left += el.offsetLeft;
                    top += el.offsetTop;
                } while (el = el.offsetParent);
            }
            
            //If we want the position of the gallery itself, return it
            if (el_id === self.id) { return { left: left, top: top }; }
            
            //Otherwise, get position of element relative to gallery
            else {
                gPos = self.getPos(dom.galleryWrap);
                gLeft = gPos.left;
                gTop = gPos.top;
                return { left: left - gLeft, top: top - gTop };
            }
        },
        
        // determine if mouse is within the boundary of the gallery wrapper
        mouseIsOverGallery: function (x, y) {
            var self = this,
                dom = this.dom,
                pos = this.getPos(dom.gv_galleryWrap),
                top = pos.top,
                left = pos.left;
                
            return x > left && x < left + gv.outerWidth(dom.gv_galleryWrap) && y > top && y < top + gv.outerHeight(dom.gv_galleryWrap);
        },
        
        // determine if mouse is within the boundary of the panel
        mouseIsOverPanel: function (x, y) {
            var self = this,
                dom = this.dom,
                pos = this.getPos(dom.gv_panelWrap),
                gPos = this.getPos(dom.gv_galleryWrap),
                top = pos.top + gPos.top,
                left = pos.left + gPos.left;
                
            return x > left && x < left + gv.outerWidth(dom.gv_panelWrap) && y > top && y < top + gv.outerHeight(dom.gv_panelWrap);
        },
        
        // create gvImage objects for each image in gallery
        storeImages: function() {
            var self = this;
            this.sourceImgs = $('li>img',this.$el);
            this.numImages = this.sourceImgs.length;
            this.gvImages = [];
            this.sourceImgs.each(function(i,img) {
                self.gvImages[i] = new gvImage($(img));
            });
        },
        
        setDimensions: function() {
            var self = this,
                dom = this.dom,
                widths = {
                    prev: gv.innerWidth(dom.gv_navPrev),
                    play: gv.innerWidth(dom.gv_navPlay),
                    next: gv.innerWidth(dom.gv_navNext),
                    filmstrip: this.opts.frame_width,
                    fsMax: 0,
                    fsFull: 0
                },
                heights = {
                    prev: gv.innerHeight(dom.gv_navPrev),
                    play: gv.innerHeight(dom.gv_navPlay),
                    next: gv.innerHeight(dom.gv_navNext),
                    filmstrip: this.opts.frame_height + (this.opts.show_captions ? gv.outerHeight(dom.gv_caption) : 0),
                    fsMax: 0,
                    fsFull: 0
                },
                panels = [];
            
            // nav
            if(this.filmstripOrientation === 'horizontal') {
                dom.gv_navWrap.css({
                    width: widths.prev + widths.play + widths.next,
                    height: Math.max(heights.prev,heights.play,heights.next)
                });
            } else {
                if(this.opts.filmstrip_style === 'scroll' && this.opts.frame_width < (widths.prev + widths.play + widths.next)) {
                    dom.gv_navWrap.css({
                        width: Math.max(widths.prev, widths.play, widths.next),
                        height: heights.prev + heights.play + heights.next
                    });
                } else {
                    dom.gv_navWrap.css({
                        width: widths.prev + widths.play + widths.next,
                        height: Math.max(heights.prev,heights.play,heights.next)
                    });
                }
            }
            
            if(this.filmstripOrientation === 'vertical' && widths.filmstrip < (widths.prev + widths.play + widths.next)) {
                dom.gv_navWrap.css({
                    width: Math.max(widths.prev, widths.play, widths.next),
                    height: heights.prev + heights.play + heights.next
                });
            } else {
                dom.gv_navWrap.css({
                    width: widths.prev + widths.play + widths.next,
                    height: Math.max(heights.prev,heights.play,heights.next)
                });
            }
            
            // panels
            dom.gv_panel.css({
                width: this.opts.panel_width,
                height: this.opts.panel_height
            });
            dom.gv_panelWrap.css({
                width: gv.outerWidth(dom.gv_panel),
                height: gv.outerHeight(dom.gv_panel)
            });
            dom.gv_overlay.css({
                width: this.opts.panel_width
            });
            
            
            
            $.each(this.gvImages,function(i,img) {
                dom.gv_panelWrap.append(dom.gv_panel.clone(true));
            });
            
            dom.gv_panels = dom.gv_panelWrap.find('.gv_panel');
            dom.gv_panels.remove();
            
            // filmstrip
            dom.gv_thumbnail.css({
                width: this.opts.frame_width,
                height: this.opts.frame_height
            });
            dom.gv_frame.css({
                width: gv.outerWidth(dom.gv_thumbnail),
                height: gv.outerHeight(dom.gv_thumbnail) + (this.opts.show_captions ? gv.outerHeight(dom.gv_caption) : 0),
                marginRight: this.opts.frame_gap,
                marginBottom: this.opts.frame_gap
            });
            
            
            if(this.filmstripOrientation === 'horizontal') {
                this.filmstripSize = Math.floor((gv.outerWidth(dom.gv_panelWrap) - gv.outerWidth(dom.gv_navWrap)) / (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap));
                widths.fsMax = this.filmstripSize * (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap);
                widths.fsFull = this.gvImages.length * (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap);
                widths.filmstrip = Math.min(widths.fsMax,widths.fsFull);
                if(this.opts.filmstrip_style !== 'scroll') {
                    heights.filmstrip = (Math.ceil(this.gvImages.length / this.filmstripSize) * (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap)) - this.opts.frame_gap;
                }
            } else {
                this.filmstripSize = Math.floor((gv.outerHeight(dom.gv_panelWrap) - gv.outerHeight(dom.gv_navWrap)) / (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap));
                heights.fsMax = this.filmstripSize * (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap);
                heights.fsFull = this.gvImages.length * (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap);
                heights.filmstrip = Math.min(heights.fsMax,heights.fsFull);
                if(this.opts.filmstrip_style !== 'scroll') {
                    widths.filmstrip = (Math.ceil(this.gvImages.length / this.filmstripSize) * (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap)) - this.opts.frame_gap;
                }
            }
            dom.gv_filmstripWrap.css({
                width: widths.filmstrip,
                height: heights.filmstrip
            });
            
            // gallery
            if(this.opts.show_filmstrip) {
                if(this.filmstripOrientation === 'horizontal') {
                    dom.gv_gallery.css({
                        width: gv.outerWidth(dom.gv_panelWrap),
                        height: gv.outerHeight(dom.gv_panelWrap) + this.opts.frame_gap + (this.opts.show_filmstrip ? Math.max(gv.outerHeight(dom.gv_filmstripWrap),gv.outerHeight(dom.gv_navWrap)) : gv.outerHeight(dom.gv_filmstripWrap))
                    });
                } else {
                    dom.gv_gallery.css({
                        width: gv.outerWidth(dom.gv_panelWrap) + this.opts.frame_gap + (this.opts.show_filmstrip ? Math.max(gv.outerWidth(dom.gv_filmstripWrap),gv.outerWidth(dom.gv_navWrap)) : gv.outerWidth(dom.gv_filmstripWrap)),
                        height: gv.outerHeight(dom.gv_panelWrap)
                    });    
                }
            } else {
                dom.gv_gallery.css({
                    width: gv.outerWidth(dom.gv_panelWrap),
                    height: gv.outerHeight(dom.gv_panelWrap)
                });    
            }
            
            dom.gv_galleryWrap.css({
                    width: gv.outerWidth(dom.gv_gallery),
                    height: gv.outerHeight(dom.gv_gallery),
                    padding: this.opts.frame_gap
            });
        },
        
        setPositions: function() {
            var self = this,
                dom = this.dom,
                navVert = 0, fsVert = 0,
                navHorz = 0, fsHorz = 0,
                vert, horz;
            
            // determine vertical or horizontal offset
            // if negative, apply to filmstrip, otherwise apply to navbar
            if(this.filmstripOrientation === 'horizontal') {
                vert = Math.round((gv.outerHeight(dom.gv_filmstripWrap) - gv.outerHeight(dom.gv_navWrap)) / 2);
                if(vert < 0) { fsVert = -1 * vert; }
                else { navVert = vert; }
            } else {
                horz = Math.round((gv.outerWidth(dom.gv_filmstripWrap) - gv.outerWidth(dom.gv_navWrap)) / 2);
                if(horz < 0) { fsHorz = -1 * horz; }
                else { navHorz = horz; }
            }
            
            // for horizontal filmstrips w/o navigation, center the filmstrip under the panel
            if(!this.opts.show_filmstrip_nav && this.filmstripOrientation === 'horizontal') {
                fsHorz = Math.floor((gv.outerWidth(dom.gv_panelWrap) - gv.outerWidth(dom.gv_filmstripWrap)) / 2);
            }
            
            dom.gv_panelNavNext.css({ top: (gv.outerHeight(dom.gv_panel) - gv.outerHeight(dom.gv_panelNavNext)) / 2, right: 10 });
            dom.gv_panelNavPrev.css({ top: (gv.outerHeight(dom.gv_panel) - gv.outerHeight(dom.gv_panelNavPrev)) / 2, left: 10 });
            
            // pin elements to gallery corners according to filmstrip position
            switch(this.opts.filmstrip_position) {
                case 'top':
                    dom.gv_navWrap.css({ top: navVert, right: navHorz });
                    dom.gv_panelWrap.css({ bottom: 0, left: 0 });
                    dom.gv_filmstripWrap.css({ top: fsVert, left: fsHorz });
                    break;
                
                case 'right':
                    dom.gv_navWrap.css({ bottom: navVert, right: navHorz });
                    dom.gv_panelWrap.css({ top: 0, left: 0 });
                    dom.gv_filmstripWrap.css({ top: fsVert, right: fsHorz });
                    break;
                
                case 'left':
                    dom.gv_navWrap.css({ bottom: navVert, left: navHorz });
                    dom.gv_panelWrap.css({ top: 0, right: 0 });
                    dom.gv_filmstripWrap.css({ top: fsVert, left: fsHorz });
                    break;
                
                default:
                    dom.gv_navWrap.css({ bottom: navVert, right: navHorz });
                    dom.gv_panelWrap.css({ top: 0, left: 0 });
                    dom.gv_filmstripWrap.css({ bottom: fsVert, left: fsHorz });
                    break;
            }
            
            if(this.opts.overlay_position === 'top') {
                dom.gv_overlay.css({ top: 0, left: -99999 });
                dom.gv_showOverlay.css({ top: 0, left: 0 });
            } else {
                dom.gv_overlay.css({ bottom: 0, left: -99999 });
                dom.gv_showOverlay.css({ bottom: 0, left: 0 });
            }
            
            if(!this.opts.show_filmstrip_nav) {
                dom.gv_navWrap.remove();    
            }
        },
        
        buildFilmstrip: function() {
            var self = this,
                dom = this.dom,
                framesLength = this.gvImages.length * ((this.filmstripOrientation === 'horizontal' ? this.opts.frame_width : this.opts.frame_height) + this.opts.frame_gap);
            
            dom.gv_frame.append(dom.gv_thumbnail);
            if(this.opts.show_captions) { 
                dom.gv_frame.append(dom.gv_caption);
            }
            dom.gv_thumbnail.css('opacity',this.opts.frame_opacity);
            
            dom.gv_thumbnail.bind({
                mouseover: function() {
                    if(!$(this).hasClass('current')) {
                        $(this).stop().animate({opacity:1},250);
                    }
                },
                mouseout: function() {
                    if(!$(this).hasClass('current')) {
                        $(this).stop().animate({opacity:self.opts.frame_opacity},250);
                    }
                }
            });
            
            // Drop a clone of the frame element into the filmstrip for each source image
            $.each(this.gvImages,function(i,img) {
                dom.gv_frame.clone(true).prependTo(dom.gv_filmstrip);
            });
            
            dom.gv_filmstrip.css({
                width: gv.outerWidth(dom.gv_frame),
                height: gv.outerHeight(dom.gv_frame)
            });
            
            // If we are scrolling the filmstrip, and we can't show all frames at once,
            // make two additional copies of each frame
            if(this.opts.filmstrip_style === 'scroll') {
                if(this.filmstripOrientation === 'horizontal') {
                    if(framesLength > gv.innerWidth(dom.gv_filmstripWrap)) {
                        dom.gv_filmstrip.find('.gv_frame').clone(true).appendTo(dom.gv_filmstrip).clone(true).appendTo(dom.gv_filmstrip);
                        dom.gv_filmstrip.css('width',framesLength * 3);
                        this.scrolling = true;
                    } else {
                        dom.gv_filmstrip.css('width',framesLength);
                    }
                } else {
                    if(framesLength > gv.innerHeight(dom.gv_filmstripWrap)) {
                        dom.gv_filmstrip.find('.gv_frame').clone(true).appendTo(dom.gv_filmstrip).clone(true).appendTo(dom.gv_filmstrip);
                        dom.gv_filmstrip.css('height',framesLength * 3);
                        this.scrolling = true;
                    } else {
                        dom.gv_filmstrip.css('height',framesLength);
                    }
                }
            } else {
                dom.gv_filmstrip.css({
                    width: parseInt(dom.gv_filmstripWrap.css('width'),10)+this.opts.frame_gap,
                    height: parseInt(dom.gv_filmstripWrap.css('height'),10)+this.opts.frame_gap
                });
            }
            dom.gv_frames = dom.gv_filmstrip.find('.gv_frame');
            $.each(dom.gv_frames,function(i,frame) {
                $(frame).data('frameIndex',i);                          
            });
            dom.gv_thumbnails = dom.gv_filmstrip.find('div.gv_thumbnail');
        },
        
        buildGallery: function() {
            var self = this,
                dom = this.dom;
            
            this.setDimensions();
            this.setPositions();
            
            if(this.opts.show_filmstrip) {
                this.buildFilmstrip();
            }
        },
        
        showInfoBar: function() {
            if(!this.opts.show_infobar) { return; }
            var self = this,
                dom = this.dom;
            
            dom.gv_infobar.stop().stopTime('hideInfoBar_' + self.id).html((this.iterator+1) + ' of ' + this.numImages).show().css('opacity',this.opts.infobar_opacity);
            
            dom.gv_infobar.oneTime(2000 + this.opts.transition_speed,'hideInfoBar_' + self.id,function() {
                    dom.gv_infobar.fadeOut(1000);
                });
        },
        
        initImages: function() {
            var self = this,
                dom = this.dom;
            $.each(this.gvImages,function(i,gvImage) {
                var img = $('<img/>');
                img.css('visibility','hidden').data('index',i);
                img.bind('load.galleryview',function() {
                    var _img = $(this),
                        index = _img.data('index'),
                        width = this.width,
                        height = this.height,
                        parent = dom[(_img.data('parent')).type].eq((_img.data('parent')).index),
                        widthFactor = gv.innerWidth(parent) / width,
                        heightFactor = gv.innerHeight(parent) / height,
                        parentType = parent.hasClass('gv_panel') ? 'panel' : 'frame',
                        heightOffset = 0, widthOffset = 0;
                    
                    gvImage.scale[parentType] = self.opts[parentType+'_scale'] === 'fit' ? Math.min(widthFactor,heightFactor) : Math.max(widthFactor,heightFactor);
                    
                    widthOffset = Math.round((gv.innerWidth(parent) - (width * gvImage.scale[parentType])) / 2);
                    heightOffset = Math.round((gv.innerHeight(parent) - (height * gvImage.scale[parentType])) / 2);    
                    
                    _img.css({
                        width: width * gvImage.scale[parentType],
                        height: height * gvImage.scale[parentType],
                        top: heightOffset,
                        left: widthOffset
                    });
                    _img.hide().css('visibility','visible');
                    _img.remove().appendTo(parent);
                    
                    if(parentType === 'frame') {
                        _img.fadeIn();
                        parent.parent().removeClass('gv_frame-loading');
                        parent.parent().find('.gv_caption').html(gvImage.attrs.title);
                    } else if(index === self.opts.start_frame - 1) {
                        parent.prependTo(dom.gv_panelWrap);
                        parent.removeClass('gv_panel-loading');
                        _img.fadeIn();
                        self.showInfoBar();
                    } else {
                        parent.removeClass('gv_panel-loading');
                        _img.show();
                    }
                });
                
                // store eventual image container as data property
                // append to temporary storage element and set src
                if(self.opts.show_panels) {
                    img.clone(true)
                        .data('parent',{type:'gv_panels',index:i})
                        .appendTo(dom.gv_imageStore)
                        .attr('src',gvImage.src.panel);
                }
                
                if(self.opts.show_filmstrip) {
                    img.clone(true)
                        .data('parent',{type:'gv_thumbnails',index:i})
                        .appendTo(dom.gv_imageStore)
                        .attr('src',gvImage.src.frame);
                    
                    if(dom.gv_frames.length > dom.gv_panels.length) {
                        img.clone(true)
                            .data('parent',{type:'gv_thumbnails',index:i+self.numImages})
                            .appendTo(dom.gv_imageStore)
                            .attr('src',gvImage.src.frame);
                            
                        img.clone(true)
                            .data('parent',{type:'gv_thumbnails',index:i+self.numImages+self.numImages})
                            .appendTo(dom.gv_imageStore)
                            .attr('src',gvImage.src.frame);
                    }
                }
            });
        },
        
        showNext: function() {
            this.navAction = 'next';
            this.showItem(this.frameIterator+1);
        },
        
        showPrev: function() {
            this.navAction = 'prev';
            this.showItem(this.frameIterator-1);
        },
        
        showItem: function(i) {
            if(isNaN(i)) { return; }
            if(!this.opts.show_filmstrip) { i = i % this.numImages; }
            
            var self = this,
                dom = this.dom,
                frame_i = i,
                newPanelStart,
                oldPanelEnd,
                oldIterator,
                panel,
                playing = false;
                
            // don't go out of bounds
            if(i >= this.numImages) {
                i = i % this.numImages;
            } else if(i < 0) {
                i = this.numImages - 1;
                if(dom.gv_frames != undefined) {
                    frame_i = dom.gv_frames.length - 1;
                } else {
                    frame_i = dom.gv_panels.length - 1;
                }
            }
            
            panel = dom.gv_panels.eq(i);
            
            playing = this.playing;
            
            if(playing) {
                this.stopSlideshow(false);
            }
            
            this.unbindActions();
            
            dom.gv_gallery.oneTime(this.opts.transition_speed,'bindActions_' + self.id,function(){ if(playing) { self.startSlideshow(false); } self.bindActions(); });
            
            switch(this.opts.panel_animation) {
                case 'crossfade':
                    dom.gv_panels.eq(this.iterator).fadeOut(this.opts.transition_speed,function(){$(this).remove();});
                    panel.hide().prependTo(dom.gv_panelWrap).fadeIn(this.opts.transition_speed);
                    break;
                case 'fade':
                    dom.gv_panels.eq(this.iterator).remove();
                    panel.hide().prependTo(dom.gv_panelWrap).fadeIn(this.opts.transition_speed);
                    break;
                case 'slide':
                    if(this.navAction === 'next' || (this.navAction === 'frame' && frame_i > this.iterator)) {
                        newPanelStart = gv.outerWidth(dom.gv_panel);
                        oldPanelEnd = -1 * gv.outerWidth(dom.gv_panel);
                    } else {
                        newPanelStart = -1 * gv.outerWidth(dom.gv_panel);
                        oldPanelEnd = gv.outerWidth(dom.gv_panel);
                    }
                    
                    panel.css({ left:newPanelStart }).appendTo(dom.gv_panelWrap).animate(
                        { left:0 },
                        { duration: this.opts.transition_speed,easing: this.opts.easing }
                    );
                    
                    dom.gv_panels.eq(this.iterator).animate(
                        { left: oldPanelEnd },
                        { duration: this.opts.transition_speed, easing: this.opts.easing, complete: function(){ $(this).remove(); } }
                    );
                    break;
                default:
                    dom.gv_panels.eq(this.iterator).remove();
                    panel.prependTo(dom.gv_panelWrap);
                    break;
            }
            
            this.updateOverlay(i);
            
            this.iterator = i;
            this.updateFilmstrip(frame_i);
            this.showInfoBar();
            
            
        },
        
        updateOverlay: function(i) {
            var self = this,
                dom = this.dom;
            
            if(this.overlayVisible) {
                this.hideOverlay(null,function(){
                    dom.gv_overlay.html('<h4>'+self.gvImages[i].attrs.title+'</h4><p>'+self.gvImages[i].attrs.description+'</p>');
                    self.showOverlay();
                });
            } else {
                dom.gv_overlay.html('<h4>'+self.gvImages[i].attrs.title+'</h4><p>'+self.gvImages[i].attrs.description+'</p>');
                dom.gv_overlay.css(this.opts.overlay_position,-1 * dom.gv_overlay.outerHeight());
            }
            
        },
        
        hideOverlay: function(s,callback) {
            var self = this,
                dom = this.dom,
                endOverlay = {},
                endButton = {},
                speed = s || self.opts.transition_speed / 2;
                
            callback = callback || function(){};
            
            endOverlay[this.opts.overlay_position] = -1 * dom.gv_overlay.outerHeight();
            endButton[this.opts.overlay_position] = 0;
            
            dom.gv_overlay.animate(endOverlay,{ 
                duration: speed, 
                easing: 'swing', 
                complete: callback
            });
            dom.gv_showOverlay.animate(endButton,{
                duration: speed,
                easing: 'swing'
            });
            
            this.overlayVisible = false;
        },
        
        showOverlay: function(s) {
            var self = this,
                dom = this.dom,
                startOverlay = {},
                endOverlay = {},
                endButton = {},
                speed = s || self.opts.transition_speed / 2;
            
            startOverlay[this.opts.overlay_position] = -1 * dom.gv_overlay.outerHeight();
            startOverlay.left = 0;
            
            endOverlay[this.opts.overlay_position] = 0;
            
            endButton[this.opts.overlay_position] = dom.gv_overlay.outerHeight();
            
            dom.gv_overlay.css(startOverlay);
            dom.gv_overlay.animate(endOverlay,{ duration: speed, easing: 'swing' });
            dom.gv_showOverlay.animate(endButton,{ duration: speed, easing: 'swing' });
            
            this.overlayVisible = true;
        },
        
        updateFilmstrip: function(to) {
            if(!this.opts.show_filmstrip) { this.frameIterator = to; return; }
            var self = this,
                dom = this.dom,
                targetThumbs = dom.gv_thumbnails.eq(this.iterator),
                filmstripIterator,
                distance;
            
            if(this.scrolling) {
                targetThumbs = targetThumbs.
                                add(dom.gv_thumbnails.eq(this.iterator + this.numImages)).
                                add(dom.gv_thumbnails.eq(this.iterator + (2 * this.numImages)));    
            }
            
            dom.gv_thumbnails.removeClass('current').animate({ opacity: this.opts.frame_opacity });
            targetThumbs.stop().addClass('current').animate({ opacity: 1 },500);
            
            
            if(this.scrolling) {
                if(this.filmstripOrientation === 'horizontal') {
                    distance = (gv.outerWidth(dom.gv_frame) + this.opts.frame_gap) * (this.frameIterator - to);
                    
                    if(distance > 0) {
                        distance = '+=' + Math.abs(distance);
                    } else {
                        distance = '-=' + Math.abs(distance);
                    }
                    dom.gv_filmstrip.animate({
                        left: distance
                    },{
                        duration: this.opts.transition_speed, 
                        easing: this.opts.easing, 
                        complete: function(){
                            if(to < self.numImages) {
                                dom.gv_filmstrip.css('left',gv.getInt(dom.gv_filmstrip.css('left'))-(self.numImages*(gv.outerWidth(dom.gv_frame)+self.opts.frame_gap)));    
                            } else if(to >= (self.numImages * 2)) {
                                dom.gv_filmstrip.css('left',gv.getInt(dom.gv_filmstrip.css('left'))+(self.numImages*(gv.outerWidth(dom.gv_frame)+self.opts.frame_gap)));    
                            }
                            self.frameIterator = (to % self.numImages) + self.numImages;
                        }
                    });
                } else {
                    distance = (gv.outerHeight(dom.gv_frame) + this.opts.frame_gap) * (this.frameIterator - to);
                    
                    if(distance > 0) {
                        distance = '+=' + Math.abs(distance);
                    } else {
                        distance = '-=' + Math.abs(distance);
                    }
                    dom.gv_filmstrip.animate({
                        top: distance
                    },{
                        duration: this.opts.transition_speed, 
                        easing: this.opts.easing, 
                        complete: function(){
                            // adjust filmstrip position to ensure that there is always at least one frame behind
                            // and (2 * filmstripSize) ahead
                            if(to === 0) {
                                dom.gv_filmstrip.css('top',gv.getInt(dom.gv_filmstrip.css('top'))-(self.numImages*(gv.outerHeight(dom.gv_frame)+self.opts.frame_gap)));    
                                self.frameIterator = self.numImages;
                            } else if(to > ((self.numImages * 3) - (self.filmstripSize * 2))) {
                                dom.gv_filmstrip.css('top',gv.getInt(dom.gv_filmstrip.css('top'))+(self.numImages*(gv.outerHeight(dom.gv_frame)+self.opts.frame_gap)));    
                                self.frameIterator = to - self.numImages;
                            } else {
                                self.frameIterator = to;
                            }
                        }
                    });
                }
                
            } else {
                this.frameIterator = to;
            }
        },
        
        startSlideshow: function(changeIcon) {
            var self = this,
                dom = this.dom;
                
            if(!self.opts.enable_slideshow) { return; }
            
            if(changeIcon) {
                dom.gv_navPlay.removeClass('gv_navPlay').addClass('gv_navPause');
            }
            this.playing = true;
            dom.gv_galleryWrap.everyTime(this.opts.transition_interval,'slideshow_'+this.id,function(){ self.showNext(); });
        },
        
        stopSlideshow: function(changeIcon) {
            var self = this,
                dom = this.dom;
                
            if(changeIcon) {
                dom.gv_navPlay.removeClass('gv_navPause').addClass('gv_navPlay');
            }
            this.playing = false;
            dom.gv_galleryWrap.stopTime('slideshow_'+this.id);
        },
        
        enablePanning: function() {
            var self = this,
                dom = this.dom;
                
            if(!self.opts.enable_slideshow) { return; }
            
            dom.gv_panel.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), n-resize');
            if(this.opts.pan_style === 'drag') {
                dom.gv_panelWrap.delegate('.gv_panel img','mousedown.galleryview',function(e) {
                    self.isMouseDown = true;
                    $(this).css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), n-resize');
                }).delegate('.gv_panel img','mouseup.galleryview',function(e) {
                    self.isMouseDown = false;
                    $(this).css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), n-resize');
                }).delegate('.gv_panel img','mousemove.galleryview',function(e) {
                    var distY, distX,
                        image = $(this),
                        new_top, new_left;

                    if(self.isMouseDown) {
                        distY = e.pageY - self.mouse.y;
                        distX = e.pageX - self.mouse.x;
                        new_top = gv.getInt(image.css('top')) + distY;
                        new_left = gv.getInt(image.css('left')) + distX;
                            
                        image.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), n-resize');
                        
                        if(new_top > 0) new_top = 0;
                        if(new_left > 0) new_left = 0;
                        
                        if(new_top < (-1 * (gv.outerHeight(image) - gv.innerHeight(dom.gv_panel)))) { new_top = -1 * (gv.outerHeight(image) - gv.innerHeight(dom.gv_panel)); }
                        if(new_left < (-1 * (gv.outerWidth(image) - gv.innerWidth(dom.gv_panel)))) { new_left = -1 * (gv.outerWidth(image) - gv.innerWidth(dom.gv_panel)); }
                        
                        image.css('top',new_top);
                        image.css('left',new_left);
                    } else {
                        image.css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur), n-resize');    
                    }
                });
            } else {
                
            }
        },
        
        bindActions: function() {
            var self = this,
                dom = this.dom;
            
            dom.gv_showOverlay.bind('click.galleryview',function(){
                if(self.overlayVisible) {
                    self.hideOverlay(250);
                } else {
                    self.showOverlay(250);
                }
            });
            
            dom.gv_navWrap.delegate('div','click.galleryview',function(){
                var el = $(this);
                if(el.hasClass('gv_navNext')) {
                    self.showNext();
                } else if(el.hasClass('gv_navPrev')) {
                    self.showPrev();
                } else if(el.hasClass('gv_navPlay')) {
                    self.startSlideshow(true);
                } else if(el.hasClass('gv_navPause')) {
                    self.stopSlideshow(true);
                }
                return false;
            });
            
            dom.gv_panelNavNext.bind('click.galleryview',function(){ 
                self.showNext(); 
                return false;
            });
            dom.gv_panelNavPrev.bind('click.galleryview',function(){
                self.showPrev(); 
                return false;
            });
            
            dom.gv_filmstripWrap.delegate('.gv_frame','click.galleryview',function(){
                var el = $(this),
                    i = el.data('frameIndex');
                
                this.navAction = 'frame';
                self.showItem(i);
                return false;
            });
            
            dom.gv_panelWrap.bind('mouseover.galleryview',function(){
                self.showPanelNav();
            }).bind('mouseout.galleryview',function(){
                self.hidePanelNav();
            });
        },
        
        unbindActions: function() {
            var self = this,
                dom = this.dom;
                
            dom.gv_showOverlay.unbind('click.galleryview');
            dom.gv_panelNavNext.unbind('click.galleryview');
            dom.gv_panelNavPrev.unbind('click.galleryview');
            dom.gv_navWrap.undelegate('div','click.galleryview');
            dom.gv_filmstripWrap.undelegate('.gv_frame','click.galleryview');
        },
        
        showPanelNav: function() {
            var self = this,
                dom = this.dom;
                
            dom.gv_panelNavNext.show();
            dom.gv_panelNavPrev.show();    
        },
        
        hidePanelNav: function() {
            var self = this,
                dom = this.dom;
                
            dom.gv_panelNavNext.hide();
            dom.gv_panelNavPrev.hide();    
        },
        
        init: function(options,el) {
            var self = this,
                dom = this.dom = {};
                
            this.opts = $.extend({},$.fn.galleryView.defaults,options);
            this.el = el;
            this.$el = $(el);
            this.id = el.id;
            this.iterator = this.frameIterator = this.opts.start_frame - 1;
            this.overlayVisible = false;
            this.playing = false;
            this.scrolling = false;
            this.isMouseDown = false;
            this.mouse = { x: 0, y: 0 };
            this.filmstripOrientation = (this.opts.filmstrip_position === 'top' || this.opts.filmstrip_position === 'bottom') ? 'horizontal' : 'vertical';
            
            $(document).bind('mousemove.galleryview',function(e) {
                self.mouse = {x: e.pageX, y: e.pageY};       
            });
            
            // create all necessary DOM elements
            $.each(this.elems,function(i,elem) {
                var elem = elem.split('.');
                
                // if there is no tag name, assume <div>
                if(elem[0] === '') { elem[0] = 'div'; }
                
                // add jQuery element to dom object
                dom[elem[1]] = self.createElem({'class':elem[1]},elem[0]);
            });
            
            dom.gv_imageStore.appendTo($('body'));
            
            dom.gv_galleryWrap.delegate('img','mousedown.galleryview',function(e){ if(e.preventDefault) { e.preventDefault(); } });
            
            dom.gv_panel.addClass('gv_panel-loading');
            dom.gv_frame.addClass('gv_frame-loading');
            
            // nest DOM elements
            dom.gv_galleryWrap.hide().append(dom.gv_gallery);
            
            if(this.opts.show_panels) {
                dom.gv_gallery.append(dom.gv_panelWrap);
                if(this.opts.show_panel_nav) {
                    dom.gv_panelWrap.append(dom.gv_panelNavNext,dom.gv_panelNavPrev);
                }
                if(this.opts.show_infobar) {
                    dom.gv_panelWrap.append(dom.gv_infobar);
                }
            }
            
            if(this.opts.show_filmstrip) {
                dom.gv_gallery.append(
                    dom.gv_filmstripWrap.append(
                        dom.gv_filmstrip
                    )
                );
                
                if(this.opts.show_filmstrip_nav) {
                    dom.gv_gallery.append(
                        dom.gv_navWrap.append(
                            dom.gv_navPrev,
                            (this.opts.enable_slideshow?dom.gv_navPlay:$('<span></span>')),
                            dom.gv_navNext
                        )
                    );
                }
            }
            
            if(this.opts.enable_overlays) {
                dom.gv_panelWrap.append(dom.gv_overlay,dom.gv_showOverlay);    
            }
            
            if(this.opts.show_captions) {
                dom.gv_frame.append(dom.gv_caption).appendTo(dom.gv_gallery);    
            }
            
            //swap out source element with gallery
            this.$el.replaceWith(dom.gv_galleryWrap);
            
            if(this.opts.pan_images) {
                this.enablePanning();
            }
            
            // convert source images into gvImage objects
            this.storeImages();
            
            // block out dimensions/positions of gallery elements
            this.buildGallery();
            
            // begin loading images into gallery
            this.initImages();
            
            // set up transitions, buttons
            this.bindActions();
            
            // remove temporary frame element
            dom.gv_frame.remove();
            
            // show gallery
            dom.gv_galleryWrap.show();
            
            if(this.opts.autoplay) {
                this.startSlideshow(true);
            }
            
            this.updateOverlay(this.iterator);
            this.updateFilmstrip(this.frameIterator);
        }
        
    }; // END GalleryView
    
    /*
        MAIN PLUGIN CODE
    */
    $.fn.galleryView = function (options) {
        if (this.length) {
            return this.each(function () {
                var gallery = Object.create(GalleryView);
                gallery.init(options,this);
            });
        }
    };
    
    /*
        Default Options
            Object literal storing default plugin options
    */
    $.fn.galleryView.defaults = {
    
        // General Options
        transition_speed: 1000,         //INT - duration of panel/frame transition (in milliseconds)
        transition_interval: 5000,         //INT - delay between panel/frame transitions (in milliseconds)
        easing: 'swing',                 //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
        
        // Panel Options
        show_panels: true,                 //BOOLEAN - flag to show or hide panel portion of gallery
        show_panel_nav: true,             //BOOLEAN - flag to show or hide panel navigation buttons
        enable_overlays: false,             //BOOLEAN - flag to show or hide panel overlays
        panel_width: 350,                 //INT - width of gallery panel (in pixels)
        panel_height: 185,                 //INT - height of gallery panel (in pixels)
        panel_animation: 'fade',         //STRING - animation method for panel transitions (crossfade,fade,slide,none)
        panel_scale: 'crop',             //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, fit = scale image and preserve original aspect ratio)
        overlay_position: 'bottom',     //STRING - position of panel overlay (bottom, top)
        pan_images: false,                //BOOLEAN - flag to allow user to grab/drag oversized images within gallery
        pan_style: 'drag',                //STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position
        pan_smoothness: 15,                //INT - determines smoothness of tracking pan animation (higher number = smoother)
        
        // Filmstrip Options
        start_frame: 1,                 //INT - index of panel/frame to show first when gallery loads
        show_filmstrip: true,             //BOOLEAN - flag to show or hide filmstrip portion of gallery
        show_filmstrip_nav: true,         //BOOLEAN - flag indicating whether to display navigation buttons
        enable_slideshow: true,            //BOOLEAN - flag indicating whether to display slideshow play/pause button
        autoplay: true,                //BOOLEAN - flag to start slideshow on gallery load
        show_captions: false,             //BOOLEAN - flag to show or hide frame captions    
        filmstrip_size: 3,                 //INT - number of frames to show in filmstrip-only gallery
        filmstrip_style: 'scroll',         //STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary)
        filmstrip_position: 'bottom',     //STRING - position of filmstrip within gallery (bottom, top, left, right)
        frame_width: 80,                 //INT - width of filmstrip frames (in pixels)
        frame_height: 40,                 //INT - width of filmstrip frames (in pixels)
        frame_opacity: 0.4,             //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
        frame_scale: 'crop',             //STRING - cropping option for filmstrip images (same as above)
        frame_gap: 5,                     //INT - spacing between frames within filmstrip (in pixels)
        
        // Info Bar Options
        show_infobar: true,                //BOOLEAN - flag to show or hide infobar
        infobar_opacity: 1                //FLOAT - transparency for info bar
    };
})(jQuery);

Abs,

D@rk · Julho 7, 2012

Galera ninguém sabe este caso?

Estava precisando muito disso. :(

Abs,

Entrar

Colocar link nas imagens do slideshow

Pergunta

D@rk

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

JaguA

Link para o comentário

Compartilhar em outros sites

D@rk

Link para o comentário

Compartilhar em outros sites

JaguA

Link para o comentário

Compartilhar em outros sites

D@rk

Link para o comentário

Compartilhar em outros sites

JaguA

Link para o comentário

Compartilhar em outros sites

D@rk

Link para o comentário

Compartilhar em outros sites

D@rk

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades