Skip to content

Change settings using data-* attributes #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
martynasb wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Change settings using data-* attributes #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dfc6d60
Allow user to change settings using data attributes
martynasb Apr 3, 2014
5ef809b
Updated README.textile
martynasb Apr 3, 2014
713afde
Update README.textile
martynasb Apr 3, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions README.textile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,25 @@ An example is provided within this package. To see it in action go to: "http://w

h2. Options

h3. positionX
h3. filename

This parameter controls how we position the image on the X axis. (type=String, options=left|center|right, default=center)
The name of the data attribute that Anystretch will use for the image name, if none is supplied in the src. (type=String, default=stretch)

h3. positionY
h3. positionx

This parameter controls how we position the image on the Y axis. (type=String, options=top|center|bottom, default=center)
This parameter controls how we position the image on the X axis. (type=String, options=left|center|right, default=center)

h3. speed
h3. positiony

This is the speed at which the image will fade in, after downloading is complete. Integers are accepted, as well as standard jQuery speed strings (slow, normal, fast). (type=Integer, default=0)
This parameter controls how we position the image on the Y axis. (type=String, options=top|center|bottom, default=center)

h3. elPosition (only when not used on the body)
h3. elposition (only when not used on the body)

This is the css position given to the containing element when used on anything except the body. (type=String, default=relative)

h3. dataName
h3. speed

The name of the data attribute that Anystretch will use for the image name, if none is supplied in the src. (type=String, default=stretch)
This is the speed at which the image will fade in, after downloading is complete. Integers are accepted, as well as standard jQuery speed strings (slow, normal, fast). (type=Integer, default=0)

h2. Setup

Expand Down Expand Up @@ -63,8 +63,9 @@ If you require Anystretch to work on one or more elements inside the page, rathe
</script>
</code></pre>

As of Version 1.2, Anystretch can also determine the image to use, via a data attribute. By default, Anystretch will use data-stretch although this can be changed by setting the dataName in the settings.
Anystretch allows the user to define settings using data-* attribute:

<pre><code><div class="div01 stretchMe" data-filename="img01.jpg" data-positionx="center" data-positiony="bottom" data-speed="3000" data-elposition="relative">...</div></code></pre>

<pre><code><script type="text/javascript">
$(".stretchMe").anystretch();
Expand All @@ -83,4 +84,4 @@ h3. Version 1.1

h3. Version 1.0

* This was forked from Backstretch (version 1.2)
* This was forked from Backstretch (version 1.2)
19 changes: 12 additions & 7 deletions examples/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,22 @@

<h1>Solution: <em>using jQuery Anystretch</em></h1>

<div class="div01 stretchMe" data-stretch="img01.jpg">
<div class="div01 stretchMe" data-filename="img01.jpg" data-positionx="center" data-positiony="bottom" data-speed="3000" data-elposition="relative">
<div>
<h2>Element with hardly any content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>

<div class="div02 stretchMe" data-stretch="img02.jpg">
<div class="div02 stretchMe" data-filename="img02.jpg" data-speed="4000">
<div>
<h2>Element with much more content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

<div class="div03 stretchMe" data-stretch="img03.jpg">
<div class="div03 stretchMe">
<div>
<h2>Element with loads and loads of content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
Expand All @@ -59,11 +59,16 @@ <h2>Element with loads and loads of content</h2>
<script src="../jquery.anystretch.js"></script>

<script>
// $('.div01').anystretch("img01.jpg");
// $('.div02').anystretch("img02.jpg");
// $('.div03').anystretch("img03.jpg");

$(".stretchMe").anystretch();
$('.div01').anystretch("img01.jpg");
$('.div02').anystretch("img02.jpg");
$('.div03').anystretch("img03.jpg", {
positionx: "right",
positiony: "bottom",
speed: 6000
});

//$(".stretchMe").anystretch();
</script>

</body>
Expand Down
97 changes: 58 additions & 39 deletions jquery.anystretch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,30 @@
$.fn.anystretch = function(src, options, callback) {
var isBody = this.selector.length ? false : true; // Decide whether anystretch is being called on an element or not

return this.each(function(i){
return this.each(function(i) {
var defaultSettings = {
positionX: 'center', // Should we center the image on the X axis?
positionY: 'center', // Should we center the image on the Y axis?
speed: 0, // fadeIn speed for background after image loads (e.g. "fast" or 500)
elPosition: 'relative', // position of containing element when not being added to the body
dataName: 'stretch' // The data-* name used to search for
filename: "", // Path to file
positionx: "center", // Should we center the image on the X axis?
positiony: "center", // Should we center the image on the Y axis?
elposition: "relative", // position of containing element when not being added to the body
speed: 0 // fadeIn speed for background after image loads (e.g. "fast" or 500)
},
el = $(this),
container = isBody ? $('.anystretch') : el.children(".anystretch"),
settings = container.data("settings") || defaultSettings, // If this has been called once before, use the old settings as the default
existingSettings = container.data('settings'),
imgRatio, bgImg, bgWidth, bgHeight, bgOffset, bgCSS;
el = $(this),
container = isBody ? $(".anystretch") : el.children(".anystretch"),
settings = container.data("settings") || defaultSettings, // If this has been called once before, use the old settings as the default
existingSettings = container.data("settings"),
imgRatio,
bgImg,
bgWidth,
bgHeight,
bgOffset,
bgCSS;

// Extend the settings with those the user has provided
if(options && typeof options == "object") $.extend(settings, options);
if (options && typeof options == "object") $.extend(settings, options);

// Just in case the user passed in a function without options
if(options && typeof options == "function") callback = options;
if (options && typeof options == "function") callback = options;

// Initialize
$(document).ready(_init);
Expand All @@ -48,16 +53,16 @@

function _init() {
// Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo
if(src || el.length >= 1) {
if (src || el.length >= 1) {
var img;

if(!isBody) {
// If not being added to the body set position to elPosition (default: relative) to keep anystretch contained
el.css({position: settings.elPosition, background: "none"});
if (!isBody) {
// If not being added to the body set position to elposition (default: relative) to keep anystretch contained
el.css({position: settings.elposition, background: "none"});
}

// If this is the first time that anystretch is being called
if(container.length == 0) {
if (container.length == 0) {
container = $("<div />").attr("class", "anystretch")
.css({left: 0, top: 0, position: (isBody ? "fixed" : "absolute"), overflow: "hidden", zIndex: (isBody ? -999999 : -999998), margin: 0, padding: 0, height: "100%", width: "100%"});
} else {
Expand All @@ -66,7 +71,7 @@
}

img = $("<img />").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: -999999})
.bind("load", function(e) {
.on("load", function(e) {
var self = $(this),
imgWidth, imgHeight;

Expand All @@ -77,10 +82,12 @@

_adjustBG(function() {
self.fadeIn(settings.speed, function(){
// Remove the old images, if necessary.
container.find('.deleteable').remove();
// Callback
if(typeof callback == "function") callback();
// Remove the old images, if necessary.
container.find(".deleteable").remove();
// Callback
if (typeof callback == "function") {
callback();
}
});
});

Expand All @@ -89,24 +96,33 @@

// Append the container to the body, if it's not already there
if(el.children(".anystretch").length == 0) {
if(isBody) {
$('body').append(container);
if (isBody) {
$("body").append(container);
} else {
el.append(container);
}
}


// Look for data attributes to override default settings
for (property in defaultSettings) {
if (el.data(property)) {
defaultSettings[property] = el.data(property);
}
}

// Attach the settings
container.data("settings", settings);

var imgSrc = "";
if(src) {

if (src) {
imgSrc = src;
}else if(el.data(settings.dataName)) {
imgSrc = el.data(settings.dataName);
}else{
} else if (settings.filename.length > 0) {
imgSrc = settings.filename;
} else {
return;
}

img.attr("src", imgSrc); // Hack for IE img onload event

// Adjust the background size when the window is resized or orientation has changed (iOS)
Expand All @@ -122,26 +138,30 @@

// Make adjustments based on image ratio
// Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
if(bgHeight >= _height()) {
if (bgHeight >= _height()) {
bgOffset = (bgHeight - _height()) /2;
if(settings.positionY == 'center' || settings.centeredY) { //
if (settings.positiony == "center" || settings.centeredY) { //
$.extend(bgCSS, {top: "-" + bgOffset + "px"});
} else if(settings.positionY == 'bottom') {
} else if (settings.positiony == 'bottom') {
$.extend(bgCSS, {top: "auto", bottom: "0px"});
}
} else {
bgHeight = _height();
bgWidth = bgHeight * imgRatio;
bgOffset = (bgWidth - _width()) / 2;
if(settings.positionX == 'center' || settings.centeredX) {
if (settings.positionx == "center" || settings.centeredX) {
$.extend(bgCSS, {left: "-" + bgOffset + "px"});
} else if(settings.positionX == 'right') {
} else if (settings.positionx == 'right') {
$.extend(bgCSS, {left: "auto", right: "0px"});
}
}

container.children("img:not(.deleteable)").width( bgWidth ).height( bgHeight )
.filter("img").css(bgCSS);
container.children("img:not(.deleteable)")
.width(bgWidth)
.height(bgHeight)
.filter("img")
.css(bgCSS);

} catch(err) {
// IE7 seems to trigger _adjustBG before the image is loaded.
// This try/catch block is a hack to let it fail gracefully.
Expand All @@ -164,7 +184,6 @@

$.anystretch = function(src, options, callback) {
var el = ("onorientationchange" in window) ? $(document) : $(window); // hack to acccount for iOS position:fixed shortcomings

el.anystretch(src, options, callback);
};

Expand Down