Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Passing a url class within js

    Hello,

    I am very new here, and new to JS. I have several years of coding in PHP, ASP.net, vb.net, sql . . and more . . but JS is new ground for me.

    Also, I am sorry if this is posted in the wrong area . . was not 100% sure where to pass it.

    In short, I am using a scrolling Ajax JS script that allows images to scroll from left or right to the center of the page. When you click on them, it will call the JS. This works 100% and I am very happy with it.

    This is the html for an image in the scroll:

    PHP Code:
     <p id="flip">
      
      <
    class="example5" href="images/dir_present/Dir_SRJ_140x210.png" rel=""><img alt="Straight Razor Jazz" src="images/dir_present/Dir_SRJ_140x210.png" width="187" </a
    By using "<a class="example5". . " it does what it needs to do with the pop up, however by placing it within the html, the pop up works but the scrolling image no longer works.

    I think I need to somehow remove the "class="example5"" from the html and put it inside the JS script. But I am not sure how to do that.

    Here is the area of the JS script that contains the link that I wish to add the class:

    PHP Code:
    <script>
        function 
    customTitleCreate(itemElem) {
          
    // 1. Create a new blank element to return
          
    var title = $('<div class="title"></div>')
            
    // 2. Add the alt attribute to the title
            
    .append(itemElem.find('img').attr('alt'))
            
    // 3. Add a link to view the full size image
            
    .append(' <a href="'+itemElem.attr('href')+'">(more...)</a>')
            
    // 4. Add the tags from the rel attribute
            
    .append(' <span class="tags">'+itemElem.attr('rel')+'</span>');
          return 
    title;
        }
        
        function 
    customTitleDestroytitleElem ) {
          
    titleElem.remove(); // delete the title element
        
    }
        
        
    jQuerydocument ).ready( function(){
            
    jQuery'#flip' ).jcoverflip({titles: { createcustomTitleCreatedestroycustomTitleDestroy } });
            
          });
          
          
        
    </script> 
    "(more...)" is where the link is.

    I have tried the following and it did not work:

    PHP Code:
    <script>
        function 
    customTitleCreate(itemElem) {
          
    // 1. Create a new blank element to return
          
    var title = $('<div class="title"></div>')
            
    // 2. Add the alt attribute to the title
            
    .append(itemElem.find('img').attr('alt'))
            
    // 3. Add a link to view the full size image
            
    .append(' <a class="example5" href="'+itemElem.attr('href')+'">(more...)</a>')
            
    // 4. Add the tags from the rel attribute
            
    .append(' <span class="tags">'+itemElem.attr('rel')+'</span>');
          return 
    title;
        }
        
        function 
    customTitleDestroytitleElem ) {
          
    titleElem.remove(); // delete the title element
        
    }
        
        
    jQuerydocument ).ready( function(){
            
    jQuery'#flip' ).jcoverflip({titles: { createcustomTitleCreatedestroycustomTitleDestroy } });
            
          });
          
          
        
    </script> 

    Is there a way to accomplish this? Please advise. I am stumped.

    Thanks

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    It would help to see all the code. For example, I have no idea how the popup relates to the class or to the coverflow script.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I will do my best to add all of the related code. I will leave out the css code for now, unless you want to see that as well:

    PHP Code:

        
    <script type="text/javascript" src="../../js/development-bundle/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="../../js/development-bundle/ui/jquery-ui-1.7.3.custom.js"></script>
        <script type="text/javascript" src="../../js/jquery.jcoverflip.js"></script>
        <link media="screen" rel="stylesheet" href="cbox/example5/colorbox.css" />
        <script src="../../cbox/colorbox/jquery.colorbox.js"></script>
    </head>
    <script>
            $(document).ready(function(){
                //Examples of how to assign the ColorBox event to elements
                $("a[rel='example1']").colorbox();
                $("a[rel='example2']").colorbox({transition:"fade"});
                $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
                $("a[rel='example4']").colorbox({slideshow:true});
                $(".example5").colorbox();
                $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
                $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
                $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
                $(".example9").colorbox({
                    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
                });
                
                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){ 
                    $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>
        
        <script>
        
        
        
    jQuery( document ).ready( function(){
            jQuery( '#flip' ).jcoverflip({
              current: 2,
              beforeCss: function( el, container, offset ){
                return [
                  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
                  $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
                ];
              },
              afterCss: function( el, container, offset ){
                return [
                  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
                  $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
                ];
              },
              currentCss: function( el, container ){
                return [
                  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
                  $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
                ];
              },
              change: function(event, ui){
                jQuery('#scrollbar').slider('value', ui.to*25);
              }
            });
            
            
            jQuery('#scrollbar').slider({
              value: 50,
              stop: function(event, ui) {
                if(event.originalEvent) {
                  var newVal = Math.round(ui.value/25);
                  jQuery( '#flip' ).jcoverflip( 'current', newVal );
                  jQuery('#scrollbar').slider('value', newVal*25);
                }
              }
            });
          });
    </script>
    <body>
    <div id="wrapper">



        <p id="flip">
      
      <a class="example5" href="images/dir_present/Dir_SRJ_140x210.png" rel=""><img alt="Straight Razor Jazz" src="images/dir_present/Dir_SRJ_140x210.png" width="187" </a>
    </p> 
    Last edited by KuyaRomeo; 07-13-2011 at 11:58 AM.

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here are the linked files:

    jjquery.colorbox.js


    PHP Code:
    ColorBox v1.3.17.2 a full featuredlight-weightcustomizable lightbox based on jQuery 1.3+
    // Copyright (c) 2011 Jack Moore - jack@colorpowered.com
    // Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php

    (function ($, documentwindow) {
        var
        
    // ColorBox Default Settings.    
        // See http://colorpowered.com/colorbox for details.
        
    defaults = {
            
    transition"elastic",
            
    speed300,
            
    widthfalse,
            
    initialWidth"600",
            
    innerWidthfalse,
            
    maxWidthfalse,
            
    heightfalse,
            
    initialHeight"450",
            
    innerHeightfalse,
            
    maxHeightfalse,
            
    scalePhotostrue,
            
    scrollingtrue,
            
    inlinefalse,
            
    htmlfalse,
            
    iframefalse,
            
    fastIframetrue,
            
    photofalse,
            
    hreffalse,
            
    titlefalse,
            
    relfalse,
            
    opacity0.9,
            
    preloadingtrue,
            
    current"image {current} of {total}",
            
    previous"previous",
            
    next"next",
            
    close"close",
            
    openfalse,
            
    returnFocustrue,
            
    looptrue,
            
    slideshowfalse,
            
    slideshowAutotrue,
            
    slideshowSpeed2500,
            
    slideshowStart"start slideshow",
            
    slideshowStop"stop slideshow",
            
    onOpenfalse,
            
    onLoadfalse,
            
    onCompletefalse,
            
    onCleanupfalse,
            
    onClosedfalse,
            
    overlayClosetrue,        
            
    escKeytrue,
            
    arrowKeytrue,
            
    topfalse,
            
    bottomfalse,
            
    leftfalse,
            
    rightfalse,
            
    fixedfalse,
            
    datafalse
        
    },
        
        
    // Abstracting the HTML and event identifiers for easy rebranding
        
    colorbox 'colorbox',
        
    prefix 'cbox',
        
    boxElement prefix 'Element',
        
        
    // Events    
        
    event_open prefix '_open',
        
    event_load prefix '_load',
        
    event_complete prefix '_complete',
        
    event_cleanup prefix '_cleanup',
        
    event_closed prefix '_closed',
        
    event_purge prefix '_purge',
        
        
    // Special Handling for IE
        
    isIE = $.browser.msie && !$.support.opacity// Detects IE6,7,8.  IE9 supports opacity.  Feature detection alone gave a false positive on at least one phone browser and on some development versions of Chrome, hence the user-agent test.
        
    isIE6 isIE && $.browser.version 7,
        
    event_ie6 prefix '_IE6',

        
    // Cached jQuery Object Variables
        
    $overlay,
        
    $box,
        
    $wrap,
        
    $content,
        
    $topBorder,
        
    $leftBorder,
        
    $rightBorder,
        
    $bottomBorder,
        
    $related,
        
    $window,
        
    $loaded,
        
    $loadingBay,
        
    $loadingOverlay,
        
    $title,
        
    $current,
        
    $slideshow,
        
    $next,
        
    $prev,
        
    $close,
        
    $groupControls,

        
    // Variables for cached values or use across multiple functions
        
    settings,
        
    interfaceHeight,
        
    interfaceWidth,
        
    loadedHeight,
        
    loadedWidth,
        
    element,
        
    index,
        
    photo,
        
    open,
        
    active,
        
    closing,
        
    handler,
        
    loadingTimer,
        
    publicMethod;
        
        
    // ****************
        // HELPER FUNCTIONS
        // ****************

        // jQuery object generator to reduce code size
        
    function $div(idcssTextdiv) { 
            
    div document.createElement('div');
            if (
    id) {
                
    div.id prefix id;
            }
            
    div.style.cssText cssText || '';
            return $(
    div);
        }

        
    // Convert '%' and 'px' values to integers
        
    function setSize(sizedimension) {
            return 
    Math.round((/%/.test(size) ? ((dimension === 'x' $window.width() : $window.height()) / 100) : 1) * parseInt(size10));
        }
        
        
    // Checks an href to see if it is a photo.
        // There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.
        
    function isImage(url) {
            return 
    settings.photo || /.(gif|png|jpg|jpeg|bmp)(?:?([^#]*))?(?:#(\.*))?$/i.test(url);
        
    }
        
        
    // Assigns function results to their respective settings.  This allows functions to be used as values.
        
    function makeSettings(i) {
            
    settings = $.extend({}, $.data(elementcolorbox));
            
            for (
    i in settings) {
                if ($.
    isFunction(settings[i]) && i.substring(02) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time.
                    
    settings[i] = settings[i].call(element);
                }
            }
            
            
    settings.rel settings.rel || element.rel || 'nofollow';
            
    settings.href settings.href || $(element).attr('href');
            
    settings.title settings.title || element.title;
            
            if (
    typeof settings.href === "string") {
                
    settings.href = $.trim(settings.href);
            }
        }

        function 
    trigger(eventcallback) {
            if (
    callback) {
                
    callback.call(element);
            }
            $.
    event.trigger(event);
        }

        
    // Slideshow functionality
        
    function slideshow() {
            var
            
    timeOut,
            
    className prefix "Slideshow_",
            
    click "click." prefix,
            
    start,
            
    stop,
            
    clear;
            
            if (
    settings.slideshow && $related[1]) {
                
    start = function () {
                    
    $slideshow
                        
    .text(settings.slideshowStop)
                        .
    unbind(click)
                        .
    bind(event_complete, function () {
                            if (
    index $related.length || settings.loop) {
                                
    timeOut setTimeout(publicMethod.nextsettings.slideshowSpeed);
                            }
                        })
                        .
    bind(event_load, function () {
                            
    clearTimeout(timeOut);
                        })
                        .
    one(click ' ' event_cleanupstop);
                    
    $box.removeClass(className "off").addClass(className "on");
                    
    timeOut setTimeout(publicMethod.nextsettings.slideshowSpeed);
                };
                
                
    stop = function () {
                    
    clearTimeout(timeOut);
                    
    $slideshow
                        
    .text(settings.slideshowStart)
                        .
    unbind([event_completeevent_loadevent_cleanupclick].join(' '))
                        .
    one(clickstart);
                    
    $box.removeClass(className "on").addClass(className "off");
                };
                
                if (
    settings.slideshowAuto) {
                    
    start();
                } else {
                    
    stop();
                }
            } else {
                
    $box.removeClass(className "off " className "on");
            }
        }

        function 
    launch(target) {
            if (!
    closing) {
                
                
    element target;
                
                
    makeSettings();
                
                
    $related = $(element);
                
                
    index 0;
                
                if (
    settings.rel !== 'nofollow') {
                    
    $related = $('.' boxElement).filter(function () {
                        var 
    relRelated = $.data(thiscolorbox).rel || this.rel;
                        return (
    relRelated === settings.rel);
                    });
                    
    index $related.index(element);
                    
                    
    // Check direct calls to ColorBox.
                    
    if (index === -1) {
                        
    $related $related.add(element);
                        
    index $related.length 1;
                    }
                }
                
                if (!
    open) {
                    
    open active true// Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
                    
                    
    $box.show();
                    
                    if (
    settings.returnFocus) {
                        try {
                            
    element.blur();
                            $(
    element).one(event_closed, function () {
                                try {
                                    
    this.focus();
                                } catch (
    e) {
                                    
    // do nothing
                                
    }
                            });
                        } catch (
    e) {
                            
    // do nothing
                        
    }
                    }
                    
                    
    // +settings.opacity avoids a problem in IE when using non-zero-prefixed-string-values, like '.5'
                    
    $overlay.css({"opacity": +settings.opacity"cursor"settings.overlayClose "pointer" "auto"}).show();
                    
                    
    // Opens inital empty ColorBox prior to content being loaded.
                    
    settings.setSize(settings.initialWidth'x');
                    
    settings.setSize(settings.initialHeight'y');
                    
    publicMethod.position();
                    
                    if (
    isIE6) {
                        
    $window.bind('resize.' event_ie6 ' scroll.' event_ie6, function () {
                            
    $overlay.css({width$window.width(), height$window.height(), top$window.scrollTop(), left$window.scrollLeft()});
                        }).
    trigger('resize.' event_ie6);
                    }
                    
                    
    trigger(event_opensettings.onOpen);
                    
                    
    $groupControls.add($title).hide();
                    
                    
    $close.html(settings.close).show();
                }
                
                
    publicMethod.load(true);
            }
        } 

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Continued:

    PHP Code:
        // ****************
        // PUBLIC FUNCTIONS
        // Usage format: $.fn.colorbox.close();
        // Usage from within an iframe: parent.$.fn.colorbox.close();
        // ****************
        
        
    publicMethod = $.fn[colorbox] = $[colorbox] = function (optionscallback) {
            var 
    $this this;
            
            
    options options || {};
            
            if (!
    $this[0]) {
                if (
    $this.selector) { // if a selector was given and it didn't match any elements, go ahead and exit.
                    
    return $this;
                }
                
    // if no selector was given (ie. $.colorbox()), create a temporary element to work with
                
    $this = $('<a/>');
                
    options.open true// assume an immediate open
            
    }
            
            if (
    callback) {
                
    options.onComplete callback;
            }
            
            
    $this.each(function () {
                $.
    data(thiscolorbox, $.extend({}, $.data(thiscolorbox) || defaultsoptions));
                $(
    this).addClass(boxElement);
            });
            
            if (($.
    isFunction(options.open) && options.open.call($this)) || options.open) {
                
    launch($this[0]);
            }
            
            return 
    $this;
        };

        
    // Initialize ColorBox: store common calculations, preload the interface graphics, append the html.
        // This preps ColorBox for a speedy open when clicked, and minimizes the burdon on the browser by only
        // having to run once, instead of each time colorbox is opened.
        
    publicMethod.init = function () {
            
    // Create & Append jQuery Objects
            
    $window = $(window);
            
    $box $div().attr({idcolorbox'class'isIE prefix + (isIE6 'IE6' 'IE') : ''});
            
    $overlay $div("Overlay"isIE6 'position:absolute' '').hide();
            
            
    $wrap $div("Wrapper");
            
    $content $div("Content").append(
                
    $loaded $div("LoadedContent"'width:0; height:0; overflow:hidden'),
                
    $loadingOverlay $div("LoadingOverlay").add($div("LoadingGraphic")),
                
    $title $div("Title"),
                
    $current $div("Current"),
                
    $next $div("Next"),
                
    $prev $div("Previous"),
                
    $slideshow $div("Slideshow").bind(event_openslideshow),
                
    $close $div("Close")
            );
            
    $wrap.append// The 3x3 Grid that makes up ColorBox
                
    $div().append(
                    
    $div("TopLeft"),
                    
    $topBorder $div("TopCenter"),
                    
    $div("TopRight")
                ),
                
    $div(false'clear:left').append(
                    
    $leftBorder $div("MiddleLeft"),
                    
    $content,
                    
    $rightBorder $div("MiddleRight")
                ),
                
    $div(false'clear:left').append(
                    
    $div("BottomLeft"),
                    
    $bottomBorder $div("BottomCenter"),
                    
    $div("BottomRight")
                )
            ).
    children().children().css({'float''left'});
            
            
    $loadingBay $div(false'position:absolute; width:9999px; visibility:hidden; display:none');
            
            $(
    'body').prepend($overlay$box.append($wrap$loadingBay));
            
            
    $content.children()
            .
    hover(function () {
                $(
    this).addClass('hover');
            }, function () {
                $(
    this).removeClass('hover');
            }).
    addClass('hover');
            
            
    // Cache values needed for size calculations
            
    interfaceHeight $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();//Subtraction needed for IE6
            
    interfaceWidth $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
            
    loadedHeight $loaded.outerHeight(true);
            
    loadedWidth $loaded.outerWidth(true);
            
            
    // Setting padding to remove the need to do size conversions during the animation step.
            
    $box.css({"padding-bottom"interfaceHeight"padding-right"interfaceWidth}).hide();
            
            
    // Setup button events.
            // Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly.
            
    $next.click(function () {
                
    publicMethod.next();
            });
            
    $prev.click(function () {
                
    publicMethod.prev();
            });
            
    $close.click(function () {
                
    publicMethod.close();
            });
            
            
    $groupControls $next.add($prev).add($current).add($slideshow);
            
            
    // Adding the 'hover' class allowed the browser to load the hover-state
            // background graphics in case the images were not part of a sprite.  The class can now can be removed.
            
    $content.children().removeClass('hover');
            
            
    $overlay.click(function () {
                if (
    settings.overlayClose) {
                    
    publicMethod.close();
                }
            });
            
            
    // Set Navigation Key Bindings
            
    $(document).bind('keydown.' prefix, function (e) {
                var 
    key e.keyCode;
                if (
    open && settings.escKey && key === 27) {
                    
    e.preventDefault();
                    
    publicMethod.close();
                }
                if (
    open && settings.arrowKey && $related[1]) {
                    if (
    key === 37) {
                        
    e.preventDefault();
                        
    $prev.click();
                    } else if (
    key === 39) {
                        
    e.preventDefault();
                        
    $next.click();
                    }
                }
            });
        };
        
        
    publicMethod.remove = function () {
            
    $box.add($overlay).remove();
            $(
    '.' boxElement).removeData(colorbox).removeClass(boxElement);
        };

        
    publicMethod.position = function (speedloadedCallback) {
            var 
    top 0left 0;
            
            
    $window.unbind('resize.' prefix);
            
            
    // remove the modal so that it doesn't influence the document width/height        
            
    $box.hide();
            
            if (
    settings.fixed && !isIE6) {
                
    $box.css({position'fixed'});
            } else {
                
    top $window.scrollTop();
                
    left $window.scrollLeft();
                
    $box.css({position'absolute'});
            }
            
            
    // keeps the top and left positions within the browser's viewport.
            
    if (settings.right !== false) {
                
    left += Math.max($window.width() - settings.loadedWidth interfaceWidth setSize(settings.right'x'), 0);
            } else if (
    settings.left !== false) {
                
    left += setSize(settings.left'x');
            } else {
                
    left += Math.round(Math.max($window.width() - settings.loadedWidth interfaceWidth0) / 2);
            }
            
            if (
    settings.bottom !== false) {
                
    top += Math.max(document.documentElement.clientHeight settings.loadedHeight interfaceHeight setSize(settings.bottom'y'), 0);
            } else if (
    settings.top !== false) {
                
    top += setSize(settings.top'y');
            } else {
                
    top += Math.round(Math.max(document.documentElement.clientHeight settings.loadedHeight interfaceHeight0) / 2);
            }
            
            
    $box.show();
            
            
    // setting the speed to 0 to reduce the delay between same-sized content.
            
    speed = ($box.width() === settings.loadedWidth && $box.height() === settings.loadedHeight) ? speed || 0;
            
            
    // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
            // but it has to be shrank down around the size of div#colorbox when it's done.  If not,
            // it can invoke an obscure IE bug when using iframes.
            
    $wrap[0].style.width $wrap[0].style.height "9999px";
            
            function 
    modalDimensions(that) {
                
    // loading overlay height has to be explicitly set for IE6.
                
    $topBorder[0].style.width $bottomBorder[0].style.width $content[0].style.width that.style.width;
                
    $loadingOverlay[0].style.height $loadingOverlay[1].style.height $content[0].style.height $leftBorder[0].style.height $rightBorder[0].style.height that.style.height;
            }
            
            
    $box.dequeue().animate({widthsettings.loadedWidthheightsettings.loadedHeighttoptopleftleft}, {
                
    durationspeed,
                
    complete: function () {
                    
    modalDimensions(this);
                    
                    
    active false;
                    
                    
    // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
                    
    $wrap[0].style.width = (settings.loadedWidth interfaceWidth) + "px";
                    
    $wrap[0].style.height = (settings.loadedHeight interfaceHeight) + "px";
                    
                    if (
    loadedCallback) {
                        
    loadedCallback();
                    }
                    
                    
    setTimeout(function(){  // small delay before binding onresize due to an IE8 bug.
                        
    $window.bind('resize.' prefixpublicMethod.position);
                    }, 
    1);
                },
                
    step: function () {
                    
    modalDimensions(this);
                }
            });
        };

        
    publicMethod.resize = function (options) {
            if (
    open) {
                
    options options || {};
                
                if (
    options.width) {
                    
    settings.setSize(options.width'x') - loadedWidth interfaceWidth;
                }
                if (
    options.innerWidth) {
                    
    settings.setSize(options.innerWidth'x');
                }
                
    $loaded.css({widthsettings.w});
                
                if (
    options.height) {
                    
    settings.setSize(options.height'y') - loadedHeight interfaceHeight;
                }
                if (
    options.innerHeight) {
                    
    settings.setSize(options.innerHeight'y');
                }
                if (!
    options.innerHeight && !options.height) {                
                    var 
    $child $loaded.wrapInner("<div style='overflow:auto'></div>").children(); // temporary wrapper to get an accurate estimate of just how high the total content should be.
                    
    settings.$child.height();
                    
    $child.replaceWith($child.children()); // ditch the temporary wrapper div used in height calculation
                
    }
                
    $loaded.css({heightsettings.h});
                
                
    publicMethod.position(settings.transition === "none" settings.speed);
            }
        };

        
    publicMethod.prep = function (object) {
            if (!
    open) {
                return;
            }
            
            var 
    callbackspeed settings.transition === "none" settings.speed;
            
            
    $loaded.remove();
            
    $loaded $div('LoadedContent').append(object);
            
            function 
    getWidth() {
                
    settings.settings.|| $loaded.width();
                
    settings.settings.mw && settings.mw settings.settings.mw settings.w;
                return 
    settings.w;
            }
            function 
    getHeight() {
                
    settings.settings.|| $loaded.height();
                
    settings.settings.mh && settings.mh settings.settings.mh settings.h;
                return 
    settings.h;
            }
            
            
    $loaded.hide()
            .
    appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
            
    .css({widthgetWidth(), overflowsettings.scrolling 'auto' 'hidden'})
            .
    css({heightgetHeight()})// sets the height independently from the width in case the new width influences the value of height.
            
    .prependTo($content);
            
            
    $loadingBay.hide();
            
            
    // floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width.
            //$(photo).css({'float': 'none', marginLeft: 'auto', marginRight: 'auto'});
            
            
    $(photo).css({'float''none'});
            
            
    // Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay.
            
    if (isIE6) {
                $(
    'select').not($box.find('select')).filter(function () {
                    return 
    this.style.visibility !== 'hidden';
                }).
    css({'visibility''hidden'}).one(event_cleanup, function () {
                    
    this.style.visibility 'inherit';
                });
            }
            
            
    callback = function () {
                var 
    prevprevSrcnextnextSrctotal $related.lengthiframecomplete;
                
                if (!
    open) {
                    return;
                }
                
                function 
    removeFilter() {
                    if (
    isIE) {
                        
    $box[0].style.removeAttribute('filter');
                    }
                }
                
                
    complete = function () {
                    
    clearTimeout(loadingTimer);
                    
    $loadingOverlay.hide();
                    
    trigger(event_completesettings.onComplete);
                };
                
                if (
    isIE) {
                    
    //This fadeIn helps the bicubic resampling to kick-in.
                    
    if (photo) {
                        
    $loaded.fadeIn(100);
                    }
                }
                
                
    $title.html(settings.title).add($loaded).show();
                
                if (
    total 1) { // handle grouping
                    
    if (typeof settings.current === "string") {
                        
    $current.html(settings.current.replace('{current}'index 1).replace('{total}'total)).show();
                    }
                    
                    
    $next[(settings.loop || index total 1) ? "show" "hide"]().html(settings.next);
                    
    $prev[(settings.loop || index) ? "show" "hide"]().html(settings.previous);
                    
                    
    prev index $related[index 1] : $related[total 1];
                    
    next index total $related[index 1] : $related[0];
                    
                    if (
    settings.slideshow) {
                        
    $slideshow.show();
                    }
                    
                    
    // Preloads images within a rel group
                    
    if (settings.preloading) {
                        
    nextSrc = $.data(nextcolorbox).href || next.href;
                        
    prevSrc = $.data(prevcolorbox).href || prev.href;
                        
                        
    nextSrc = $.isFunction(nextSrc) ? nextSrc.call(next) : nextSrc;
                        
    prevSrc = $.isFunction(prevSrc) ? prevSrc.call(prev) : prevSrc;
                        
                        if (
    isImage(nextSrc)) {
                            $(
    '<img/>')[0].src nextSrc;
                        }
                        
                        if (
    isImage(prevSrc)) {
                            $(
    '<img/>')[0].src prevSrc;
                        }
                    }
                } else {
                    
    $groupControls.hide();
                }
                
                if (
    settings.iframe) {
                    
    iframe = $('<iframe/>').addClass(prefix 'Iframe')[0];
                    
                    if (
    settings.fastIframe) {
                        
    complete();
                    } else {
                        $(
    iframe).one('load'complete);
                    }
                    
    iframe.name prefix + (+new Date());
                    
    iframe.src settings.href;
                    
                    if (!
    settings.scrolling) {
                        
    iframe.scrolling "no";
                    }
                    
                    if (
    isIE) {
                        
    iframe.frameBorder 0;
                        
    iframe.allowTransparency "true";
                    }
                    
                    $(
    iframe).appendTo($loaded).one(event_purge, function () {
                        
    iframe.src "//about:blank";
                    });
                } else {
                    
    complete();
                }
                
                if (
    settings.transition === 'fade') {
                    
    $box.fadeTo(speed1removeFilter);
                } else {
                    
    removeFilter();
                }
            };
            
            if (
    settings.transition === 'fade') {
                
    $box.fadeTo(speed0, function () {
                    
    publicMethod.position(0callback);
                });
            } else {
                
    publicMethod.position(speedcallback);
            }
        };

        
    publicMethod.load = function (launched) {
            var 
    hrefsetResizeprep publicMethod.prep;
            
            
    active true;
            
            
    photo false;
            
            
    element $related[index];
            
            if (!
    launched) {
                
    makeSettings();
            }
            
            
    trigger(event_purge);
            
            
    trigger(event_loadsettings.onLoad);
            
            
    settings.settings.height ?
                    
    setSize(settings.height'y') - loadedHeight interfaceHeight :
                    
    settings.innerHeight && setSize(settings.innerHeight'y');
            
            
    settings.settings.width ?
                    
    setSize(settings.width'x') - loadedWidth interfaceWidth :
                    
    settings.innerWidth && setSize(settings.innerWidth'x');
            
            
    // Sets the minimum dimensions for use in image scaling
            
    settings.mw settings.w;
            
    settings.mh settings.h;
            
            
    // Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
            // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
            
    if (settings.maxWidth) {
                
    settings.mw setSize(settings.maxWidth'x') - loadedWidth interfaceWidth;
                
    settings.mw settings.&& settings.settings.mw settings.settings.mw;
            }
            if (
    settings.maxHeight) {
                
    settings.mh setSize(settings.maxHeight'y') - loadedHeight interfaceHeight;
                
    settings.mh settings.&& settings.settings.mh settings.settings.mh;
            }
            
            
    href settings.href;
            
            
    loadingTimer setTimeout(function () {
                
    $loadingOverlay.show();
            }, 
    100);
            
            if (
    settings.inline) {
                
    // Inserts an empty placeholder where inline content is being pulled from.
                // An event is bound to put inline content back when ColorBox closes or loads new content.
                
    $div().hide().insertBefore($(href)[0]).one(event_purge, function () {
                    $(
    this).replaceWith($loaded.children());
                });
                
    prep($(href));
            } else if (
    settings.iframe) {
                
    // IFrame element won't be added to the DOM until it is ready to be displayed, 

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    . . . continued . . .

    PHP Code:
    // to avoid problems with DOM-ready JS that might be trying to run in that iframe.
                
    prep(" ");
            } else if (
    settings.html) {
                
    prep(settings.html);
            } else if (
    isImage(href)) {
                $(
    photo = new Image())
                .
    addClass(prefix 'Photo')
                .
    error(function () {
                    
    settings.title false;
                    
    prep($div('Error').text('This image could not be loaded'));
                })
                .
    load(function () {
                    var 
    percent;
                    
    photo.onload null//stops animated gifs from firing the onload repeatedly.
                    
                    
    if (settings.scalePhotos) {
                        
    setResize = function () {
                            
    photo.height -= photo.height percent;
                            
    photo.width -= photo.width percent;    
                        };
                        if (
    settings.mw && photo.width settings.mw) {
                            
    percent = (photo.width settings.mw) / photo.width;
                            
    setResize();
                        }
                        if (
    settings.mh && photo.height settings.mh) {
                            
    percent = (photo.height settings.mh) / photo.height;
                            
    setResize();
                        }
                    }
                    
                    if (
    settings.h) {
                        
    photo.style.marginTop Math.max(settings.photo.height0) / 'px';
                    }
                    
                    if (
    $related[1] && (index $related.length || settings.loop)) {
                        
    photo.style.cursor 'pointer';
                        
    photo.onclick = function () {
                            
    publicMethod.next();
                        };
                    }
                    
                    if (
    isIE) {
                        
    photo.style.msInterpolationMode 'bicubic';
                    }
                    
                    
    setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise.
                        
    prep(photo);
                    }, 
    1);
                });
                
                
    setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise.
                    
    photo.src href;
                }, 
    1);
            } else if (
    href) {
                
    $loadingBay.load(hrefsettings.data, function (datastatusxhr) {
                    
    prep(status === 'error' $div('Error').text('Request unsuccessful: ' xhr.statusText) : $(this).contents());
                });
            }
        };
            
        
    // Navigates to the next page/image in a set.
        
    publicMethod.next = function () {
            if (!
    active && $related[1] && (index $related.length || settings.loop)) {
                
    index index $related.length index 0;
                
    publicMethod.load();
            }
        };
        
        
    publicMethod.prev = function () {
            if (!
    active && $related[1] && (index || settings.loop)) {
                
    index index index $related.length 1;
                
    publicMethod.load();
            }
        };

        
    // Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close();
        
    publicMethod.close = function () {
            if (
    open && !closing) {
                
                
    closing true;
                
                
    open false;
                
                
    trigger(event_cleanupsettings.onCleanup);
                
                
    $window.unbind('.' prefix ' .' event_ie6);
                
                
    $overlay.fadeTo(2000);
                
                
    $box.stop().fadeTo(3000, function () {
                     
                    
    $box.add($overlay).css({'opacity'1cursor'auto'}).hide();
                    
                    
    trigger(event_purge);
                    
                    
    $loaded.remove();
                    
                    
    setTimeout(function () {
                        
    closing false;
                        
    trigger(event_closedsettings.onClosed);
                    }, 
    1);
                });
            }
        };

        
    // A method for fetching the current element ColorBox is referencing.
        // returns a jQuery object.
        
    publicMethod.element = function () {
            return $(
    element);
        };

        
    publicMethod.settings defaults;
        
        
    // Bind the live event before DOM-ready for maximum performance in IE6 & 7.
        
    handler = function (e) {
            
    // checks to see if it was a non-left mouse-click and for clicks modified with ctrl, shift, or alt.
            
    if (!((e.button !== && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey)) {
                
    e.preventDefault();
                
    launch(this);
            }
        };
        
        if ($.
    fn.delegate) {
            $(
    document).delegate('.' boxElement'click'handler);
        } else {
            $(
    '.' boxElement).live('click'handler);
        }
        
        
    // Initializes ColorBox when the DOM has loaded
        
    $(publicMethod.init);

    }(
    jQuerydocumentthis)); 

    I hope this helps. Let me know if you need the other js files or to actually see the css files??/

    Thank you for looking[/PHP][/PHP]

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Script jcoverflip

    PHP Code:
    *
     * 
    jCoverflip Present your featured content elegantly.
     * 
    Version1.0.2
     
    Copyright 2010 New Signature
     

     * 
    This program is free softwareyou can redistribute it and/or modify it under the terms of the 
     
    GNU General Public License as published by the Free Software Foundationeither version 3 of the 
     
    License, or (at your optionany later version.
     *
     * 
    This program is distributed in the hope that it will be usefulbut WITHOUT ANY WARRANTY
     * 
    without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  
     * 
    See the GNU General Public License for more details.
     *
     * 
    You should have received a copy of the GNU General Public License along with this program.  
     * If 
    notsee <http://www.gnu.org/licenses/>.
     
    *
     * 
    You can contact New Signature by electronic mail at labs@newsignature.com 
     
    * or- by U.SPostal Service at 1100 H StNWSuite 940WashingtonDC 20005.
     
    */
    ( function( $ ){
    //
    // Helpers
    //
    var undefined// safeguards against anyone who wants to change the value of undefined in the global space

    var nofn = function(){};

    var 
    proxy = function( contextfn ){
            return function( ){
                if( $.
    isFunctionfn ) ){
                    return 
    fn.applycontextarguments );
                } else {
                    return 
    contextfn ].applycontextarguments );
                }
            };
        };




    //
    // Animation queue
    //
    animationqueue = { };

    /**
     * Animation Queue
     * 
     * The AnimationQueue holds list of AnimationSets that each perform a set of animations. The sets
     * run in ordering when the AnimationQueue is animating. As well, the running time is distributed 
     * across all the sets when the AnimationQueue is animating.
     *
     * As well, the AnimationQueue can be stopped and started again at any time. AnimationSets can be 
     * removed when stopped when they are not needed anymore.
     *
     */
    animationqueue.AnimationQueue = function(){
        
    this.sets = [];
        
        
    this.isRunning false;
        
    this.current 0;
        
        
    this.totalTime 0;
        
    this.elapsedTime 0;
        
    this.startTime 1;
        
    this.poll null;
    };

    animationqueue.AnimationQueue.prototype = {
        
    /**
         * Add an AnimationSet to the end of the queue.
         *
         * @param animationSet
         *   The AnimationSet object to add to the end of the queue.
         */
        
    queue: function( animationSet ){
            
    this.sets.pushanimationSet );
        },
        
        
    /**
         * Start the animation.
         *
         * @param time
         *   The total running time of the animation in milliseconds.
         */
        
    start: function( timecallback ){
            
    this.totalTime time;
            
    this.elapsedTime 0;
            
    this.isRunning true;
            
            
    callback = $.isFunctioncallback )? callback nofn;
            
            
    // calculate the how to divide the time between the sets
            // Each set gets 1 part of the time except for the first which can get less if "paused."
            
    var timeShare 1// total number of parts to divide the time by
            
    var firstTimeShare 1// the part for the first item
            
    if( this.sets.length ){
                
    timeShare this.sets.length;
                
    firstTimeShare this.sets].totalTime 0Math.max0Math.min11-(this.sets].elapsedTime this.sets].totalTime) ) ): 1;
                
    //timeShare += firstTimeShare;
            

            var 
    startTime = (new Date( )).getTime( );
            
            if( 
    this.sets.length ){
                
    this.sets].startfirstTimeShare/timeShare*this.totalTime );
            }
            
            
            (function( 
    selftotalTimetimeShare ){ 
                function 
    poll( ){
                    
    self.elapsedTime = (new Date( )).getTime( ) - startTime;
                    
                    if( 
    self.sets.length && !self.sets].isRunning ){
                        
    self.sets.shift( );
                        if( 
    self.sets.length ){
                            
    self.sets].starttotalTime/timeShare );
                        }
                    }
                    
                    if( 
    self.elapsedTime >= self.totalTime && self.sets.length == ){
                        
    callbackself.elapsedTime  );
                        
    self.stop( );
                    }
                }
                
    self.poll setIntervalpoll16 );
            } )( 
    thisthis.totalTimetimeShare );
        },
        
        
    /**
         * Stop the animation.
         */
        
    stop: function( ){
            if( 
    this.isRunning ){
                
    this.isRunning false;
                
                var 
    this.sets.length;
                while( 
    i-- ){
                    
    this.sets].stop( );
                }
                
                
    clearIntervalthis.poll );
            }
        },
        
        
    /**
         * Remove an AnimationSet from the queue.
         *
         * @param animationSet
         *   The AnimationSet to remove from the queue.
         */
        
    remove: function( animationSet ){
            var 
    this.sets.length;
            while( 
    i-- ){
                if( 
    this.sets] == animationSet ){
                    var 
    newSets this.sets.slice0);
                    
    this.animationSet =  newSets.pushthis.sets.slice) );
                }
            }
        },
        
        
    /**
         * Get an array of all the AnimationSets in order. The array is not live, but the AnimationSets are.
         *
         * @return array of AnimationSets
         */
        
    get: function( ){
            return 
    this.sets.slice); // .slice is to clone the array but not the objects
        
    }
    };



    /**
     *
     *
     *
     */
    animationqueue.AnimationSet = function(){
        
    this.steps = [ ];
        
    this.isStepsSorted true;
        
    this.currentStep = -1;
        
    this.animations = [ ];
        
        
    this.isRunning false;
        
    this.totalTime 0;
        
    this.elapsedTime 0;
        
        
    this.poll null;
        
        
    this.data = { };
    };

    animationqueue.AnimationSet.prototype = {
        
    /**
         * Add an AnimationStep or Animation for this set.
         *
         * @param anim
         *   The AnimationStep or Animation to add.
         */
        
    add: function( anim ){
            if( 
    anim instanceof animationqueue.AnimationStep ){
                
    this.steps.pushanim );
                
    this.isStepsSorted false;
                ++
    this.currentStep;
                
            } else if( 
    anim instanceof animationqueue.Animation ){
                
    this.animations.pushanim );
            }
        },
        
        
    /**
         * Start the set's animation.
         *
         * @param time
         *   The total running time of the animation.
         */
        
    start: function( time ){
            
            
    // Scale the previous elapsedTime to the new time
            
    this.elapsedTime this.totalTime == 00this.elapsedTime/this.totalTime*time;
            
    this.totalTime time;
            
            
    // prepare this to run
            
    if( !this.isStepsSorted ){
                
    // Reverse sort
                
    this.steps.sort( function( a){
                    return 
    b.moment a.moment;
                } );
                
    this.isStepsSorted true;
            }
            
            
    this.isRunning true;
            
            
    // Start the time up here right before any of the animation starts
            
    this.startTime = (new Date()).getTime() - this.elapsedTime;
            
    // Start up the animations
            
    var this.animations.length;
            while( 
    i-- ){
                
    this.animations].startthis.totalTime );
            }
            
            
    // The polling function: this will run the steps at the right time and 
            // check for when the animations are finished.
            
    var self this;
            var 
    animationsIndex this.animations.length-1;
            function 
    polltimeSince ){
                
    self.elapsedTime = (new Date()).getTime() - self.startTime;
                
    // Run any steps that should be run
                
    while( self.currentStep >= && self.stepsself.currentStep ].getTimeself.totalTime ) <= self.elapsedTime ){
                    
    self.stepsself.currentStep ].doIt( );
                    --
    self.currentStep;
                }
                
                
    // Check if all the animations are finished
                
    if( self.elapsedTime >= self.totalTime && self.currentStep 0){
                    while( 
    animationsIndex >= && !self.animationsanimationsIndex ].isRunning ){
                        --
    animationsIndex;
                    }
                    
                    if( 
    animationsIndex ){
                        
    // finished
                        
    self.resetself.elapsedTime );
                        
                    }
                }
            }
            
            
    this.poll setIntervalpoll16 );
            
        },
        
        
    /**
         * Stop the animation.
         */
        
    stop: function( ){
            if( 
    this.isRunning ){
                
    this.isRunning false;
                if( 
    this.poll ){
                    
    clearIntervalthis.poll );
                }
                var 
    this.animations.length;
                while( 
    i-- ){
                    
    this.animations].stop( );
                }
            }
        },
        
    /**
         * Set meta data for the set.
         *
         * @param key
         *   The key for the meta data.
         *
         * @param data
         *   The data.
         */
        
    setData: function( keydata ){
            
    this.datakey ] = data;
        },
        
        
    /**
         * Get meta data for the set.
         *
         * @param key
         *   The key used to save the meta data.
         * 
         * @return The value of the meta data
         */
        
    getData: function( key ){
            return 
    this.datakey ];
        },
        
        
    /**
         * Resets the set to beginning.
         */
        
    reset: function( ){
            
    this.stop( );
            
    this.elapsedTime 0;
            
    this.currentStep this.steps.length-1;
        }
    };







    /**
     * A single step to occur during a set's animation.
     *
     * This is useful for handling one off things during a set's animation such 
     * as switch the z-index.
     *
     * @param $element
     *   The jQuery object for the element(s) to update their CSS
     * 
     * @param cssParams
     *   A key/value object of style properties. @see http://docs.jquery.com/CSS/css#properties
     *
     * @param moment
     *   A number from 0 to 1 for when as a percentage of the set's running time the 
     *   step should happen.
     */
    animationqueue.AnimationStep = function( $elementcssParamsmoment ){
        
    this.$element $element;
        
    this.cssParams cssParams;
        
    this.moment Math.min1Math.max0moment ) );
    };

    animationqueue.AnimationStep.prototype = {
        
        
    /** 
         * Get the time of execution
         *
         * @param totalTime
         *   The total of time for the set this belongs to in milliseconds.
         *
         * @return The time in milliseconds this step needs to execute.
         */
        
    getTime: function( totalTime ){
            return 
    this.moment totalTime;
        },
        
        
    /**
         * Does the step action.
         */
        
    doIt: function( ){
            
    this.$element.cssthis.cssParams );
        }
    };




    /**
     * A single animation object for a jQuery object.
     *
     * @param $element
     *   The jQuery object for the element(s) to animate
     *
     * @param animateParams
     *   The object of CSS values to animate. @see http://docs.jquery.com/Effects/animate
     */
    animationqueue.Animation = function( $element,  animateParams ){
        
    this.$element $element;
        
    this.animateParams animateParams;
        
    this.isRunning false;
    };

    animationqueue.Animation.prototype = {
        
    /**
         * Start the animation.
         *
         * @param time
         *   The running time of the animation (and the step) in milliseconds.
         */
        
    start: function( time ){
            
    this.$element.stop( );
            
            if( 
    time === ){
                
    this.$element.cssthis.animateParams );
                
    self.isRunning false;
            } else {
                
    this.isRunning true;
                
    this.$element.animatethis.animateParamstimeproxythis, function( ){ 
                    
    this.isRunning false
                } ) );
            }
        },
        
        
    /**
         * Stop the animation.
         */
        
    stop: function( ){
            
    this.$element.stop( );
            
    this.isRunning false;
        }
    };

























    //
    // The widget
    //
    //














  • #8
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    . . . continued . . .

    PHP Code:
    / Static methods
    $.jcoverflip = {
        
    /**
         * Used for wrapping the animation for an element for returned by beforeCss, afterCss and 
         * currentCss options.
         *
         * @param element
         *   The jQuery element to run the animation on.
         *
         * @param animate
         *   An object with CSS keys and values to animate to.
         *
         * @param steps
         *   An object with keys from 0 to 1 (0 to 100%) for how far along in the animation (0: start,
         *   0.5: half way through, 1: end) with the value being an object of CSS keys and values to change.
         *   This is for discrete values that need to change such as z-index.
         *
         */
        
    animationElement: function( elementanimatesteps ){ 
            return { 
    elementelementanimateanimatestepssteps };
        },
        
        
    /**
         * Find the item element and index number that the element is associated.
         *
         * @param element
         *   The element that either is the item element or descendant element of the item element.
         *
         * @return 
         *   null - if no item element is found
         *   { element: <the item element>, index: <the item index> }
         * 
         */
        
    getItemFromElement: function( element ){
            
    element = $( element );
            var 
    item element.hasClass'ui-jcoverflip--item' )? element element.parents'.ui-jcoverflip--item' );
            
            if( 
    item.size( ) == ){
                return 
    null;
            } else {
                return { 
    elementitemindexitem.data'jcoverflip__index' ) };
            }
        }
    };



    // The widget
    $.widget'ui.jcoverflip', {
        
    _init: function( ){
            
    // init some internal values
            
    this.animationQueue = new animationqueue.AnimationQueue( );
            
    this.isInit false// used for setting up the CSS
            
            // Used to queue up overlapping goTo() calls since they come in async
            
    this.goToPoll = { idnull };
            
    this.goToQueue = [ ];
            
            
            
    // Setup the elements
            
    var items this.items( );
            
            
    // add classes
            
    this.element.addClass'ui-jcoverflip' );
            
    items.addClass'ui-jcoverflip--item' );
            
            
    // Get the title for each item
            
    var items.size( );
            while( 
    i-- ){
                var 
    el items.eq);
                
                
    // Tell the item what its index is
                
    el.data'jcoverflip__index');
                
                
    // Create the titles for the coverflow items
                
    var title this.options.titles.createel );
                
    title.css( { display'none' } ).addClass'ui-jcoverflip--title' ).appendTothis.element );
                
                
    el.data'jcoverflip__titleElement'title );
            }
            
            
    // Bind the click action for when the user clicks on the item to change the current
            
    this.element.clickproxythisthis._clickItem ) );
            
            
    // setup the positioning of the elements, pass 0 for time, pass true to flag to init
            
    this._goTothis.options.current0true );
            
            
    // Add any addition controls (such as a scroll bar)
            
    this.options.controls.createthis.elementthis.length() );
        },
        
        
        
        
    /**
         * The click event for an item. If the item is not current,
         * then it calls the current() and stops the event.
         */
        
    _clickItem: function( event ){
            if( 
    this.options.disabled == true ){
                    return;
                }
            
            var 
    item = $.jcoverflip.getItemFromElementevent.target );
            
            if( 
    item !== null && item.index != this.current( ) ){
                
    this.currentitem.indexevent );
                
    event.preventDefault();
                return 
    false;
            }
            return 
    true;
        },
        
        
        
    /**
         * Parses the parameters for next and previous methods. Any of the parameters are optional.
         */
        
    _nextAndPrevParameters: function( bywrapAroundcallbackoriginalEvent ){
            
            
            
    // originalEvent is an object
            
    if( typeof by == 'object' ){
                
    originalEvent by;
            } else if( 
    typeof wrapAround == 'object' ){
                
    originalEvent wrapAround;
            } else if( 
    typeof callback == 'object' ){
                
    originalEvent callback;
            } else if( 
    typeof originalEvent == 'object' ){
                
    originalEvent originalEvent;
            } else {
                
    originalEvent = { };
            }
            
            
    // callback is a function
            
    if( $.isFunctionby ) ){
                
    callback by;
            } else if( $.
    isFunctionwrapAround ) ){
                
    callback wrapAround;
            } else if( $.
    isFunctioncallback ) ){
                
    callback callback;
            } else {
                
    callback nofn;
            }
            
            
    // wrapAround is boolean
            
    if( typeofby ) == 'boolean' ) {
                
    wrapAround by;
            } else if( 
    typeofwrapAround ) == 'boolean' ){
                
    wrapAround wrapAround;
            } else {
                
    wrapAround true;
            }
            
            
    // by is a number
            
    by isNaNparseIntby ) )? parseIntby );
            
            return { 
    bybywrapAroundwrapAroundcallbackcallbackoriginalEventoriginalEvent };
        },
        
        
        
    /**
         * Step to the right from the current.
         *
         * @param by
         *   (optional) An integer to step to the right by. Defaults to 1.
         *
         * @param wrapAround
         *   (optional) A boolean flag to wrap around if moving past the end. Defaults to true.
         *
         * @return
         *   New current number
         */
        
    next: function( bywrapAroundcallbackoriginalEvent ){
            if( 
    this.options.disabled == true ){
                    return;
                }
            
            var 
    params this._nextAndPrevParametersbywrapAroundcallbackoriginalEvent );
            
            return 
    this._nextAuxparams.byparams.wrapAroundparams.callbackparams.originalEvent'next' );
        },
        
        
        
        
    _nextAux: function( bywrapAroundcallbackoriginalEventeventType ){
            
    by by === undefined && isNaNby ) ? parseIntby );
            
    wrapAround wrapAround !== false;
            
            var 
    current this.current( );
            var 
    oldCurrent current;
            var 
    length this.length( );
            
            if( 
    wrapAround ){
                
    current = (current by) % length;
                
    // If "current + by" is negative, then the result of "%" is between -(length-1) and -1.
                // Add the length, if negative, to bring the index back to a valid number
                
    current current current length current
            } else {
                
    current Math.minlength-1Math.max0current by ) );
            }
            
            if( 
    current != this.current( ) ){
                
    this.currentcurrentoriginalEvent );
            }
            
            if( 
    eventType && oldCurrent != current ){
                var 
    event = $.EventoriginalEvent );
                
    event.type this.widgetEventPrefix eventType;
                
    callback.callthis.elementevent, { fromoldCurrenttocurrent } );
                
    this._triggereventTypeoriginalEvent, { fromoldCurrenttocurrent } );
            }
            
            return 
    current;
        },
        
        
        
        
    /**
         * Step to the left from the current.
         *
         * @param by
         *   (optional) An integer to step to the left by. Defaults to 1.
         *
         * @param wrapAround
         *   (optional) A boolean flag to wrap around if moving past the end. Defaults to true.
         *
         * @return
         *   New current number
         *
         */
        
    previous: function( bywrapAroundcallbackoriginalEvent ){
            if( 
    this.options.disabled == true ){
                    return;
                }
            
            var 
    params this._nextAndPrevParametersbywrapAroundcallbackoriginalEvent );
            
            return 
    this._nextAux( -1*params.byparams.wrapAroundparams.callbackparams.originalEvent'previous' );
        },
        
        
        
        
    /**
         * Go all the way to the left.
         */
        
    first: function( callbackoriginalEvent ){
            if( 
    this.options.disabled == true ){
                    return;
                }
            
            if( 
    typeof callback == 'object' ){
                
    originalEvent callback
            
    } else if( typeof originalEvent == 'object' ){
                
    originalEvent originalEvent;
            } else {
                
    originalEvent = { };
            }
            
            
    callback = $.isFunctioncallback ) ? callback nofn;
            
            var 
    from this.current( );
            var 
    to this.current0originalEvent );
            if( 
    from != to ){
                var 
    event = $.EventoriginalEvent );
                
    event.type this.widgetEventPrefix 'first';
                
    callback.callthis.elementevent, { fromfromtoto } );
                
    this._trigger'first'originalEvent, { fromfromtoto } ); 
            }
        },
        
        
        
        
    /**
         * Go all the way to the right.
         */
        
    last: function( callbackoriginalEvent ){
            if( 
    this.options.disabled == true ){
                    return;
                }
            
            if( 
    typeof callback == 'object' ){
                
    originalEvent callback
            
    } else if( typeof originalEvent == 'object' ){
                
    originalEvent originalEvent;
            } else {
                
    originalEvent = { };
            }
            
            
    callback = $.isFunctioncallback ) ? callback nofn;
            
            var 
    from this.current( );
            var 
    to this.currentthis.length( ) - 1originalEvent );
            if( 
    from != to ){
            var 
    event = $.EventoriginalEvent );
                
    event.type this.widgetEventPrefix 'last';
                
    callback.callthis.elementevent, { fromfromtoto } );
                
    this._trigger'last'originalEvent, { fromfromtoto } ); 
            }
        },
        
        
        
        
    /**
         * Gets or sets the current item.
         * 
         * @param originalEvent (optional)
         *   Pass an event object along to be assigned to the originalEvent for the event object passed
         *   along with the triggered events of start, stop and change.
         */
        
    current: function( newCurrentoriginalEvent ){
            
            if( 
    newCurrent !== undefined && !isNaNnewCurrent ) && !this.options.disabled && newCurrent != this.options.current ){
                
    this._goTonewCurrentundefinedfalseoriginalEvent );
            }
            
            return 
    this.options.current;
        },
        
        
        
        
    destroy: function( ){
            if( 
    this.options.disabled == true ){
                    return;
                }
            
            
    // let others clean up first
            
    this._trigger'destroy', {} );
            
            
    // container element
            
    this.element.removeClass'ui-jcoverflip' );
            
            
            
    // titles
            
    var items this.items( );
            var 
    titleEl;
            var 
    items.length;
            while( 
    i-- ){
                
    titleEl items.eq).data'jcoverflip__titleElement' );
                
    this.options.titles.destroytitleEl );
            }
            
            
            
    // items
            // aggressively remove all inline styles
                
    items
                    
    .removeClass'ui-jcoverflip--item' )
                    .
    find'*' ).additems.get( ) )
                    .
    each( function( ){
                        
    this.removeAttribute'style' );
                        
                    } );
            
            
            
    // controls
            
    this.options.controls.destroythis.element );
            
            
            
    // default action
            
    $.widget.prototype.destroy.applythisarguments );
        },
        
        
        
    enable: function( ){
            $.
    widget.prototype.enable.applythisarguments );
            
    this._trigger'enable', {} );
        },
            
        
        
    disable: function( ){
            $.
    widget.prototype.disable.applythisarguments );
            
    this._trigger'disable', {} );
        },
        
        
        
    option: function( namevalue ){
            
            
    // getter
            
    if( typeof value == 'undefined' ){
                return $.
    widget.prototype.option.applythisarguments );
            }
            
            
    // setter
            
            // current
            
    if( name == 'current' ){
                return 
    this.currentvalue );
            }
            
            
    // TODO: dynamic changing of the options: items, titles, controls
            // items, titles, controls
            
    if( name in 'items''''titles''''controls''' } ){
                return 
    this.options.items;
            }
            
            
    // beforeCss, afterCss, currentCss
            
    if( name in 'beforeCss''''afterCss''''currentCss''' } ){
                
    this.optionsname ] = value;
                
    // force update positioning
                
    this._goTothis.current( ), 0true );
            }
            
            
    // time
            
    if( name == 'time' && isNaNparseIntvalue ) ) && parseIntvalue ) < ){
                return 
    this.options.time;
            }
            
            
    // Default action
            
    return $.widget.prototype.option.applythisarguments );
        },
        
        
        
        
    /**
         * Go to a particular coverflow item.
         *
         * @param index
         *   The item index.
         *
         * @param time
         *   Optional. The time to do the animation to the new item in.
         *
         */
        
    _goTo: function( indextimeforceoriginalEvent ){
                if( 
    this.options.disabled == true ){
                    return;
                }
                
                
    force = !!force;
                
    originalEvent originalEvent == undefined? { } : originalEvent;
                
                
    // Get the time to run
                
    time time === undefinedthis.options.timeparseInttime );
                
                
    // Setup current and oldCurrent
                
    var oldCurrent this.options.current;
                var 
    current Math.floorMath.max0Math.minindexthis.length( )-) ) );
                
    this.options.current current;
                
                
                
    // Start working on the animation queue
                // 1. Stop the current animation
                // 2. Remove sets that are moving away from the current item
                // 3. Add needed sets to move towards the current item
                // 4. Start the animation queue
                
    this.animationQueue.stop( );
                
                
    // Clear out any sets that are moving away from the current item
                
    var animationSets this.animationQueue.get( );
                var 
    animationSets.length;
                while( 
    i-- ){
                    var 
    to animationSets].getData'to' );
                    var 
    goingToTheRight =  animationSets].getData'goingToTheRight' );
                    var 
    rightOfCurrent to current;
                    if( 
    rightOfCurrent != goingToTheRight ){
                        
    this.animationQueue.removeanimationSets] );
                    }
                }
                
                
    animationSets this.animationQueue.get( ); // update it since we may have changed the it by removing sets above
                // How many steps from the old current item to the new current item
                
    var stepsToCurrent animationSets.length 0animationSets.pop( ).getData'to' ) : oldCurrent;
                var 
    goingToTheRight stepsToCurrent current// direction of movement
                
    stepsToCurrent += goingToTheRight1: -1// advance to the next since we don't need to animate to our current position
                
                
                // Special case for the first run
                
    if( force ){
                    
    stepsToCurrent current;
                }
                
                var 
    items this.items( );
                
    // Add sets for each step
                // The test works for moving in both directions
                
    while( ( goingToTheRight && stepsToCurrent <= current ) || ( !goingToTheRight && stepsToCurrent >= current ) || ( force && stepsToCurrent == current ) ){
                    
    // Create a set
                    
    var animationSet = new animationqueue.AnimationSet( );
                    
    this.animationQueue.queueanimationSet );
                    
    animationSet.setData'goingToTheRight'goingToTheRight );
                    
    animationSet.setData'to'stepsToCurrent );
                    
                    
    // Setup animation for all the items
                    
    var items.length;
                    while( 
    i-- ){
                        var 
    el items.eq);
                        if( 
    stepsToCurrent ){
                            var 
    css this.options.beforeCsselthis.elementstepsToCurrent-i-);
                            
                        } else if( 
    stepsToCurrent ){
                            var 
    css this.options.afterCsselthis.elementi-stepsToCurrent-);
                            
                        } else { 
    // i == stepsToCurrent
                            
    var css this.options.currentCsselthis.elementi-stepsToCurrent-);
                        }
                        
                        
    // Push all the animation info onto the animation queue
                        
    var css.length;
                        while( 
    j-- ){
                            var 
    cssI css];
                            
    animationSet.add( new animationqueue.AnimationcssI.elementcssI.animate ) ); 
                            for( var 
    step in cssI.steps ){
                                
    animationSet.add( new animationqueue.AnimationStepcssI.elementcssI.stepsstep ], parseFloatstep ) ) );
                            }
                        }
                    } 
    // endwhile( i-- ) End the looping through all the items
                    
    stepsToCurrent += goingToTheRight1: -1;
                } 
    // endwhile( ) End looping through all the steps from current to i
                
                // hide/show the title
                
    var titleElement items.eqcurrent ).data'jcoverflip__titleElement' );
                if( 
    titleElement ){
                    
    this.options.titleAnimateIntitleElementtimegoingToTheRight );
                }
                
                if( 
    current != oldCurrent ){ // prevent the case where current and oldCurrent are the same
                    
                    
    var titleElement items.eqoldCurrent ).data'jcoverflip__titleElement' );
                    
                    if( 
    titleElement ){
                        
    this.options.titleAnimateOuttitleElementtimegoingToTheRight );
                    }
                }
                
                if( !
    force ){
                    
    // Trigger the start event 
                    
    this._trigger'start'originalEvent, { tocurrentfromoldCurrent } );
                    
    // run the animation and set a callback to trigger the stop event
                    
    this.animationQueue.starttimeproxythis, function( timeElapsed ){
                            
    this._trigger'stop'originalEvent, { tocurrentfromoldCurrenttimetimeElapsed} );
                        } ) ); 
                    
                    
    this._trigger'change'originalEvent, { tocurrentfromoldCurrent } );
                } else {
                    
    this.animationQueue.starttimenofn );
                }
                
                
    // Used to create the functions for creating AnimationSteps
                
    function stepFactoryelcss ){
                    return function( ){
                            
    el.csscss );
                        };
                };
                
                
            },
        
        
        
    /**
         * Get the item elements
         *
         * Returns the items based on the selector string found in options.items, if not defined, then
         * the children of the jcoverflip element will be the items.
         *
         * @param reload - boolean flag to clear the cache of elements that are the items
         *
         * @return jQuery object of items
         */
        
    items: function( reload ){
                if( 
    this.itemsCache === undefined || !!reload ){
                    if( 
    this.options.items ){
                        
    this.itemsCache this.element.findthis.options.items );
                    } else {
                        
    this.itemsCache this.element.children( );
                    }
                }
                
                return 
    this.itemsCache;
            },
        
        
    length: function( ){
            var 
    items this.items( );
            return 
    items.length;
        }
    } ) ;









    $.
    ui.jcoverflip.defaults = {
        
    items'',
        
    beforeCss: function( elcontaineroffset ){
            return [
                $.
    jcoverflip.animationElementel, { left: ( container.width( )/210 110*offset )+'px'bottom'20px' }, { } ),
                $.
    jcoverflip.animationElementel.find'img' ), { opacity0.5width'100px' }, {} )
            ];
        },
        
    afterCss: function( elcontaineroffset ){
            return [
                $.
    jcoverflip.animationElementel, { left: ( container.width( )/110 110*offset )+'px'bottom'20px' }, { } ),
                $.
    jcoverflip.animationElementel.find'img' ), { opacity0.5width'100px' }, {} )
            ];
        },
        
    currentCss: function( elcontainer ){
            return [
                $.
    jcoverflip.animationElementel, { left: ( container.width( )/100 )+'px'bottom}, { } ),
                $.
    jcoverflip.animationElementel.find'img' ), { opacity1width'200px' }, { } )
            ];
        },
        
    time500// half a second
        
        
    titles: {
            
    /** 
             *
             * @param el - item element
             *
             * @return jQuery element object of the title
             *
             * Order for finding the title
             * 1) An element with a class of "title"
             * 2) The title attribute of the item
             * 3) The alt attribute of the item
             * 4) The first title or alt attribute of a child element of the item
             */
            
    create: function( el ){
                var 
    titleText '';
                var 
    title = $( [] );
                var 
    titleEl el.find'.title:first' );
                if( 
    titleEl.size( ) == ){
                    
    title titleEl.clone( true );
                    
    titleEl.css'display''none' );
                    
    title.data'jcoverflip__origin''cloned' );
                    
    title.data'jcoverflip__source'titleEl );
                } else if( 
    el.attr'title' ) ) {
                    
    titleText el.attr'title' );
                } else if( 
    el.attr'alt' ) ) {
                    
    titleText el.attr'alt' );
                } else {
                    
    titleEl el.find'[title], [alt]' ).eq);
                    if( 
    titleEl.size( ) == ){
                        
    titleText titleEl.attr'title' ) || titleEl.attr'alt' ) || '';
                    }
                }
                
                if( 
    title.size( ) ){
                    
    title.css( { 'opacity'0'display''block' } );
                } else {
                    
    title = $( '<span class="title">' titleText '</span>' );
                    
    title.data'jcoverflip__origin''attribute' );
                }
                return 
    title;
            },
            
    /**
             * 
             * @param el - title element
             */
            
    destroy: function( el ){
                if( 
    el.data'jcoverflip__origin' ) == 'cloned' ){
                    
    el.data'jcoverflip__source' ).css'display''' );
                }
                
    el.remove( );
            }
        },
        
        
    titleAnimateIn: function( titleElementtimeoffset ){
            if( 
    titleElement.css'display' ) == 'none' ){
                
    titleElement.css({opacity0display'block'});
            }
            
    titleElement.stop( ).animate({opacity1}, time );
        },
        
    titleAnimateOut: function( titleElementtimeoffset ){
            
    titleElement.stop( ).animate( {opacity}, time, function(){ 
                $(
    this).css('display''none'); 
            } );
        },
        
    controls: {
            
    /**
             * @param containerElement - the jQuery object for the jcoverflip
             * @param length - the number of items
             */
            
    createnofn,
            
    /**
             * @param containerElement - the jQuery object for the jcoverflip
             */
            
    destroynofn
        
    },
        
    current0
    };


    // specify  the getters
    $.ui.jcoverflip.getter = [ 'length''current'  ];




    } )( 
    jQuery ); 


  •  

    Posting Permissions

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