JQuery Implementation

RogersDA · February 12, 2010

There is an image feature written in javascript that I am trying to experiment with on my site, but it requires jQuery.

Now - I am not a coder and not so proficient in determining how to implement this.

So - is this possible to do on SmugMug?

hoffmcs · February 12, 2010

RogersDA wrote:

There is an image feature written in javascript that I am trying to experiment with on my site, but it requires jQuery.

Now - I am not a coder and not so proficient in determining how to implement this.

So - is this possible to do on SmugMug?

I think it would be possible. Google hosts Jquery so you can easily import it in your custom javascript section without having to host it elsewhere. http://code.google.com/apis/ajaxlibs/documentation/#jquery.

RogersDA · February 12, 2010

hoffmcs wrote:

I think it would be possible. Google hosts Jquery so you can easily import it in your custom javascript section without having to host it elsewhere. http://code.google.com/apis/ajaxlibs/documentation/#jquery.

So in the SmugMug embedded javasccript I need to call the jQuery library from Google?

I noticed that the library load is called by

google.load("jquery", "1.4.1");

So - placing this above the script to be used is all that is needed? How does this actually call the library (how will that actually make the load call to Google without a pathname?

BeachBill · February 13, 2010

Perhaps this will help explain it all better...

http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

RogersDA · February 13, 2010

BeachBill wrote:

Perhaps this will help explain it all better...

http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

IHey Bill - yeah I was looking at that last night.

Thanks for posting!

Based on that I placed this in my Top Javascript

//------------------------------------------------------------------------------------------
// Javascript for flexiBackground to stretch background image to any screensize
//------------------------------------------------------------------------------------------
******** src="http://www.google.com/jsapi"></********  
******** type="text/javascript">  
 
    google.load("jquery", "1.4.1");  
 
    google.setOnLoadCallback(function() {  

var flexiBackground = function(){
    
    /**
        CONFIGURATION:
        Define the size of our background image
    */
    var bgImageSize = {
        width : 1024,
        height : 768
    };
    
    /**
        Declare and define variables
    */ 
    var $window = $(window),
        $body = $('body'),
        imageID = "expando",
        tallClass = 'tall',
        wideClass = 'wide',
        $bgImage, $wrapper, img, url, imgAR;
        
    /**
        Are we dealing with ie6?
    */
    var ie6 = ($.browser.msie && parseInt($.browser.version, 10) <= 6);
    
    /**
        Set up the action that happens on resize
    */
    var resizeAction = function() {
        var win = {
            height : $window.height(),
            width : $window.width()
        };

        // The current aspect ratio of the window
        var winAR = win.width / win.height;

        // Determine if we need to show the image and whether it needs to stretch tall or wide
        if (win.width < bgImageSize.width && win.height < bgImageSize.height) {
            $body
                .removeClass(wideClass)
                .removeClass(tallClass);
        } else if ((win.w < bgImageSize.width && win.height >= bgImageSize.height) || (winAR < imgAR)) {
            $body
                .removeClass(wideClass)
                .addClass(tallClass);
            // Center the image
            $bgImage.css('left', Math.min(((win.width - bgImageSize.width) / 2), 0));
        } else if (win.width >= bgImageSize.width) {
            $body
                .addClass(wideClass)
                .removeClass(tallClass);
            $bgImage.css('left', 0);
        }
        
        // Need to fix the height of the wrapper for IE6
        if (ie6) {
            $wrapper.css('height', win.height);
        }
    };
    
    return {
        
        /*
            Sets up the basic functionality
        */
        initialize : function() {
            
            // No need for any of this if the screen isn't bigger than the background image
            if (screen.availWidth <= bgImageSize.width || screen.availHeight <= bgImageSize.height) {
                return;
            }
            
            // Parse out the URL of the background image and drop out if we don't have one
            url = $body.css('background-image').replace(/^url\(("|')?|("|')?\);?$/g, '') || false;    
            if (!url || url === "none" || url === "") {
                return;
            }
            
            // Get the aspect ratio of the image
            imgAR = bgImageSize.width / bgImageSize.height;

            // Create a new image element
            $bgImage = $('<img />')
                        .attr('src', url)
                        .attr('id', imageID);
                        
            // Create a wrapper and append the image to it.
            // The wrapper ensures we don't get scrollbars.
            $wrapper = $('<div></div>')
                            .css({
                                'overflow' : 'hidden',
                                'width' : '100%',
                                'height' : '100%',
                                'z-index' : '-1'
                            })
                            .append($bgImage)
                            .appendTo($body);
                            
            // IE6 Doesn't do position: fixed, so let's fake it out.
            // We'll apply a class which gets used in the CSS to emulate position: fixed
            // Otherwise, we'll simply used position: fixed.
            if (ie6) {
                $wrapper.addClass('ie6fixed');
            } else {
                $wrapper.css({
                    'position' : 'fixed',
                    'top' : 0,
                    'left' : 0
                });
            }
            
            // Set up a resize listener to add/remove classes from the body 
            $window.bind('resize', resizeAction);

            // Set it up by triggering a resize
            $window.trigger('resize');
        }
    };
}();

  });
</********
$(document).ready(flexiBackground.initialize);

I guess, based on that site's instructions, I am not sure if the last line:

$(document).ready(flexiBackground.initialize);

should go in the Top Javascript, too, or should it go someplace else.

Also - I am not sure if the open and closing script tags are needed as SmugMug places them there by default.<img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif" border="0" alt="" >

RogersDA · February 14, 2010

Bump - really could use some help on this....if implementing jQueries are even possible and, if so did I do it correctly!

BeachBill · February 15, 2010

I haven't tried using jQuery in SmugMug pages, but you would need to put the call that references the google.com/jsapi in the head tag:

< script src="http://www.google.com/jsapi"></script >

Next, the rest of the javascript would need to go in the "custom header" or the "bottom javascript" as SmugMug pulls in the top javascript prior to the head tag. Putting it in the bottom javascript may be too late.

With all that said, I would probably put all of the logic at the top of the "custom header" (skip adding anything to the head tag). This includes the call to pull in the jsapi and everything else. Just leave it all wrapped in the script tags as presented originally. This will keep all of the logic together and easily manageable.

Hope this helps.

RogersDA · February 15, 2010

BeachBill wrote:
I haven't tried using jQuery in SmugMug pages, but you would need to put the call that references the google.com/jsapi in the head tag:
< script src="http://www.google.com/jsapi"></script >
Next, the rest of the javascript would need to go in the "custom header" or the "bottom javascript" as SmugMug pulls in the top javascript prior to the head tag. Putting it in the bottom javascript may be too late.

With all that said, I would probably put all of the logic at the top of the "custom header" (skip adding anything to the head tag). This includes the call to pull in the jsapi and everything else. Just leave it all wrapped in the script tags as presented originally. This will keep all of the logic together and easily manageable.

Hope this helps.

I tried it all with no success. Either it was not calling the Google jQuery library correctly, or (if it was) the script just wouldn't work nicely with SmugMug. Too bad - it looked like a neat site tweak.

BeachBill · February 15, 2010

I just did a very simple test to see if jQuery can be used on SmugMug and the results are positive.

I placed the following in my Custom Header and it did properly display the requested text in the div.

< script src="http://www.google.com/jsapi"></script >
< script type="text/javascript">google.load("jquery", "1.4.1");</script >
< div id="jqueryTest"></div >
< script >$("div#jqueryTest").text("Hello World!");</script >

So I'm guessing the logic you are attempting to use needs some tweaking to work within SmugMug.

BeachBill · February 15, 2010

I've got it working on my site.

http://gallery.primarycolors.com/

I've only viewed it with Firefox and there appears to be an issue with the background image scrolling until you resize the browser then it seems to do as the article describes. -- This still appears flakey.. I had to resize/maximize a few times.

Here is what I did:

Add to CSS

img#expando {
    padding: 0;
    margin: 0;
    position: absolute;
    display: none;
    z-index: 1;
    -ms-interpolation-mode: bicubic;
}
   
.wide img#expando,
.tall img#expando {
    display: block;
}
   
.wide img#expando {
    width: 100%;
    height: auto;
}
   
.tall img#expando {
    width: auto;
    height: 100%;
}
   
.ie6fixed {
    position: absolute;
    top: expression((ignoreMe = document.documentElement.scrollTop ?
    document.documentElement.scrollTop : document.body.scrollTop) + 'px');
}

Modified my body tag in CSS:

body {
  background-image: url("/photos/######_####-X3-1.jpg") !important;
}

Note: I think the "important" part is important in getting this to work!

Add to Custom Header:

< script src="http://www.google.com/jsapi"></script >
< script type="text/javascript">google.load("jquery", "1.4.1");</script >
< script src="http://kimili.com/examples/flexibackground/js/flexibg.js"></script >

Note that I shouldn't be pulling the script from kimili.com (bad netiquette); instead it should be included directly in the SmugMug customization. I just did it this way as a quick test.

I will be removing the code at some point within the next 24 hours but it's not something I'm looking to do at this point but it's a cool idea.

RogersDA · February 15, 2010

Hey Bill - working on a widescreen MacBook right now and I see the background image repeating but not resizing. I have resized the browser window many times. I wonder if, by pulling he script from the kimili may cause a problem as the script has background image sizing:

var bgImageSize = {
    width : 1280,
    height : 960};

that must be changed to match the size of the background image used.

At any rate I will play more this evening when I get home. Thanks a lot for the help!

BeachBill · February 15, 2010

I've played around with it a bit more. I have the js hosted locally now and have played with the width and height. I've tested on three browsers, Firefox, Safari, and IE. It appears the image will repeat if the browser height *and* width is resized smaller than the image size. Resizing bigger than the image size or at least one of the width or height is at or bigger than the image size the script appears to work.

Anyway, it's been a fun diversion this afternoon, but I will probably remove it from my site. I'm looking forward to checking it out on your site if you decide to implement it.

RogersDA · February 15, 2010

BeachBill wrote:

I've played around with it a bit more. I have the js hosted locally now and have played with the width and height. I've tested on three browsers, Firefox, Safari, and IE. It appears the image will repeat if the browser height *and* width is resized smaller than the image size. Resizing bigger than the image size or at least one of the width or height is at or bigger than the image size the script appears to work.

Anyway, it's been a fun diversion this afternoon, but I will probably remove it from my site. I'm looking forward to checking it out on your site if you decide to implement it.

Coolness - at least I can see it working (on the 21 inch monitor at home). It does resize up to a point when the browser window gets a bit small.

After some cleaning here at the house i will experiment some more.

RogersDA · February 15, 2010

Bill - after a bit of playing and with your most excellent guidance I think I got it operational. I used an 800px x 600px as the base image. Of course the gradient background shown below does not look great here on Dgrin as I am showing a smaller version of the original screen-grab.

Again - thanks!!!! Now to test some alternate browsers.

BeachBill · February 16, 2010

Now that's a nice looking page. Viewed in Firefox, it looks good.

You might just convince me to do something similar...

RogersDA · February 16, 2010

BeachBill wrote:

Now that's a nice looking page. Viewed in Firefox, it looks good.

You might just convince me to do something similar...

Thanks.
If I am ever in Vegas I'll hook you up with your beverage of choice for the assistance!

Weather Nerd · June 28, 2012

Hey guys, I'm trying to make my background one solid image. It just doesn't look good tiled, but it's my only option with the easy customizer to fill the whole back ground. Should I try to use some of the code you both have shared? I know enough code to brake things. I'm more like one off those "just tell me what box it goes in" types lol. If you guys have time to help, thank you!

Here is my website: https://www.chadberryhillphotography.com

JQuery Implementation

Comments