My first unobtrusive JavaScript

czarte — Wed, 28 Apr 2010 09:40:51 +0000

First realy unobtrusive JavaScript using Jquery.

In <head> area in our HTML document we link in twho files:

1) jquery latest

2)unobtrusive script

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="mujskript.js"></script>

mujskript.js contains javaScript, which is trigered all needed elements from outside, so we can clen “onMouseOver” and so from our HTML .

 $(document).ready(function(picshow){
        $(".post").hover(
          function () {
            var postID = this.id;
            $("#image-" + postID).parent().animate({opacity: "0.95"}, 1);
            $("#image-" + postID).attr("style","z-index: 5");
            $("#image-" + postID).parent().animate({opacity: "1"}, "fast");
          },
          function () {
           var postID = this.id;
           $("#image-" + postID).attr("style","z-index: 1");
          }
        );
    });

In HTML we will create only structure with IDs and CLASSes.

<div class="widget thin">
 <div id="wrapimages">

  <div id="postmenu">

  <ul>
    <li><a class="post" id="post-73" href="http://www.domena.cz/kategorie/stavby/
         hotely/hotel-savanah/" title="Hotel Padova">Hotel Padova</a></li>
    <li><a class="post" id="post-84" href="http://www.domena.cz/kategorie/
         stavby/hotely/hotel-thalia-eurostar/" title="Hotel Euroforte">Hotel Euroforte</a></li>
  </ul>
  </div>

  <h2 class="nodisplay">Hotel Savanah</h2>
  <img src="http://www.domena.cz/uploads/StatueDome.jpg" alt="" id="image-post-73" />
  <h2 class="nodisplay">hotel thalia eurostar</h2>
  <img src="http://www.domena.cz/uploads/301_2Exterior_thalia.jpg" alt="" id="image-post-84" />
  </div>

 <div class="cleaner">&nbsp;</div>

 </div>
</div>

And in CSS we`ll define selectors.

#wrapimages {position: relative;}
#wrapimages img {position: absolute;}
#wrapimages #postmenu {position: absolute; z-index: 20;}

Tutorial for WP-image-slider

admin — Sun, 11 Oct 2009 10:50:03 +0000

We bringing picture tutorial for use wp-image-slider plugin, which allowed us to enter animated galleries to pages or posts. If we want to create new gallery, od edit complete one, we must go in administration at panel “WP image slider” as we can see at picture no. 1.

picture no. 1

Here, if we alredy have some galleries – see at picture no.2 – we will see list of them, including special tags (wp bracket) /point no. 4/ which allowed us to paste it in post or page to show our gallery in content. We can also use button for edit it, or delete it /no. 2 and 3/. At this page we can find button for create new gallery /no. 1/

pic no. 2

The enviroment of editing and creating galleries looks almost same – see at picture no.3 – so I put here only picture with creation of new gallery. Pictures we can add by checking boxes under picture. In case editing of some existing gallery are included pictures already selected. If we create new gallery, we must enter its name /no. 1/. Than we cane define width and height of gallery /no. 2 and 3/ and at last also align of galery in page /no. 4/. We finish creation by submit it with button under gallery and save that informations /no.5/

pic no. 3

cZarte Design » Jquery

My first unobtrusive JavaScript

Tutorial for WP-image-slider