shapeshift jquery自定義白色照片

Question

我試圖自定義該jQuery腳本，但我不能。

我想要做的唯一的事情就是改變框的照片，喜歡貓咪的人，但絲毫沒有選項，但我不能做

http://mcpants.github.com/jquery.shapeshift/

那庫

(function() { 

$(function() { 
var $containers, child_count, filter_options, getRandomColor, renderChildren, renderPlaceholders; 
$containers = $(".ss-container"); 
child_count = 5; 
(renderChildren = function() { 
    var weighted_colspans; 
    weighted_colspans = [1]; 
    return $containers.each(function(container_i) { 
    var colspan, elements, height, i, _i; 
    elements = []; 
    for (i = _i = 0; 0 <= child_count ? _i < child_count : _i > child_count; i = 0 <= child_count ? ++_i : --_i) { 
     colspan = 209; 
     height = 280;   
     elements.push("<li data-ss-colspan=" + colspan + " style='height: " + height + "px'><div class='position'><div>" + i + "</div></div></li>");   
    } 
    return $(this).append(elements.join("")); 
    }); 
})(); 
getRandomColor = function() { 
    var color, i, letters, _i, _ref; 
    letters = 'ABCDEF'.split(''); 
    color = ''; 
    for (i = _i = 0, _ref = letters.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) { 
    color += letters[Math.round(Math.random() * 5)]; 
    } 
    return color; 
}; 
(renderPlaceholders = function(type) { 
    return $containers.each(function() { 
    var $child, $children, background, height, i, width, _i, _results; 
    $children = $(this).children().not(".credits"); 
    child_count = $children.length; 
    if (type === "index") { 
     return $(this).find(".position").show(); 
    } else { 
     $(this).find(".position").hide(); 
     _results = []; 
     for (i = _i = 0; 0 <= child_count ? _i < child_count : _i > child_count; i = 0 <= child_count ? ++_i : --_i) { 
     $child = $($children[i]); 
     height = $child.height(); 
     width = $child.width(); 
     switch (type) { 
      case "fpoimg": 
      background = 'url("http://fpoimg.com/' + width + 'x' + height + '?bg_color=' + getRandomColor() + '&text_color=444444")'; 
      break; 
      case "placekittens": 
      background = 'url("http://www.placekitten.com/' + width + '/' + height + '")'; 
     } 
     _results.push($child.css({ 
      backgroundImage: background, 
      height: height 
     })); 
     } 
     return _results; 
    } 
    }); 
})("fpoimg"); 
filter_options = { 
    minColumns: 3 
}; 
$containers.shapeshift(filter_options); 
$(".options ul.animation li").on("click", function() { 
    switch ($(this).data("option")) { 
    case "enable": 
     filter_options.animated = true; 
     break; 
    default: 
     filter_options.animated = false; 
    } 
    return $containers.shapeshift(filter_options); 
}); 
$(".options ul.dragndrop li").on("click", function() { 
    switch ($(this).data("option")) { 
    case "enable": 
     filter_options.enableDrag = true; 
     filter_options.enableDrop = true; 
     break; 
    default: 
     filter_options.enableDrag = false; 
     filter_options.enableDrop = false; 
    } 
    $containers.trigger('ss-destroy'); 
    return $containers.shapeshift(filter_options); 
}); 
$(".options ul.filtering li").on("click", function() { 
    switch ($(this).data("option")) { 
    case "hide": 
     $containers.children(":visible").sort(function() { 
     return Math.round(Math.random()) - 0.5; 
     }).first().hide(); 
     break; 
    default: 
     $containers.children(":hidden").sort(function() { 
     return Math.round(Math.random()) - 0.5; 
     }).first().show(); 
    } 
    return $containers.trigger("ss-rearrange"); 
}); 
$(".options ul.placeholders li").on("click", function() { 
    renderPlaceholders($(this).data("option")); 
    return $containers.shapeshift(filter_options); 
}); 
$containers.on("ss-arranged", function(e, selected) { 
    var modifier; 
    modifier = $(this).find(".ss-dragging")[0] ? 1 : 0; 
    return $(this).children().each(function() { 
    return $(this).find(".position").text($(this).index() - modifier); 
    }); 
}); 
$containers.on("ss-rearranged", function(e, selected) { 
    console.log("----------------------------------------"); 
    console.log("This container:"); 
    console.log($(this)); 
    console.log("Has rearranged this item:"); 
    console.log($(selected)); 
    return console.log("Into this position:", $(selected).index()); 
}); 
$containers.on("ss-removed", function(e, selected) { 
    console.log("----------------------------------------"); 
    console.log("This item:"); 
    console.log($(selected)); 
    console.log("Has been removed from this container:"); 
    return console.log($(this)); 
}); 
$containers.on("ss-added", function(e, selected) { 
    console.log("----------------------------------------"); 
    console.log("This item:"); 
    console.log($(selected)); 
    console.log("Has been added to this container:"); 
    return console.log($(this)); 
}); 
$containers.on("ss-trashed", function(e, selected) { 
    console.log("----------------------------------------"); 
    console.log("This item:"); 
    console.log($(selected)); 
    return console.log("Has been removed from the DOM"); 
}); 
return $containers.on("ss-drop-complete", function(e) { 
    console.log("----------------------------------------"); 
    console.log("This container:"); 
    console.log($(this)); 
    return console.log("Has finished rearrangement after a drop."); 
}); 
}); 

}).call(this); 

Answer 1

這幾乎是您獲得jQuery.Shapeshift工作所需的最低限度，並且可見：

http://jsfiddle.net/mikemhz/tjAQN/

分

的style.css

ul.ss-container { 
    position: relative; 
    width: 100%; 
    list-style-type: none; 
} 

ul.ss-container li { 
    background-color: rgb(0,0,0); 
    position: absolute; 
    height:120px; 
    width:80px; 
} 

ul.ss-container li[data-ss-colspan="2"] { width: 170px; } 
ul.ss-container li[data-ss-colspan="3"] { width: 260px; } 
ul.ss-container li[data-ss-colspan="4"] { width: 350px; } 

ul.ss-container li.ss-dragged-child { 
    cursor: move; 
    z-index: 9999; 
    opacity: .7; 
} 

ul.ss-container li.ss-placeholder-child { 
    background-color:grey; 
} 

的script.js

$(document).ready(function(){ 
    $('.ss-container').shapeshift(); 
}); 

INDEX.HTML

<!doctype html> 
<html lang="en"> 
<head> 
<title>jQuery.Shapeshift</title> 

<!-- jQuery --> 
<script src="jquery.min.js"></script> 
<script src="jquery-ui.min.js"></script> 


<!-- Core Shapeshift & Touch Compatability Files --> 
<script src="jquery.touch-punch.min.js"></script> 
<script src="jquery.shapeshift.min.js"></script> 

<!-- My Own Files --> 
<link rel="stylesheet" href="style.css"></link> 
<script type="text/JavaScript" src="script.js"></script> 


</head> 
<body> 
    <ul class="ss-container"> 
     <li data-ss-colspan="1"></li> 
     <li data-ss-colspan="1"></li> 
     <li data-ss-colspan="1"></li> 
     <li data-ss-colspan="1"></li> 
     <li data-ss-colspan="1"></li> 
     <li data-ss-colspan="1"></li> 
     <li data-ss-colspan="1"></li> 
     <li data-ss-colspan="1"></li> 
     <li data-ss-colspan="1"></li> 
    </ul> 
</body> 
</html>