'+img_name+'<\/title><\/head>'); popup.document.write('<body style="margin: 0;padding: 0; position: relative;">'); popup.document.write('<a href="javascript:window.close();" style="margin: 0 ;border: none; padding: 0;"><img style="margin: 0;border: 10px solid #eeeeee;padding: 0;" src=' + img_src + ' /></a>'); popup.document.write('<br /><div style="position: absolute; top:10; left: 10; background-color: #ffffff; filter:alpha(opacity=75); opacity:.75; width: '+img_w_o+'; padding: 5px 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;"><p style="margin: 0 5px; padding: 0;">'+img_name+'<\/p><\/div>'); popup.document.write('<\/body><\/html>'); // popup.document.focus(); popup.document.close(); } $(document).ready(function() { // Set Default State of each portfolio piece $(".main_topic_navigator").show(); $(".main_topic_navigator a:first").addClass("active"); // Get size of images, how many there are, then determin the size of the // image reel. var imageWidth = $(".main_topic_window").width(); var imageSum = $(".main_topic_img img").size(); var imageReelWidth = imageWidth * imageSum; // Adjust the image reel to its new size $(".main_topic_img").css( { 'width' : imageReelWidth }); // main_topic_navigator + Slider Function rotate = function() { var triggerID = $active.attr("rel") - 1; // Get number of times // to slide var image_reelPosition = triggerID * imageWidth; // Determines // the distance // the image // reel needs to // slide $(".main_topic_navigator a").removeClass('active'); // Remove all // active class $active.addClass('active'); // Add active class (the $active is // declared in the rotateSwitch // function) // Slider Animation $(".main_topic_img").animate( { left : -image_reelPosition }, 500); }; // Rotation + Timing Event rotateSwitch = function() { play = setInterval(function() { // Set timer - this will repeat itself every 3 seconds $active = $('.main_topic_navigator a.active').next(); if ($active.length === 0) { // If main_topic_navigator reaches the end... $active = $('.main_topic_navigator a:first'); // go // back // to // first } rotate(); // Trigger the main_topic_navigator and // slider function }, 5000); // Timer speed in milliseconds }; rotateSwitch(); // Run function on launch // On Hover $(".main_topic_img a").hover(function() { clearInterval(play); // Stop the rotation }, function() { rotateSwitch(); // Resume rotation }); // On Click $(".main_topic_navigator a").click(function() { $active = $(this); // Activate the clicked main_topic_navigator // Reset Timer clearInterval(play); // Stop the rotation rotate(); // Trigger rotation immediately rotateSwitch(); // Resume rotation return false; // Prevent browser jump to link anchor }); });