4 replies to this topic

[Deretto]

So basically I'm making a website for my friend to host his webcomic on. I've got the layout done already as I'm knowledgeable in HTLM and CSS but not javascript.

What I need is a simple code that'll change the image on the page with First, Previous, Next, and Last buttons. I don't know how long this webcomic will go on for so I'd rather use a simple code to change the image rather then make a whole page for every update. With that said, a function that takes in the visitors last viewed image so that when they revist the site the see that same image would be nice.

I've tried googling this and the best I can come across or scripts for slideshows which require a lot of preloading. I don't understand javascript much but I want to learn! So if the person that posts the codes can kindly explain it to me it'd be much appreciated.

[truefusion]

First, be sure you have defined an element that can be retrieved easily by JavaScript (HTML):

<img src="" alt="" id="my_image_container"/>

Secondly, make an array filled with the paths to all of your images (JavaScript):

var images = ["path/1.jpg", "path/2.jpg"];

This is the easiest way to do what you want without any server side scripting involved, and so AJAX won't be required. The goal here is to traverse the array whenever the user clicks "next" or "previous." To help make this possible, we'll declare a variable that'll keep track of the current index. We'll give it a default value of 0 since arrays start at 0:

var index = 0;

Now we'll work on the "next" function (JavaScript):

function nextImage()
	{
		++index;
		if (index < images.length)
			document.getElementyById('my_image_container').setAttribute('src', images[index]);
		else
		{
			index = -1;
			nextImage();
		}
	}

What this code does is it first increments the index variable, implicitly adding 1 to the number that it holds. It then checks to see if the index is out of bounds; if it isn't, it'll move on to the next image; if it is, it'll reset the index variable to a value suitable for calling nextImage() again.

Next we'll start on the "previous" function (JavaScript):

function previousImage()
	{
		--index;
		if (index > -1)
			document.getElementById('my_image_container').setAttribute('src', images[index]);
		else
		{
			index = images.length;
			previousImage();
		}
	}

This function does pretty much the same thing as nextImage(), only with a few things reversed.

Now you just have your buttons set up (HTML):

<a href="javascript: previousImage();">Previous</a>
<a href="javascript: nextImage();">Next</a>

The entire code, therefore, should look something like this:

<script>
var images = ["path/1.jpg", "path/2.jpg"];
var index = 0;

function nextImage()
	{
		++index;
		if (index < images.length)
			document.getElementyById('my_image_container').setAttribute('src', images[index]);
		else
		{
			index = -1;
			nextImage();
		}
	}

function previousImage()
	{
		--index;
		if (index > -1)
			document.getElementById('my_image_container').setAttribute('src', images[index]);
		else
		{
			index = images.length;
			previousImage();
		}
	}
</script>

<img src="" alt="" id="my_image_container"/>
<a href="javascript: previousImage();">Previous</a>
<a href="javascript: nextImage();">Next</a>

As a training exercise, i'll leave you to do the lastImage() and firstImage() functions.

[Deretto]

Ok, I got that to work. Code ended up looking like this

function nextImage()
        {
                ++index;
                if (index < images.length)
                {
			document.getElementById("my_image_container").setAttribute("src", images[index]);

		}
		
                else
                {
                        index = (images.length - 1);
                        nextImage();
                }
        }

function previousImage()
        {
                --index;
                if (index > -1)
                {
			document.getElementById("my_image_container").setAttribute("src", images[index]);
		
		}
                else
                {
                        index = 1;
                        previousImage();
                }
        }

function firstImage()
	{
		index = 0;
		document.getElementById("my_image_container").setAttribute("src", images[index]);
	}

function lastImage()
	{
		index = (images.length - 1);
		document.getElementById("my_image_container").setAttribute("src", images[index]);
	}

But now I've run into another problem. I'm trying to make Text on the page change along with the image (the text goes along with the image.) I've tried using the above code and I couldn't figure it out. If I can use external text files then great! If not then I don't mind using an array of strings either. Just if someone could help me with this too. >.<;;;

Edited by Deretto, 10 August 2010 - 03:43 AM.

[Shahrukh]

Making a site from scratch is great. However, it can be quite cumbersome and be open to many security threats.
Therefore, I would suggest you use ComicPress. Its a plugin for WordPress that converts a WordPress installation to a comic strip site.
Even if you decide not to use it, do give it a try. You can even learn from its code.

Link: http://comicpress.org/

[truefusion]

Deretto, on 10 August 2010 - 03:42 AM, said:

But now I've run into another problem. I'm trying to make Text on the page change along with the image (the text goes along with the image.) I've tried using the above code and I couldn't figure it out. If I can use external text files then great! If not then I don't mind using an array of strings either. Just if someone could help me with this too. >.<;;;

The best method for replacing the contents of an element may be innerHTML. You can find an example on how to use it here: http://javascript.ab...ary/bldom06.htm