Justin's Soap Box http://jlinkpro.com Exploding brains. Sat, 13 Aug 2011 08:28:09 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 I’m not sure http://jlinkpro.com/20/life/im-not-sure http://jlinkpro.com/20/life/im-not-sure#comments Sat, 13 Aug 2011 08:28:03 +0000 Juice http://jlinkpro.com/?p=20 I /joined #life and nobody was there, and somehow I think that’s ironic.

What is my life? I feel lost and yet I feel at home in my self, so small, and yet accomplished of so much. I cannot fathom the luck that has been granted to me, the simple fortune of existence. I know I am fragile, but these bones feel invincible, and though I am sure of nothing of at all, I know there is a truth to it all. What it is, how it is, I’m not sure, but I’m willing to abandon it all for it.

]]> http://jlinkpro.com/20/life/im-not-sure/feed 1 Simple JQuery Framed Slideshow http://jlinkpro.com/8/code/simple-frame-slideshow http://jlinkpro.com/8/code/simple-frame-slideshow#comments Fri, 12 Aug 2011 19:08:43 +0000 Juice http://jlinkpro.com/?p=8 Here is a simple javascript/jquery slideshow that uses z-indexing in the CSS to create a frame. It also pulls links off of the link= property of the slideshow image elements (<img link=http://whatever.com src=whatever>) and dynamically sets the slideshow’s link to that link.

Download

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Slideshow in a frame - JQuery</title>
  <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">You need JQuery</script>
  <style type="text/css">
    body {
      padding: 0px;
      margin: 0px;
    }
    #ss_wrapper {
      position: absolute;
      display: block;
      left: 200px;
      top: 150px;
      border: 0px;
      padding: 0px;
      margin: 0px;
      width: 400px;
      height: 300px;
      z-index: 30;
    }
    #ss_wrapper #ss_container {
      position: relative;
      display: block;
      left: 0px;
      top: 0px;
      border: 0px;
      margin: 0px;
      padding: 0px;
      width: 400px;
      height: 300px;
      z-index: 25;
    }
    #ss_wrapper #ss_container #ss_frame_img {
      position: relative;
      display: block;
      left: 0px;
      top: 0px;
      border: 0px;
      margin: 0px;
      padding: 0px;
      z-index: 20;
    }
    #ss_wrapper #ss_container #ss_gallery {
      position: absolute;
      display: block;
      left: 40px;
      top: 40px;
      border: 0px;
      margin: 0px;
      padding: 0px;
      width: 320px;
      height: 220px;
      z-index: 15;
    }
    #ss_wrapper #ss_container #ss_gallery img {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      border: 0px;
      margin: 0px;
      padding: 0px;
      z-index: 10;
    }
  </style>
</head>
<body>
  <div id="ss_wrapper">
    <div id="ss_container">
      <a href="#" id="ss_link"><img src='./frame.png' id='ss_frame_img' /></a>
      <div id="ss_gallery">
        <img src="./frame1.png" link="http://jlinkpro.com" />
        <img src="./frame2.png" link="http://google.com" />
        <img src="./frame3.png" link="http://facebook.com" />
        <img src="./frame4.png" link="http://jquery.com/" />
        <img src="./frame5.png" link="http://hotmail.com" />
        <img src="./frame6.png" link="http://youtube.com" />
        <img src="./frame7.png" link="http://questionablecontent.com" />
        <img src="./frame8.png" link="http://sinfest.net" />
        <img src="./frame9.png" link="http://evolve-systems.com" />
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function() 
    {
      var __INDEX__ = 0;  //setting our index. USED AS A GLOBAL (ugh)
      var __IMAGES__ = $("#ss_gallery img"); //getting our list of images. USED AS GLOBAL (ugh)
      for (i=0; i<__IMAGES__.length; i++) //looping through said list
      {
        $(__IMAGES__[i]).addClass("image-"+i); //assigning a class in the form of image-#
      }
      
      show(__INDEX__); //show the first element in the list, which is index 0 of the array.
      setInterval(sift, 1000); //execute sift in 1000 ms.
      
      function sift() //this moves to the next image and shows it. Really, all it's doing is pushing globals around.
      {
        if (__INDEX__<(__IMAGES__.length-1)) { __INDEX__++; }  //if index is less than the count of items in images array, increase it by 1 (goto next image)
        else {__INDEX__=0;} //Otherwise, set index to 0 (go back to first image.)
        show (__INDEX__); //show the index image (show current image)
      }
      
      function show(num)
      {
        var inum = $(".image-"+num); //Get the element that has a class of image-# where # is the index (current image)
        $(__IMAGES__).fadeOut(500); //fade out all the images in the image container (over 500 ms)
        inum.stop().fadeIn(500); //stop the fade out for the current image, and fade it in (over 500 ms)
        $("#ss_link").attr("href", inum.attr("link")); //get the anchor element that is the link, and set it's href to the link in the image.
      }
    });
  </script>
</body>
</html>
]]> http://jlinkpro.com/8/code/simple-frame-slideshow/feed 1