JavaScript - Changing Picture Script

<script type="text/javascript" src="/jquery.mousewheel-3.0.4.pack.js"></script>

	<script type="text/javascript" src="/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="/jquery.fancybox-1.3.4.css" media="screen" />
<script type = "text/javascript">
function setCookie(isName,isVal) {
    document.cookie = isName + "=" + isVal + ";expires="  + "path=/";
}

function getCookie(isName){
    cookieStr = document.cookie;
    startSlice = cookieStr.indexOf(isName+"=");
    if (startSlice == -1) {return null;}
    endSlice = cookieStr.indexOf(";",startSlice+1);
    if (endSlice == -1){endSlice = cookieStr.length}
    isData = cookieStr.substring(startSlice,endSlice)
    isValue = isData.substring(isData.indexOf("=")+1,isData.length);
    return isValue;
}

$(document).ready(function() {
    if ( getCookie('myCookie') != null ) return; // no light box!
    setCookie('myCookie', 'ANY VALUE'); // for next time
    $("a#onload").fancybox({
		'frameHeight':	390,
		'frameWidth':	640,
		'hideOnContentClick': false,
		'easingIn': 2000
			}).trigger('click'); 
		});
</script>
	
 <div style="display: none;" id="lightbox_content">
 <div id="data"><img alt="lightbox (188K)" src="./images/filecabinet/folder50/lightbox.jpg" height="330" width="650" border="0"/>
 </a>
     </div>
	</div>

     <p>   <a id="onload" href="#data"> </a></p>

  <p>   <a id="onload" href="index.php?module=article&id=206#data"> </a></p>

  // I PASS THE VALUE OF '@' SIGN TO A VARIABLE, LETS TAKE 1 
  var atSignCount = 1;
  var tempArr = new Array();  
  tempArr["3"] = /^\d+\@{numOfAt}\-\d+\@{numOfAt}$/;
  tempArr["4"] = /^\[\d+\@{numOfAt}\-\d+\@{numOfAt}\][b]$/;
  tempArr["5"] = /^\[\d+\@{numOfAt}\-\d+\@{numOfAt}\]$/;
  tempArr["13"] = /^(missing)\d+\@{numOfAt}\-(missing)\d+\@{numOfAt}$/;
  for (offset in objConvert(['3','4','5','13'])) {
    // THIS DOES NOT WORK
    re = tempArr[offset].toString().replace(/numOfAt/g,atSignCount);
    // THIS WORKS
    //re = tempArr[offset].toString();
    $('#selectbox option').each(function(i) {
      text = $.trim($(this).val());
      if (text.match(re)!=null) {
       alert('match found');
      }
    });
  }
  function objConvert(a) {
    var o = {};
    for(var i=0;i<a.length;i++) {
      o[a[i]]='';
    }
    return o;
  }

//<![CDATA[
$(document).ready(function() {

      function initialize() {
        var myLatlng = new google.maps.LatLng(54.2385,-6.9846);
        var myOptions = {
          zoom: 8,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var contentString = '<div id="content">'+
            '<h3><? echo $org_name;?></h3>'+
            '<div>'+
            '<p><a href="#" class="bluelink">Link to profile'+
            '#</a></p>'+
            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 300
        });
        
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: '<? echo $org_name;?>',
            clickable: false,
            icon: 'http://google-maps-icons.googlecode.com/files/school.png'
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

      }

    	// Function added to help reset map and container boundaries
        $("#showMap").click(function() {
        $("#tab2").css({'display':'block'});
        $("#map_canvas").css({'width':'630px', 'height':'400px'});
        initialize();
        //alert('showMap Clicked!');
        });

     initialize(); 

    });

    //<![CDATA[

    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(53.943155, -7.437744),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml3.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

<HTML>

<HEAD>
<TITLE>Cyrus</TITLE>
</HEAD>

<BODY BGCOLOR=black>

<div align="center">
<table border="0"; cellspacing="0"; cellpadding="0">
   <tr>
      <td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername.png"; width=900px; hieght=160px;></td>
   </tr>
   <tr>
      <td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/navbar.png" width=900px; border="none" usemap="#navbar"></td>
   </tr>
   
   <tr>
  
      <td> <br>
   <br>
<table border="0"; width=900px>
   <tr>
      <td>
<div align="left"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png"; width=466px; hieght=320px></div>
</td>
      <td>
      <div align="right"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/equipment.png">
<br><br>
<img src="http://i732.photobucket.com/albums/ww329/Chrishick/personality.png">
</div>
</td>
   </tr>
</table>
</td>
   </tr>
   <tr>
   <td></td>
   </tr>
   <tr>
      <td>
<div align="center"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/brought.png"></div></td>
   </tr>
</table>
</div>

<map name="navbar">
    <area shape="rect" coords="247,185,445,220" href="http://www.roleplayandwritinghaven.com/forum.htm" alt="Forum" />
</map>
</BODY>

</HTML>

<script type="text/javascript">
// Modified for: http://codingforums.com/showthread.php?p=949514#post949514
//			and: http://www.codingforums.com/showthread.php?t=195033

var ImgPtr = -1;	// -1 for first pass only

var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/';
ImgArray = [	// format: ['imageName','Comments about image']
  ['pinto-1.jpg',
   '<a href="paintorpinto.html" class="duh">Paint or Pinto?</a><br /><br /><class="duh">A free report from The Horse Resource answering the common questions about Pintos and Paints.<i>Written by Cassidy Deardorff for The Horse Resource.</i></div>'],
  ['shedding.jpg',
   '<a class="duh" href="sheddingout.html">Shedding Out Tips</a><br /><br /><class="duh">Six tips to help get the winter hair off your horse faster.  <i>Written by Cassidy Deardorff.</i>'],
  ['dewormer-1.jpg',
   '<a class="duh" href="sampledchart.html">Sample Deworming Chart</a><br /><br /><class="duh">Use this sample deworming chart to make sure your horses are getting treated for internal parasites properly.  <i>Written by Cassidy Deardorff.</i>']
// Note: No comma after last entry
];

var intervalAction;

function ShowSlide(slide_num) {
  document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
  document.getElementById('mypic').alt = ImgArray[slide_num][1];
  document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}

function slideshow() {
  ImgPtr++;
  ImgPtr = ImgPtr % ImgArray.length;
//  document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
  ShowSlide(ImgPtr);
}
onload = function() {
  slideshow();
  intervalAction = setInterval("slideshow()",5000);
}
</script>

<div style="height:300px;width:398px;">
<div id="divCaption">
<div style="position:absolute; z-index:30; left:-999;" id="Caption"> </div>
<img src="" alt="" border="1" id="mypic" name="mypic" alt="" height="300" width="398">
</div><br />
</div>

<SCRIPT language="javascript" type="text/javascript">
<!--
function setZoom(img, dir, width, height, margin, zIndex, delay, position)
    {
    window.setTimeout(function(){
        if (img.dir==dir){
            img.style.width    = width;
            img.style.height   = height;
            img.style.margin   = margin;
            img.style.zIndex   = zIndex;
        }
    }, delay);
}

function imgLarger(img) {
    img.dir = "rtl";
    img.style.position = "absolute";

    var width  = 200;
    var height = 150;
    var now    = parseInt(img.style.zIndex);
        if (img.style.left=="" && bChrome==false){
            img.style.left = img.offsetLeft - 50;
            img.style.top  = img.offsetTop;
        }
        if (isNaN(now)) { now=0; }
        for (i=now+1; i<=10; i++) {
            var w = (width * (10+i))/20 + "px";
            var h = (height* (10+i))/20 + "px";
            var m = (-i) + "px 0 0 " + (-width*i/40) + "px";

            setZoom(img, "rtl", w, h, m, i, 20*(i-now));
        }
}

function imgSmaller(img) {
    img.dir = "ltr";
    img.style.position = "absolute";

    var width  = 200;
    var height = 150;
    var now    = parseInt(img.style.zIndex);
        if (isNaN(now)) { now=0; }
        for (i=now-1; i>=0; i--) {
            var w = (width * (10+i))/20 + "px";
            var h = (height* (10+i))/20 + "px";
            var m = (-i) + "px 0 0 " + (-width*i/40) + "px";

            setZoom(img, "ltr", w, h, m, i, 20*(now-i));
        }
}

function openImage(imagePath){
    //Shadow
    var oFade = getObject("DIV", "lightbox_fade");
        oFade.style.display = "block";
        oFade.style.height  = document.body.scrollHeight;

    //Embed it
    var oContent = getObject("DIV", "lightbox_content");
        oContent.style.width   = 512;
        oContent.style.height  = 384;
        oContent.style.top     = (screen.height-384)/2 + (document.body.scrollTop - 100);
        oContent.style.left    = (screen.width -512)/2;
        oContent.style.display = "block";

        oContent.innerHTML = "<CENTER><IMG src=" + imagePath + "></CENTER>";
}

function closeImage(){
    //Shadow
    var oFade = getObject("DIV", "lightbox_fade");
        oFade.style.display = "none";

    //Embed it
    var oContent = getObject("DIV", "lightbox_content");
        oContent.style.display = "none";
}
// -->
</SCRIPT>

<DIV id="lightbox_fade" class="overlay" onClick="JavaScript:closeImage();"></DIV>
<DIV id="lightbox_content" class="content" onClick="JavaScript:closeImage();"></DIV>

<a href="JavaScript:openImage('picture/large.png');">
<IMG src="picture/small.png" alt="" width="212" height="157" border="0" onmouseover="JavaScript:imgLarger(this)" onmouseout="JavaScript:imgSmaller(this);"></a>

<a onclick="javascript:previousEvent();">
                        <input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a>
                        <a onclick="javascript:nextEvent();">
                        <input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a>

function nextEvent(i) {
        if (index == maxIndex || index >= maxIndex) {
            //disable next button
            tempObj = document.getElementsByName("next");
            tempObj.visible = false;
        }
        else {
        index = index + 1;
        eventSelected(rawDates[index]);

        }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
.li_title {            list-style-type:none;

                       font-size:12px;
                       line-height:24px;
                       
                       }
.date {float:right;margin-right:3px;}


  </style>
</HEAD>

<BODY>
  <DIV id=Conttab_p_switch1 style="POSITION: relative">
            <UL>
                     <LI class="li_title"><span class="date">2011-04-22</span><A title=meeting（4-22） href="#" rel="nofollow" target=_blank>meeting（4-22）</A></LI> 
                     <LI class="li_title"><span class="date">2011-04-11</span><A title=meeting（4-11） href="#" rel="nofollow" target=_blank>meeting（4-11）</A></LI> 
                     <LI class="li_title"><span class="date">2011-04-04</span><A title=meeting（4-04） href="#" rel="nofollow" target=_blank>meeting（4-04）</A></LI> 
                                                          
             </UL>
      </DIV>
</BODY>
</HTML>