Guimkie » jQuery http://guimkie.com Tutorials and great Mac software! Sun, 04 Dec 2011 21:05:22 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 FancyBox – A Good Mixture… http://guimkie.com/iweb/fancybox-a-good-mixture/ http://guimkie.com/iweb/fancybox-a-good-mixture/#comments Tue, 04 Mar 2008 14:37:38 +0000 Max (from Guimkie) http://guimkie.com/iweb/fancybox-a-good-mixture/ While I was working with a friend on the old-school iWeb application, he asked me for a good effect to enlarge images. Making images open in a new window really sucks. So, what you do is you look into the jQuery library for a script that would provide what you want. Didn’t take long and the outcome was FancyBox. FancyBox, by me, is made up of three things. jQuery, Lightbox and FancyZoom. Since it is a mixture of all of them, I called it FancyBox.

Now what is FancyBox? It is a jQuery based script that will make thumbnailed images zoom up and enlarge. Best way to understand what I am talking about is to look at the demo.

You can take a look at this awesome thing in a demo page I made in iWeb:

http://guimkie.com/fancybox-beta/

Please only view this in FireFox and Safari on a Mac. These are the only things with which I have tested it. Camino fails completely. :-D

I’ll open up the scripts as soon as I get it to work properly. That means I will have a pack for those who enjoy coding themselves and then I will have it integrated right into the next major update on iTweak! Yep – the next major update for iTweak, not the 1.2 version. You’ll see this stuff coming soon.

The more you nag me, the higher the chance I get this stuff done. I am kind of a person who always shifts things to the last minute, so tell me to be faster. :-D

]]> http://guimkie.com/iweb/fancybox-a-good-mixture/feed/ 19 Beam Me Up Scotty! http://guimkie.com/wordpress/beam-me-up-scotty/ http://guimkie.com/wordpress/beam-me-up-scotty/#comments Sun, 27 Jan 2008 18:14:28 +0000 Max (from Guimkie) http://guimkie.com/wordpress/beam-me-up-scotty/ Recently I have discovered this effects library called jQuery. It allows you to call advanced functions from the jQuery scripts without much coding that you write yourself.

If you really want to see what these scripts can do, then check out the jQuery demos.

Since this is such a great library, I thought I’d do a collection of tutorials showing all sorts of nice things. Today we are going to look at how to create a jQuery script to dynamically scroll the window back to the top if a link is clicked. This can also be used for anchors of any kind. It just makes this “in-page” linking much more attractive.

Not sure what I’m talking about it? Click here.

Note: Apparently the link only works perfectly if you are on a page where there is not ability to post a comment. I haven’t fixed this issue yet – but I will soon do so!

I will focus on adding this to Wordpress but the method can also be applied for anything else.

We’ll start on the next page.

If you want to use some sample HTML files using this script, then you can download my sample project here.

  1. First thing is to create a standard link in the location you want. Define the href to go to an anchor. Just using # will go to the top in most cases – but defining the specific position is better. Do not forget to give the link a unique ID!
    You will also have to create your position to where the anchor link should lead. You can use anything you want, a table, a div or just a paragraph as long as you add the name tag to it.
    Now, let’s do some examples:

    This code will make your page scroll back to the top:

    <div>Header</div>
    ...
    <a href="#" id="beam-me-up">Beam Me Up Scotty</a>

    For a link going to any other position in your HTML code could look like this:

    <p name="comments>My Commments</p>
    ...
    <a href="#comments" id="beam-to-comments">Beam To Comments</a>

    Notice that the name tag represents the value in the href tag in the link! The only difference is the # in front! Do not delete it.
    This is just the standard linking for anchors.

  2. Now test the code that you have added. They should just be some plain anchors jumping from one spot to another.
    If it works, then you need to download the latest jQuery set. Download the minimized script, the packed script and the normal script. I am using 1.2.2 for this tutorial.
  3. Now upload the three scripts to your server and connect them with your files. For Wordpress, you open the header.php file of your Wordpress theme. In the <head> section you will have to add this:


    <script src="path/to/jquery-files.js" type="text/javascript"></script>

    Do this for each of the three scripts. Make sure you use the names correctly.

  4. Now you will have to create a Javascript file yourself. It sounds hard – but it is not! You will just use some finished codes. So as said, open any Text Editor and create a file named custom.js. Make sure you have the ending .js. Then, in the file, copy the following contents:


    $(document).ready(function() {

    // Beam Me Up Scotty
    // Created using the Guimkie (www.guimkie.com) Tutorial.
    // Thanks to the Learning jQuery (www.learningjquery.com) Tutorial.
    // Please do not delete this note!

    $('#LINK-ID').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target
    || $('[name=' + this.hash.slice(1) +']');
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $('html,body')
    .animate({scrollTop: targetOffset}, 'SPEED-VALUE');
    return false;
    }
    }
    });

    });

  5. In the code above, you need to change two things. First, look for LINK-ID. Change it to the ID name you gave the link in step one!
    Now look for SPEED-VALUE and change it to either slow, fast or a time specified in seconds.
    Then save the file and upload it to the other jQuery files on your server. Make sure you also link it to your file! I.e.:

    <script src="path/to/custom.js" type="text/javascript"></script>

  6. This is it! Save your files and test it! Now let your visitors enjoy great effects while clicking boring links on your site!
    Again, if you need help or it did not work, download the sample files and see if you get it to work that way!

    7. I will be releasing more jQuery tutorials and I am already working on a plugin for Wordpress that will … (not telling).

    Thanks to Learning jQuery for teaching me how to do this!

    ]]> http://guimkie.com/wordpress/beam-me-up-scotty/feed/ 1