Этот мод создает Головоломку из фотографий в альбомах... Помню раньше мы в такие играли на приставках к телевизору, а сейчас на телефоне у каждого есть :joyful:
:smile: Плюс к развлечениям.
Установка:
Открываем open album_file.tpl и находим:
Code:
{* DISPLAY FILE/IMAGE *}
******{$file_src}
</div>
После Добавляем:
Code:
<div style='font-weight: bold; margin-left: auto; margin-right: auto;' id="messageDiv"></div>
<div style='font-weight: bold; margin-left: auto; margin-right: auto;'>
****{literal} <a href="#" onclick="scramble();return false">Remix</a> | <a href="#" onclick="javascript:initPuzzle();return false">Puzzle</a> |
<form style="display:inline">
Columns/Rows: <input type="text" value="4" onblur="var no = this.value.replace(/[^d]/g,'');if(no/1<3){ this.value = '3';no=3; };cols=no" maxlength="1" size="2"> x
<input type="text" value="3" onblur="var no = this.value.replace(/[^d]/g,'');if(no/1<2){ this.value = '2';no=2; };rows=no" maxlength="1" size="2"></form>
<style type="text/css">
****#media_photo_div .square{
********overflow:hidden;
********border-left:1px solid #FFF;
********border-top:1px solid #FFF;
********position:absolute;
****}
****.activeImageIndicator{
********border:1px solid #FF0000;
********position:absolute;
********z-index:10000;
****}
****.revealedImage{
********position:absolute;
********left:0px;
********opacity:0;
********filter:alpha(opacity=50);
********top:0px;
********z-index:50000;
****}
****</style>
****
****
****<script type="text/javascript">
************
****var puzzleImages = ['{/literal}{$media_path}{literal}'];****// Array of images to choose from
****var rows = 3;
****var cols = 4;
********
****var imageArray = new Array();
****var imageInUse = false;
****var puzzleContainer;
****var activeImageIndicator = false;
****var activeSquare = false;**** // Reference to active puzzle square
****var squareArray = new Array(); // Array with references to all the squares
****
****var emptySquare_x;
****var emptySquare_y;
****
****var colWidth;
****var rowHeight;
****
****var gameInProgress = false;
****
****var revealedImage = false;
****
****for(var no=0;no<puzzleImages.length;no++){
********imageArray[no] = new Image();
********imageArray[no].src = puzzleImages[no];****
****}
****
****function initPuzzle()
****{
********gameInProgress = false;
********var tmpInUse = imageInUse;
********imageInUse = imageArray[Math.floor(Math.random() * puzzleImages.length)];
********if(imageInUse==tmpInUse && puzzleImages.length>1)
************initPuzzle();
********else{
************puzzleContainer = document.getElementById('media_photo_div');
************getImageWidth();
********}
****}
****
****function getImageWidth()
****{
********if(imageInUse.width>0){
************startPuzzle();****
********}else{
************setTimeout('getImageWidth()',100);****
********}
****}
****
****function scramble()
****{
********gameInProgress = true;
********var currentRow = cols-1;
********var currentCol = rows-1;
********
********document.getElementById('revealedImage').style.display='none';
********
********for(var no=0;no<rows;no++){
************for(var no2=0;no2<cols;no2++){
****************if(no<rows.length || no2<cols.length){
********************var el = document.getElementById('square_' + no2 + '_' + no);
********************if(el){
************************el.style.left = (no2 * colWidth) + (no2) + 'px';
************************el.style.top = (no * rowHeight) + (no) + 'px';****
********************}else{
************************initPuzzle();
************************return;
********************}
****************}************
************}
********}********
********
********
********var lastPos=false;
********var countMoves = 0;
********while(countMoves<(50*cols*rows)){
************var dir = Math.floor(Math.random()*4);
************var readyToMove = false;
************if(dir==0 && currentRow>0 && lastPos!=1){****// Moving peice down
****************currentRow = currentRow-1;****
****************readyToMove = true;
************}****************
************if(dir==1 && currentRow<(rows-1) && lastPos!=0){****// Moving peice up
****************currentRow = currentRow+1;
****************readyToMove = true;
************}****
************if(dir==2 && currentCol>0 && lastPos!=3){**** // Moving peice right
****************currentCol = currentCol -1;
****************readyToMove = true;
************}****
************if(dir==3 && currentCol<(cols-1) && lastPos!=2){**** // Moving peice right
****************currentCol = currentCol + 1;
****************readyToMove = true;
************}
************if(readyToMove){
****************activeSquare = document.getElementById('square_' + currentCol + '_' + currentRow);
****************moveImage(false,true);****
****************lastPos = dir;
****************countMoves++;
************}
********}
********
********return;
****}
****
****function gameFinished()
****{
********var string = "";
********var squareWidth = colWidth + 1;
********var squareHeight = rowHeight + 1;********
********var squareCounter = 0;
********var errorsFound = false;
********var correctSquares = 0;
********for(var prop in squareArray){
************var currentCol = squareCounter % cols;
************var currentRow = Math.floor(squareCounter/cols);
************var correctLeft = currentCol * squareWidth;
************var correctTop = currentRow * squareHeight;
************if(squareArray[prop].style.left.replace('px','') != correctLeft || squareArray[prop].style.top.replace('px','') != correctTop){
****************//return;************
************}else{
****************correctSquares++;
************}
****************
************squareCounter++;****
********}****
********
********if(correctSquares == ((cols * rows) -1)){
************document.getElementById('messageDiv').innerHTML = '<h2>Fantastic! You did it !!</h2>';
************gameInProgress = false;
************revealImage();
************
********}else{
************document.getElementById('messageDiv').innerHTML = 'Currently, you have ' + correctSquares + ' out of ' + ((cols * rows) -1) + ' pieces placed correctly';
********}
********
****}
****
****var currentOpacity = 0;
****function revealImage()
****{
********if(currentOpacity==100)currentOpacity=0;
********var obj = document.getElementById('revealedImage');
********obj.style.display = 'block';
********currentOpacity = currentOpacity +2;
********if(document.all){
************obj.style.filter = 'alpha(opacity='+currentOpacity+')';
********}else{
************obj.style.opacity = currentOpacity/100;
********}
********
********if(currentOpacity<100)setTimeout('revealImage()',10);
********
****}
****function displayActiveImage()
****{
********if(!gameInProgress)return;
********if(!activeImageIndicator){
************activeImageIndicator = document.createElement('DIV');
************activeImageIndicator.className = 'activeImageIndicator';
************puzzleContainer.appendChild(activeImageIndicator);
************activeImageIndicator.onclick = moveImage;
************
********}
********activeImageIndicator.style.display='block';
********activeImageIndicator.style.left = this.offsetLeft +**'px';
********activeImageIndicator.style.top = this.offsetTop + 'px';
********activeImageIndicator.style.width = this.style.width;
********activeImageIndicator.style.height = this.style.height;
********activeImageIndicator.innerHTML = '<span></span>';
********activeSquare = this;
****}
****
****function moveImage(e,fromShuffleFunction)
****{
********if(!activeSquare)return;
********if(!gameInProgress && !fromShuffleFunction){
************alert('You have to shuffle the cards first');
************return;
********}
********var currentLeft = activeSquare.style.left.replace('px','') /1;
********var currentTop = activeSquare.style.top.replace('px','') /1;
********
********var diffLeft = Math.round((currentLeft - emptySquare_x) / colWidth);
********var diffTop = Math.round((currentTop - emptySquare_y) / rowHeight);****
********
********if(((diffLeft==-1 || diffLeft==1) && diffTop==0) || ((diffTop==-1 || diffTop==1) && diffLeft==0)){****// Moving right
************activeSquare.style.left = emptySquare_x + 'px';
************activeSquare.style.top = emptySquare_y + 'px';
************emptySquare_x = currentLeft;
************emptySquare_y = currentTop;****
************activeSquare = false;****
************if(activeImageIndicator)activeImageIndicator.style.display = 'none';
************if(!fromShuffleFunction)gameFinished();****
********}
****}
****
****function startPuzzle()
****{
********puzzleContainer.innerHTML = '';
********var subDivs = puzzleContainer.getElementsByTagName('DIV');
********for(var no=0;no<subDivs.length;no++){
************subDivs[no].parentNode.removeChild(subDivs[no]);
********}
********activeImageIndicator = false;
********squareArray.length = 0;
********
********if(document.getElementById('revealedImage')){
************var obj = document.getElementById('revealedImage');
************obj.parentNode.removeChild(obj);
********}
********var revealedImage = document.createElement('DIV');
********revealedImage.style.display='none';
********revealedImage.id='revealedImage';;
********revealedImage.className='revealedImage';;
********var img = document.createElement('IMG');
********img.src = imageInUse.src;
********revealedImage.appendChild(img);
********puzzleContainer.appendChild(revealedImage);
************
********colWidth = Math.round(imageInUse.width / cols)-1;
********rowHeight = Math.round(imageInUse.height / rows)-1;
********puzzleContainer.style.width = colWidth * cols + (cols * 1) + 'px';
********puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 'px';
********
********if(navigator.appVersion.indexOf('5.')>=0 && navigator.userAgent.indexOf('MSIE')>=0){
************puzzleContainer.style.width = colWidth * cols + (cols * 1) + 20 + 'px';
************puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 20 + 'px';************
************
********}
****************
********if(!revealedImage){
************revealedImage = document.createElement('DIV');
************revealedImage.style.display='none';****
************revealedImage.innerHTML = '';
************
********}
********for(var no=0;no<rows;no++){
************for(var no2=0;no2<cols;no2++){
****************if(no2==cols-1 && no==rows-1){
********************emptySquare_x = (no2 * colWidth) + (no2);****
********************emptySquare_y = (no * rowHeight) + (no);****
********************break;
****************}
****************var newDiv = document.createElement('DIV');
****************newDiv.id = 'square_' + no2 + '_' + no;
****************newDiv.onmouseover = displayActiveImage;
****************newDiv.onclick = moveImage;
****************newDiv.className = 'square';
****************newDiv.style.width = colWidth + 'px';
****************newDiv.style.height = rowHeight + 'px';****
****************newDiv.style.left = (no2 * colWidth) + (no2) + 'px';
****************newDiv.style.top = (no * rowHeight) + (no) + 'px';
****************newDiv.setAttribute('initPosition',(no2 * colWidth) + (no2) + '_' + (no * rowHeight) + (no));
****************var img = new Image();
****************img.src = imageInUse.src;
****************img.style.position = 'absolute';
****************img.style.left = 0 - (no2 * colWidth) + 'px';
****************img.style.top = 0 - (no * rowHeight) + 'px';
****************newDiv.appendChild(img);****************
****************puzzleContainer.appendChild(newDiv);
****************squareArray.push(newDiv);
************}
********}****
********
********
****}
********
****</script>
{/literal}
****</div>
Готово :wink:
