forum.webdiplomacy.net

webDip dev coordination forum / public access todo list
It is currently Thu Oct 19, 2017 11:21 am

All times are UTC




Post new topic Reply to topic  [ 14 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Thu Dec 23, 2010 9:54 am 
Offline

Joined: Thu Jan 14, 2010 7:48 pm
Posts: 87
After some time I was finally able to update the zoom map mod.
Now the whole small map area is the zoom, so it's bigger and easier to see. The map and the zoom is also updated when you surf between seasons (forward or back). Also, this implementation works very well with Oliver mod to show/hide the arrows of the moves on the map.

Curious?

Here you are a picture first is a normal map, and after is the effect (on the same page!) if you click with your mouse on the small map:
Attachment:
normal.PNG
normal.PNG [ 248.21 KiB | Viewed 2203 times ]


Still don't get it? Check how the mod is working in the real life here.

Finally, if you want this on your site it's very simple to implement!!!

Beware of the known bugs of this version:
- the zoom will still work with touch devices, but there is no support for gesture movements. Clicking on the map using touch device will zoom the map in the area of the click ( Clicking around Italy, the zoom will show Italy).
- in the variants without the small map and the horizontal/vertical scrolling bars the bars will stop working if hte zoom is active!

Just download the needed files below and follow theese instructions:

!!!! The latest code is now on github alexintour/webDiplo - branch mod-zoom !!!

Code:
insert file lens.png  in \images\
insert file jquery.zoom.js  in  \javascript\
insert file jquery-1.8.3.min.js in \javascript\



OPEN file \lib\html.php

BEFORE line:
Code:
<script type="text/javascript" src="'.STATICSRV.'contrib/js/prototype.js"></script>


INSERT lines:
Code:
<script type="text/javascript" src="'.STATICSRV.'javascript/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="'.STATICSRV.'javascript/jquery.zoom.js"></script>


CLOSE file \lib\html.php

OPEN file \css3\global.css and at the very end insert the following lines:

Code:
/* css for the zoom MOD */
                p.lens { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

   /* optional icon style */
      .zoomIcon {
         width:33px;
         height:33px;
         position:absolute;
         top:0;
         right:0;
         background:url(../images/lens.png);
      }

      /* these styles are not required for the plugin */
      .zoom {
         display:inline-block;
         position:relative;
      }

      .zoom img {
         display: block;
      }

      .zoom img::selection { background-color: transparent; }

/* end zoom MOD css  */

CLOSE file \css3\global.css


OPEN file gamepanel\gameboard.php

AFTER line:
Code:
<div id="mapstore">


INSERT lines:
Code:
<script>   
jQuery(document) .ready(function($) {
$("#ex1").zoom({ url:" '.$largemapLink.'" });
}) ;
</script>
<span class = \'zoom\' id= \'ex1\'>


AND BEFORE line:
Code:
<p class="lightgrey" style="text-align:center">


INSERT line:
Code:
<p class="lens">Click</p></span>


CLOSE file gamepanel\gameboard.php

OPEN file javascript\mapUI.php

AFTER line:
Code:
$('mapImage').src = 'map.php?gameID='+gameID+'&turn='+newTurn;


INSERT line:
Code:
jQuery(document) .ready(function($) {$("#ex1").zoom({ url:'map.php?gameID='+gameID+'&turn='+newTurn+'&mapType=large'});
 }) ;


CLOSE file javascript\mapUI.php

If on your server you have one of the excellent Oliver variants with Fog of War, you need to adjust something just for those variants. Here you are the examples for the Classic Fog of War and the old TenSixtySix variants:

Fog of War on classic map:

OPEN file \variants\ClassicFog\resources\my_mapUI.js

AFTER line:
Code:
$('mapImage').src = 'variants/ClassicFog/resources/fogmap.php?verify='+verify+'&gameID='+gameID+'&turn='+newTurn;


INSERT line:
Code:
jQuery(document) .ready(function($) {$("#ex1").zoom({ url:'variants/ClassicFog/resources/fogmap.php?verify='+verify+'&gameID='+gameID+'&turn='+newTurn+'&mapType=large'});
                   }) ;


CLOSE file \variants\ClassicFog\resources\my_mapUI.js

TenSixtySix variant:
OPEN file \variants\TenSixtySix\resources\my_mapUI.js

AFTER line:
Code:
$('mapImage').src = 'variants/TenSixtySix/resources/fogmap.php?verify='+verify+'&gameID='+gameID+'&turn='+newTurn;


INSERT line:
Code:
jQuery(document) .ready(function($) {$("#ex1").zoom({ url:'variants/TenSixtySix/resources/fogmap.php?verify='+verify+'&gameID='+gameID+'&turn='+newTurn+'&mapType=large'});
                   }) ;

CLOSE file \variants\TenSixtySix\resources\my_mapUI.js


Now upload all the modified files n your server, and hit CTRL+F5 for a couple of times or delete the cache of your browser.
The good thing is that there isn't no more work to let people choose between using or not the zoom. If you don't want it, just don't click on the map! Very easy.


Attachments:
zoom 2.1 files.zip [34.15 KiB]
Downloaded 132 times


Last edited by alexintour on Fri Jun 28, 2013 7:22 pm, edited 6 times in total.
Top
 Profile  
 
PostPosted: Fri Dec 24, 2010 4:25 am 
Offline
Site Admin

Joined: Sat Jun 28, 2008 6:24 am
Posts: 892
Very nicely done, thanks for sharing


Top
 Profile  
 
PostPosted: Fri Dec 24, 2010 10:14 am 
Offline

Joined: Thu Jan 14, 2010 7:48 pm
Posts: 87
thanks.

now I'm trying to let the users choose in their profile whenever they want it enabled or not.
Already done this for the email notifications, but if other mods are going to be created, it could be useful to have already some columns in the DB dedicated to some not yet implemented questions ( like do you want to receive emai notifications? do you want to have the zoom option on the small map? and the answers yes or no)


Top
 Profile  
 
PostPosted: Fri Jan 14, 2011 1:23 am 
Offline
Site Admin

Joined: Sat Jun 28, 2008 6:24 am
Posts: 892
If you wanted to do this I would use the wD_User.type SET field, which makes it easy to add named true/false flags to an account type (up to 32). Then you can check/set it using "if( $User->type['ZoomMap'] ) { print '...'; }", without needing to add any new fields

We use it in a similar way for the "donator" flag for user accounts, but I'm thinking of extending it to all yes/no options. The only issue is that it only has room for 32 named things per field, so it might be best to keep wD_User.type for account types, and create a new one for options


Top
 Profile  
 
PostPosted: Mon Feb 07, 2011 10:42 am 
Offline

Joined: Thu Jan 14, 2010 7:48 pm
Posts: 87
after some use, two bugs were found:

jquery names as $ was conflicting with something else more important :), so it was renamed in j$

the navigation keys ( first turn, last turn, next turn...) were not updating the big map in the zoom, so, the map in the zoom was always the same, even if the small map was changed by the user.

updated the first post with the new instructions and files.


Top
 Profile  
 
PostPosted: Wed Oct 31, 2012 8:55 am 
Offline

Joined: Sat Jan 14, 2012 7:08 am
Posts: 48
Location: Ukraine
Have you got "RC"-version for me to install without any bugs?

_________________
"There is nothing in the world more majestic than this idiotic Galicia" (GAL)
Jaroslav Hasek


Top
 Profile  
 
PostPosted: Sat Dec 22, 2012 7:11 pm 
Offline

Joined: Thu Jan 14, 2010 7:48 pm
Posts: 87
I do have the RC of the new version of the zoom: the 2.1 Modified the first post with needed files and instructions.

what's new:

- the entire small map area is now zooming in, and not just a small area 200x200 pixel) inside the map as it was
- you can enable/disable the zoom just with a click on the small map. no more database changes to let users choose
- easier to implement, and faster to load
- compatible with Olivers hide/show order arrows (and possibly with "preview inserted orders button")

:D


Top
 Profile  
 
PostPosted: Wed Dec 26, 2012 6:41 am 
Offline

Joined: Wed Jul 29, 2009 10:22 am
Posts: 841
Very cool.
I'll add this to my site as soon as the migration to the new webdip-code is finished.

Small idea for improvement:
If you click a 2nd time on the picture it zooms out. Maybe make it NOT Zoom out, but just "release" the mouse, so you can see the actual zoom-view without movement and enter your orders. Unzoom if you click again.
1st click - activate zoom
2nd click - freeze the picture
3rd click - unzoom

Oliver


Top
 Profile  
 
PostPosted: Wed Dec 26, 2012 7:27 am 
Offline

Joined: Wed Jul 29, 2009 10:22 am
Posts: 841
Small addition:
This does not work with the gestures on a mobile device.
Any chance you can add this too?

Oliver


Top
 Profile  
 
PostPosted: Wed Dec 26, 2012 1:51 pm 
Offline

Joined: Thu Jan 14, 2010 7:48 pm
Posts: 87
Thanks, Oliver.
The idea for the 3 clicks is good, but at the moment I don't have the capabilities to realize it. :cry:
But I'll look on how the "click" method is working to see if it's possible to easily add another rule to this option.

The mobile/touch devices "bug" is also "known" on the release page.

Here (http://www.jacklmoore.com/zoom) you can find something in the comments.
Near the end there is this kind of comment: Phones don't support hover events of course. But, if you are using the hover style then they will be able to tap the area of the image they want to zoom in on.

Probably this IS the tip for the solution.

Also the code of this zoom is on githube: https://github.com/jackmoore/zoom
perhaps there the author will answer or solve bug/suggestions report.

Anyway I will look into the mobile problem, but after the update of russian and italian sites to the las webdiplomacy verison! :)


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 14 posts ]  Go to page 1, 2  Next

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group