Simple JavaScript Image Gallery

Hello guys, I had to work on a website this weekend and I came up with an issue, I did not have any image JavaScript gallery that would just change the image and have a previous and next button. So I decided to create this. Here is a basic gallery, I have commented the script for easier understanding.

<script>

//Create variables

var i = 0;

var prev;

var next;

var images = new Array;

//Set Image File Name

images = [

“firstimage”,

“secondimage,

“thirdimage”

];

//Go directly to image function

function imgPresent(src){

var change = document.getElementById(???imgBig???);

//Change main picture source and alt fields

change.src =images[src]+???.jpg???;

change.alt = images[src];

}

// link function to switch image backward

function prev(){

if(i==0){

//Set maximum number in array

i = 2;

} else {

i = i-=1;

}

//CHange Main Image

var change = document.getElementById(???imgBig???);

change.src = images[i]+???.jpg???;

change.alt = images[i];

}

// link function to switch image forward

function next(){

//Set Max Number

if(i==2){

i = 0;

} else {

i = i+=1;

}

//Change Main Image

var change = document.getElementById(???imgBig???);

change.src = images[i]+???.jpg???;

change.alt = images[i];

}

</script>

On the direct images links, which can be your thumbnails all you need to do is onclick=???imgPresent(i)???, where var i = the number of the file you want inside the image array created in the script. And for your next button the action would be onclick=???next()???. For the previous button the action would be onclick=???prev()???.

Like always, please feel free to contact me or leave me any comments behind or questions,

Thank You,

Gilberto Cortez

Resize iFrame for 100% Height

Today I was asked to create an iFrame to set up a private reporting system. Well when I tried to make it 100% height, it will only go for about 200px and the rest of the screen will be blank. Well here is the solution for that problem:

<!DOCTYPE html PUBLIC ???-//W3C//DTD XHTML 1.0 Transitional//EN???╬ż???http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd???>

<html xmlns=???http://www.w3.org/1999/xhtml???>

<head>

<meta http-equiv=???Content-Type??? content=???text/html; charset=utf-8??_ />

<title>Reputation Managers Reporting System</title>

<script type=???text/javascript??? language=???javascript???>

function resize(){

var w = screen.width;

var h = window.innerHeight ??? 25;

var repsystem = document.getElementById(???repsystem???);

repsystem.height= h;

}

</script>

</head>

<body onload=???resize()??? onresize=???resize()???>

<table height=???100%??? width=???100%???>

<tr><td>

<iframe src=???iframe.php??? id=???repsystem??? height=???480px??? style=???width:100%; border: 0px solid #ffffff;???>

<p>Your browser does not support iframes.</p>

</iframe>

</td></tr></table>

</body>

</html>

Simple jQuery Slider

There are many jQuery sliders in the internet but many of them are really hard to╬żunderstand. This slider is very basic and very easy to change to your specs. Just change the fade effect to the one of your preference and you are set. You can find more information about the different functions at the jQuery website, they have a lot of helpful information there.

Here is the css that you will need to attach:

#slideshow { position:relative; height:323px; z-index:-9999; max-height:323px; }

#slideshow IMG { position:absolute; top:0; left:0; z-index:8; }

#slideshow IMG.active { z-index:10; }

#slideshow IMG.last-active { z-index:9; }

Here is the code for a simple jQuery slider, add this to a .js file and attach it to the page where you will have your slider. However you have to be sure to attach the main jQuery file before this one. I have created this from scratch and used it in many client websites. All you have to do is to put the images on a div with an id and class of ‘slideshow’.

var mainInterval;

var started = false;

var count = 0;



$(function(){

    $('.slideshow img:gt(0)').hide();



	function init() {

		if ( started == false ) {

			mainInterval = setInterval(function(){

			  $('.slideshow :first-child').fadeOut()

				 .next('img').fadeIn()

				 .end().appendTo('.slideshow');},

			  5000);

		}

	}



	$('#nextSlideShow').click(function() {

		count++;

		clearInterval(mainInterval);

		init();

		$('.slideshow :first-child').fadeOut()

			 .next('img').fadeIn()

			 .end().appendTo('.slideshow');

	});



	$('#backSlideShow').click( function() {

		count--;

		clearInterval(mainInterval);

		init();

		$('.slideshow :first-child').fadeOut()

			.next('img').fadeIn()

			.end().appendTo('.slideshow');

	});



	// Stop The Slide Show

	$('#stopSlideShow').click(function() {

		clearInterval(mainInterval);

		started = false;

	});

	init();

});

Here is a sample of how the HTML will look like:

<div id="slideshow">

     <img src="./images/free-simple-slider.jpg" alt="jQuery Slider First Image" />

     <img src="./images/working-this.jpg" alt="Slider Image 2" />

     <img src="./images/thisWouldBeAnotherImage.jpg" alt="Slider Image 3" />

</div>

You can also add a stop, back and next button if you like just use an id of ‘stopSlideShow’ for the stop button; an if of ‘backSlideShow’ for the back button and an if od ‘nextSlideShow’ for the next button.

I hope that this jQuery slider helps you in your project and please leave me any questions or comments down below and I will be more than happy to answer them!

Simple jQuery Drop Down Menu

There are many jQuery sliders created already. This is the one that I developed from scratch which only has the minimum needed features to work very light and efficiently on any type of web development project. You will need to have the original jQuery script attached to your page before adding this code and make sure to add all the required code.

Here is the jQuery code that is required:

 

$(document).ready(function () {

$(‘#nav li’).hover(

function () {

//show submenu

$(“ul”, this).slideDown(100); },

function () {

//hide submenu

$(“ul”, this).slideUp(100); } );

});

$(document).ready(function() {

$().piroBox_ext({

piro_speed : 700,

bg_alpha : 0.5,

piro_scroll : true

});

});

Here is the CSS code that is required:

/* submenu, it’s hidden by default display:none; */

.nav li ul { display:none; position:absolute; top:68px; left:30px; margin:0 0 0 -1px; list-style:none; background-color:#0CF; -moz-border-radius: 8px; border-radius: 8px; padding-top:8px; padding-bottom:8px; width:200px; opacity:0.96; }

.nav li ul li { padding-bottom:0px; width:170px; float:left; border-top:1px solid #fff; display:block; font-size:15px; margin-top:5px; margin-left:15px; background:none; padding-left:0px; ; }

.nav li ul li a { text-decoration:none; }

.nav li ul li a:hover { color:#FFF; }

#devNav { position:absolute; left:150px;}

Here is the HTML code that is required:

<ul class=”nav” id=”nav”>

<li><a href=”‘mainNav.php”>Main Navigation Item</a>

<ul class=”subnav”>

<li><a href=”‘submenu1.php”>Sub Menu Item 1</a></li>

<li><a href=”submenu2.php”>Sub Menu Item 2</a></li>

</ul>

</li></ul>

I hope that this simple jQuery slider helps you out in any of your project and as always please feel free to leave any comments or questions in the area below.