Creating a javascript manga reader

Im currently working with a friend who wants to create a mangareader for his website. I'm looking into javascript as the most efficient method although i dont have a clue how to do this

What i'm trying to do is allow the user to read without having to reload the page, just the image. I can easily make it change the image on click, but i need some help on how i can make the image number incriment by 1 each time

The file names will be in this format
Episodeid - page
e.g
1-1
1-2
1-3
for the first 3 pages of the first episode.
All files will be of the same type, most likely JPG or PNG

any help will be appreciated!

you just need a counter variable that increases each time you click a "next" button. however, something you'll have to consider is whether or not every "episode" has the same length of pages or not (but this is really only assuming that you want to be able to allow continuous reading from episode to episode without making the user change which episode they're reading.

anyhow, my first impression would be that if you just want to read episode by episode, you should have a database storing the number of pages in each episode (this is only assuming that the number of pages varies). then, you'll need to use a server-side language to let your javascript know that that is the total number of pages. all you need after that is a variable keeping track of which page you're on to figure out which image to display, and which buttons (next/previous) to display.

there are a few image gallery javascript libraries that do most of what you want already, so you may want to look into something like that (google "javascript carousel" or "javascript image gallery"), but if you would rather create something yourself then I'm sure I or someone else on this forum might be able to help you out.

if you provide some more detail to some of the things I was unsure about above, I'm sure it could be much easier to get started!

the simplest way is to number your images, that way you don't need to use an array. Example: image0.jpg, image1.jpg, etc. Then do something like this:

var path="http://www.pathToImageFolder";


function loadImage(){

for(i=0; i < imagesNum; i++);
document.getElementById('mainImage').src=path+'img' + i +'.jpg';
}

Where imagesNum is the total number you have, then you just call it on click

im currently building it on dreamweaver and im probs gonna make it so that you can use some of the javascript form tools to choose the chapter they want to use. This should make things a bit easier

how would i integrate this into the HTML? just change the name of MainImage?

Change the src attribute of MainImage...

Code:

---

function choosePage(pageNum){
  document.getElementById('mainImage').src = path+pageNum+'.jpg';
}

---

This would be assuming that "path" is a globally defined variable, and that the value you pass to the function is in the form of "1-1" or "1-2" or "1-3", etc.

You would also want to put in some code to update your page counter to the appropriate number. If you'd like more thorough assistance, please post your code-in-progress.

I'm currently using some string manipulation techniques to get the previous page. I've decided to save the images in the format 'location/chapter!pagenumber.jpg' so i can split the text along the !

im not sure this will work tho, could you tell me if i've made any mistakes?

Code:

---

var path="Media/pages";

function findCurrentPage()
{
        var currentImg = document.getElementById('mainImage').scr;
        var pageNum = currentImg.split("!");
        var comparingText;
                for (i=0;i<=20;i++)
                {
                        comparingText = i + ".jpg"
                        if (pageNum[1] == comparingText)
                        {
                                choosePage(i);
                        }
                }
}

function choosePage(pageNum)
{
        document.getElementById('mainImage').src = path+pageNum+'.jpg';
}

---

you have a typo for "src" in the findCurrentPage() function when you're defining currentImg.

and, uh, if pageNum[1] is just equal to a number with .jpg appended, you could just use JavaScript's parseInt() function to get the number, and then increment it instead of the mess you're doing.

Code:

---

var myNumber = parseInt(pageNum[1]); //should return your page number
myNumber++;

---

the reason i have the method i used is so i can make it so you can browse by chapter as well as page - thanks for the tip tho!

and for the typo, will that return me the filename?

it should return whatever is in the src attribute of #mainImage. if you don't know what it's returning:

Code:

---

alert(currentImg);

---

the point I was trying to make about parseInt() is that you're looping through 21 times just to find out if a string matches. you could just get the value of i by calling parseInt() on pageNum[1].

so how do i connect this to the button i have on my page?

um, if you mean how you change the image, you can use your function.

HTML Code:

---

<a href="javascript:findCurrentPage(); return false">Next</a>

---

you'd have to increment the number in your function (like I showed in my earlier post) for this to work, though.