Zuda Template(resolved)

Request custom templates here. There is no guarantee that it will be made for you. Please be respectful, polite, and patient when posting a request.

Zuda Template(resolved)

Postby Guest » May 31st, 2011, 9:21 am

I'm currently using the "default" template but I want to be able to navigate my comic like Zuda.

I don't know if any of you ever read Zuda while it was being produced but I absolutely fell in love with how you navigated each webcomic. Specifically I loved the fact that you could click the comic to full screen and then just navigate by either pushing left/right arrow key or clicking on the left/right side of the page. Each time you clicked left or right it would keep the page full screen. My pages are already drawn so they can be scaled to screen size. In concept this seems simple but I've found it's a bit of a challenge, at least for me. Less important and not necessary would be giving the "default" template a darker style and changing the rating stars to pill bottles.

Sorry to bug you guys but this would help me out a lot. Thanks.
Last edited by Guest on June 2nd, 2011, 9:41 pm, edited 1 time in total.
Guest
 

Re: Zuda Template

Postby eishiya » May 31st, 2011, 9:53 am

To navigate with the arrow keys, add this code to your Comic Page template:
Code: Select all
<script type = "text/javascript">
function isUrl(s) {
   var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
   return regexp.test(s);
}
document.onkeydown = function(e) {
   
   var e = window.event || e;
   
   if (e.keyCode == 37) {
     
      var prev_url = '{NAV_PREV}';
      if( isUrl( prev_url ) )
         window.location = prev_url;
     
   } else if (e.keyCode == 39) {

      var next_url = '{NAV_NEXT}';
      if( isUrl( next_url ) )
         window.location = next_url;
   
   }
   
}
</script>

This makes Left = Previous, Right = Next. You could add more, but that just increases the chance of a mis-press.

I'm not really sure what you mean with the scaling. The way you describe it seems like it would be an undesirable feature for a lot of people. In any case, I don't think I can help you, but it should be doable with JavaScript. You'd have to make the comic link to the JavaScript code that does the resize. If you want the navigation above to link to the upscaled version, just set an anchor link (e.g. "{NAV_NEXT}#resized") when you navigate (so you might have to change where the code links depending on whether the upscale is active or not. This is doable). The anchor method is a fairly standard way of activating JS on command, so I'm sure there are lots examples online.
Image
User avatar
eishiya
 
Posts: 9884
Joined: December 5th, 2009, 11:17 am

Re: Zuda Template

Postby Guest » May 31st, 2011, 11:20 am

Thank you so much. The code works like a charm. By "scaling" I just meant that the pages have roughly 3x4 dimensions so that it fits a rectangular screen. It just makes it so you don't have to scroll down to see the whole page, while at the same time showing enough detail.
Guest
 


Return to Template Requests

Who is online

Users browsing this forum: No registered users and 1 guest