Results 1 to 3 of 3

Thread: JavaScripts

  1. #1
    Administrator Real_Light's Avatar
    Join Date
    Feb 2016
    Location
    Islamabad
    Posts
    813
    Rep Power
    10

    Post JavaScripts

    JavaScripts

    This section contains several JavaScript projects and stand-alone versions of scripts that were used in some of the WordPress plugins. It also contains some solutions to common JavaScript cross-browser compatibility problems and a few (hopefully useful) bits of code.

  2. #2
    Administrator Real_Light's Avatar
    Join Date
    Feb 2016
    Location
    Islamabad
    Posts
    813
    Rep Power
    10

    Re: JavaScripts

    Shutter Reloaded

    Shutter Reloaded is an image viewer for your website that works similarly to Lightbox, Thickbox, etc. but is only about 10KB in size and does not require any external libraries. It has many features: resizing large images if the window is too small to display them with option to show the full size image, combining images in sets, redrawing the window after resizing, pre-loading of neighbour images for faster display and very good browser compatibility.

    Demo

    Shutter Reloaded demo 450 X 300Shutter Reloaded demo 600 X 400Shutter Reloaded demo 900 X 600

    Download ShutterReloaded v2.0.1

    Installation

    Upload the “shutter” folder to your web server and add the following to your header (in this order):

    <script type="text/javascript">
    shutterOnload = function(){shutterReloaded.Init();}
    </script>
    <script src="shutter/shutter.js" type="text/javascript"></script>
    <link rel="stylesheet" href="shutter/shutter.css" type="text/css" media="screen" />
    Alternatively you can copy and paste the content of shutter.css to your site’s main css file, instead of loading it as a separate file.

    If your site has html pages organized in subfolders, change the setting for Shutter’s buttons location in shutter.js from shutter/images/ to /shutter/images/ (add the starting slash). Then upload the “shutter” folder to your web site’s root directory (where your main index.html file is located) and include it on any page in any subfolder like this:

    <script type="text/javascript">
    shutterOnload = function(){shutterReloaded.Init();}
    </script>
    <script src="/shutter/shutter.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/shutter/shutter.css" type="text/css" media="screen" />
    Activation

    By default Shutter is activated on all links pointing to an image, with thumbnail or not. There’s no need for any changes to the page, just add Shutter in the header. It will display each image separately and will create sets for image links that have either class=”shutterset”, class=”shutterset_setname” or rel=”lightbox[setname]”.

    For controlling which images are displayed, Shutter can be activated with shutterReloaded.Init('sh'). Next step is to add class=”shutter”, “shutterset” or “shutterset_setname” to the links pointing to the images you want to display.

    class="shutter" will display one image at a time
    class="shutterset" will combine all image links in a single set
    class="shutterset_setname", where setname is a short word and/or number, will create multiple sets on the page.
    If you want to add css styles to the links, you can include a second class, but “shutterset” should be first. Example: class="shutterset_setname my-class".

    Shutter Reloaded can also use Lightbox style activation and sets. You can activate it with shutterReloaded.Init('lb') and use rel="lightbox" for singe image display, or rel="lightbox[setname]" for sets of images.

    There’s no limitations to the number of images or the number of sets on the page.

    Customization

    Shutter Reloaded has several customization options that can be selected by changing the values near the top of the shutter.js and shutter.css files. Follow the instructions in the comments there.

    The “Previous”, “Next”, “Close”, etc. buttons can be either images or text.
    The images count (“Image 1 of …”) can be hidden.
    All colours, font sizes and typefaces can be set in shutter.css.
    The icons for the image buttons can be replaced with transparent GIFs (unfortunately PNGs won’t work in IE6). The names should be the same, but the size can be different.
    Frequently Asked Questions

    SHUTTER DOESN’T WORK AT ALL. THE IMAGES OPEN IN NEW PAGES.

    Check the <body> tag on the page to see if it includes an “onload” event. If it does, that overwrites Shutter’s activation. Example:

    <body onload="MM_preloadImages('/images...');">
    An easy workaround is to add “shutterReloaded.Init();” to it, like this:

    <body onload="shutterReloaded.Init(); MM_preloadImages('/images...');">
    However the more compatible way to fix it would be to add

    window.onload = function(){ MM_preloadImages('/images...'); }
    just above “shutterOnload = …” in the header (inside the <script> tag). Then delete the “onload=…” from the <body> tag.

    SHUTTER’S DARK BACKGROUND DOESN’T COVER THE WHOLE PAGE.

    Add body {margin: 0; padding: 0;} to your stylesheet.

  3. #3
    Administrator Real_Light's Avatar
    Join Date
    Feb 2016
    Location
    Islamabad
    Posts
    813
    Rep Power
    10

    Re: JavaScripts

    Block Resizer

    This is a small script for resizing textareas and other block elements (div, table, p, blockquote, etc.) vertically by dragging. It can use pre-made resizing handle or add one automatically at the bottom of the element when run. I know, Safari 3.0 has native support for resizing textareas and there are several plugins for Firefox that can add that. However most users still don’t have that (quite useful) option.

    Demo (Opens in a popup window)

    Download Block Resizer 1.0

    Installation

    Just link the js file in the header and add the style for the resizing handle if using the automatically created one:

    <script type=”text/javascript” src=”block-resizer.js”></script>
    <style type=”text/css”>
    #auto-handle {font-size:6px;height:6px;cursor:s-resize;border-top:3px dashed #aaa;}
    </style>
    Activation

    Activates with onmouseover="Resizer.Init(element.id, handle.id)" on the handle element if using pre-made handles, or onclick="Resizer.Init(this.id)" on the element when auto-creating handles. See the source of the demo for some examples.

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
page counter