Author Topic: [Mod] Puzzle MOD  (Read 6272 times)

0 Members and 1 Guest are viewing this topic.

Offline kubiczek

  • Full Member
  • ***
  • Posts: 211
    • View Profile
    • Gross Peterwitz
[Mod] Puzzle MOD
« on: February 11, 2011, 10:56:54 PM »
Hallo,

hier eine PUZZLE Modifikation für die Details Seite

Eingebaut nach folgendem TUTORIAL http://www.netzgesta.de/snapfit/  

hier meine DEMO http://www.grosspeterwitz.org/4images_puzzle/details.php?image_id=1


--------------------------------------------------------------------------------------------------------------------------------------------------------

bitte downloaden auf der TUTORIAL http://www.netzgesta.de/cvi/download.php?file=snapfit

1.) in root/js bitte snapfit.js kopieren

2.) deine template/media/jpg.html ersetzt mit

<script type="text/javascript"
window.onload = function () { 
    
snapfit.add(document.getElementById('{image_name}'));
	

	
};
</
script>

<
img id="{image_name}"  src="{media_src}" style="width:{width}px;height:{height}px;"  alt="{image_name}" border="0" /><br />




3.) in der templates/header.html suchen:

{if has_rss}

und davor einfügen
<script type="text/javascript" src="./js/snapfit.js"></script>
<
script language="javascript" type="text/javascript">
snapfit.defaultMixed        false//BOOLEAN mix pieces at startup
snapfit.defaultSimple       false//BOOLEAN mix the positions only
snapfit.defaultNokeys       false//BOOLEAN no keyboard control
snapfit.defaultPolygon      false//BOOLEAN polygons instead of rectangles
snapfit.defaultLevel        0//INT 0-6 (0==simple and 6==difficult)
snapfit.defaultSpace        0//INT 0-50 (%) inner frame space
snapfit.defaultSnap         8//INT 0-24 (px) snap radius
snapfit.defaultCallback     false//JS function(){ ... } call on manual solving
snapfit.defaultMatchcolor   '#00d000'//STR '#000000'-'#ffffff'
snapfit.defaultFalsecolor   '#ff0000'//STR '#000000'-'#ffffff'
snapfit.defaultAreacolor    '#e0e0e0'//STR '#000000'-'#ffffff'
snapfit.defaultBgrndcolor   '#000000'//STR '#000000'-'#ffffff'
snapfit.defaultAreaimage    false//BOOLEAN image as background
snapfit.defaultAreaborder   false//BOOLEAN background border
snapfit.defaultBorderwide   2//INT/FLOAT 1.0-6.0 (px) pieces border width
snapfit.defaultAreaopacity  0.33//FLOAT 0.0-1.0 background area/image opacity
snapfit.defaultBorderopacity0.5//FLOAT 0.0-1.0 pieces border/backside opacity
snapfit.defaultShadowopacity0.75//FLOAT 0.0-1.0 active piece shadow opacity
snapfit.defaultForcetouchui false//BOOLEAN forces touch UI over the mouse UI if both available
</script>



4.) finde in der  details.html

 {image}

danach einfügen

<select id="level" size="1" onchange="snapfit.reset(document.getElementById('{image_name}'),parseInt(this.options[this.selectedIndex].value));">
<
option value="0">160px (extrem low)</option>
<
option value="1"selected="selected">128px (very low)</option>
<
option value="2">104px (low)</option>
<
option value="3">080px (medium)</option>
<
option value="4">064px (high)</option>
<
option value="5">056px (very high)</option>
<
option value="6">048px (extrem high)</option>
</
select>

<
button type="button" onclick="snapfit.admix(document.getElementById('{image_name}'));">Admix</button>
<
button type="button" onclick="snapfit.solve(document.getElementById('{image_name}'));">Solve</button><br />



----------------------------------------------------------------------------------------------------------------------------------------------
Habe es in FF IE CHROME SAFARI getestet. Geht einwandfrei.

Ein  schönheitsfehler ist, das wenn das Puzzle gemixt wird, die Würfel mit schwarzem rand spiegelverkehrt sind und mit der
RECHTEN MAUSE TASTE gedreht werden müssen, bekantlich ist ja die RECHTS TASTE Sperre aktiviert.

@Rembrandt hast du vielleicht eine IDEE wie mann das umgehen kann, mein englisch ist nicht so gut, vielleicht kann man es schon beim ADMIXEN  abstellen.

Viel Spass
« Last Edit: February 12, 2011, 01:36:49 PM by kubiczek »

Offline kubiczek

  • Full Member
  • ***
  • Posts: 211
    • View Profile
    • Gross Peterwitz
Re: [Mod] Puzzle MOD
« Reply #1 on: December 27, 2011, 09:39:28 PM »
Hallo,

Bin jetzt ein Stück weitergekommen, leider überlagern sich die Div Container immer noch, ich bekomme keine Saubere Trennung .

sehe Demo: http://www.grosspeterwitz.de/4images_puzzle/details.php?image_id=14

einzeln für sich funktionieren beide MODS sehr gut.

nur in kombination in der jpg.html geht es nicht.


hier der auszug aus der jpg.html


<script type="text/javascript" language="JavaScript">
<!-- 
Begin


window
.onload = function () { 

 
    
loupe.add(document.getElementById('{image_name}'));
	
              
// Zoom  MOD
	
 
snapfit.add(document.getElementById('{image_name}'));
	
  
// Puzzel MOD
};


function 
toggleMe02(a){

  
// beim Einblenden einer Box generell alle ausblenden
  
AlleAus02()

  var 
e=document.getElementById(a);
  if(!
e)return true;
  if(
e.style.display=="none"){
    
e.style.display="block"
  
} else {
    
e.style.display="none"
  
}
  return 
true;
}


// hier müssen alle Container-IDs eingetragen werden
// die Funktion schaltet alle Boxen auf unsichtbar

function AlleAus02() {
   
para11.style.display="none"
   
para12.style.display="none"
   
para13.style.display="none"
 
}

//  End -->
</script>

<!-- 
CSS-Angaben für die Box und den Link -->

<
style type="text/css">
<!--
/* für das horizontake Menü */

#menu10 ul {
	
padding:0px;
	
margin:0px;
}
#menu10 li {
	
list-
stylenone;
	
displayinline;
}
#menu10 li a {
	
font-family:VerdanaTahomaArialsans-serif;
	
font-size11px;
	
text-decorationnone;
	
color:#0090E0;
	
padding5px 10px 20px 0px;
	
font-weight:normal;
	
text-transform:none;
}
#menu10 li a:hover {
	
color:#FF007F;
}
-->
</
style>
</
head><body vlink="#000000" alink="#FFFFFF" link="#000000" bgcolor="#FFFFFF" text="#000000">
<
table height="100%" width="100%" border="0" cellspacing="0" cellpadding="0">
  <
tr>
    <
td width="100%" valign="top" style="padding:20px;"><div id="menu10">
        <
li><a onClick="return toggleMe02('para11')" href="javascript:void(0)"><img src="rot17c.gif" width="10" height="10" border="0" alt=""Puzzel MOD</a></li>
        <
li><a onClick="return toggleMe02('para12')" href="javascript:void(0)"><img src="rot17c.gif" width="10" height="10" border="0" alt=""Zoom MOD</a></li>
        <
li><a onClick="return toggleMe02('para13')" href="javascript:void(0)"><img src="rot17c.gif" width="10" height="10" border="0" alt=""Standard Ansicht</a></li>
      </
div>
      <
br>
      
      <!-- 
Status box 01 (display:none ausdisplay:block ein) -->
      
      <
div style="display:none;" class="dbox" id="para11">
        <
h3>Puzzel MOD</h3>
        <
img id="{image_name}"  src="{media_src}" style="width:{width}px;height:{height}px;"  alt="{image_name}" border="0" /><br />
      </
div>
      
      <!-- 
box 02 -->
      
      <
div style="display:none;" class="dbox" id="para12">
        <
h3>Zoom MOD</h3>
        {
ifnot big} <img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br >
        {
endifnot big}
        
        {if 
big}
        <
div style="width:{width}px;height:{height}px; background:url(./data/media/{cat_id}/{image_file_name}) no-repeat;"> <img id="{image_name}"  src="./data/media/{cat_id}/big/{image_file_name}" style="width:{width}px;height:{height}px;"  alt="{image_name}" border="0" /> </div>
        {endif 
big} </div>
      
      <!-- 
box 03 -->
      
      <
div style="display:block;" class="dbox" id="para13">
        <
h3>Standard</h3>
        <
img src="{media_src}" border="0" alt="{image_name}"{width_height} /><br />
      </
div>
      <
br>
      <
br>
      <
br>
      <
br></td>
  </
tr>
</
table>
</
body>
</
html>