HTML scripting for imagine navigation - Prev Next buttons |
HTML scripting for imagine navigation - Prev Next buttons |
amok |
Mar 28 2012, 07:36 AM
Post
#1
|
Group: Members Posts: 6 Joined: 28-March 12 Member No.: 16,810 |
I've tried endless variations with no success.
What I'm trying to do is create a navigating <Prev next> for 15 images using HTML only ! no css or javascript. Here are 2 different versions 1: this scrip causes 2 versions of 1.jpg and 2 of 2.jpg all on the same html page the prev next navigation does not work. </head> <body> </div> </div> <div id='content'> <div class='container'> <!-- text and image --> <div id='img-container'> <p class='nav'><a id='prev' href='#'>Prev</a> | <a id='next' href='#'>Next</a> <span id='num'></span></p><div id='s1' class='pics'> <div class="img"> <div><img src="2.HTML"><img src="2.jpg"class='img-bot' /><p> </p></div> </div> <div class="img"> <div><img src="3.HTML"><img src="3.jpg"class='img-bot' /><p> </p></ </div> </body> 2: This version cause the prev next button to send the page up the scroller(which i don't want) and only 1 of each picture..... it also has lots of Ê characters turing up. I'm doing something very wrong. Note I'm trying to keep script as simple as possible! Thanks for reading Any scripting ideas that actually work, would be appreciated. A. |
amok |
Mar 28 2012, 07:38 AM
Post
#2
|
Group: Members Posts: 6 Joined: 28-March 12 Member No.: 16,810 |
Heres version 2
</head> <body> </div> <div class='container'> <div id="img-container"> <div class="section" id="section1"> <img src="images/1.jpg" /> <img src='1.jpg'vclass='img-bot' /></p> <span id='num'></span></p><div id='s1' class='img'> </div> <div class="section" id="section2"> <img src="images/2.jpg" /> <img src='2.jpg'vclass='img-bot' /></p> <span id='num'></span></p><div id='s2' class='img'> </div> <div class="section" id="section3"> <img src="images/3.jpg" /> <img src='3.jpg'vclass='img-bot' /></p> <span id='num'></span></p><div id='s1' class='img'> </div> <a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a> </div> |
pandy |
Mar 28 2012, 08:13 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
If you don't use CSS or JS, why do you have IDs and classes?
Can you show us the whole thing? The HTML alone creates no scroller and it helps to see the page with images and all. |
amok |
Mar 28 2012, 08:27 AM
Post
#4
|
Group: Members Posts: 6 Joined: 28-March 12 Member No.: 16,810 |
I'm new to html scripting.... designing my first website.
Is it possible to create a page with a navigation Next / Previous buttons without CSS? using the first code the page appears as white browser page with 1.jpg next another 1.Jjpg so top of page is Previous | Next (buttons) 11 (2 of the same images) 22 (2 of the same images) 33 (2 of the same images) etc..... so the buttons remain useless, as it remains the same. |
pandy |
Mar 28 2012, 08:54 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You can create one page for each image and link the next button on each page to the next page.
|
amok |
Mar 28 2012, 09:46 AM
Post
#6
|
Group: Members Posts: 6 Joined: 28-March 12 Member No.: 16,810 |
random google in search of navigation i want.....
http:// hopkinsoncundy.com/artist/?artist=Nick+Austin&work or http://www .davidstraight.net/still-here-07.html The file attachment is a Safari screen shot of a mock example of what the the first scripting looks like. still if this can be done in using just HTML.... that be nice |
amok |
Mar 28 2012, 09:53 AM
Post
#7
|
Group: Members Posts: 6 Joined: 28-March 12 Member No.: 16,810 |
Heres Screenshot attachment
Attached thumbnail(s) |
Darin McGrew |
Mar 28 2012, 12:44 PM
Post
#8
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Here's an example of an HTML-based photo gallery page:
http://www.rahul.net/mcgrew/derby/photos/food2000301.html There is no JavaScript. There is CSS, but the page also works with CSS disabled. And instead of a single "next" button and a single "prev" button, there are linked thumbnails of the next two photos and the previous two photos. But the basic mechanism is there. Each page shows one photo, and has links to other pages that show other photos. |
amok |
Mar 28 2012, 03:14 PM
Post
#9
|
Group: Members Posts: 6 Joined: 28-March 12 Member No.: 16,810 |
Thanks for the suggestion Darin, interesting idea.
I am quite certain that I want navigation like the links I posted in above message. The reason I hoping to do it in HTML was to have a script thats easy to change, once I want to make changes to the site down the road. So knowing now that I need to use CSS and possibly javascript, what would you suggest changing in script ? or do I need to start entirely anew with scripting ? |
Lo-Fi Version | Time is now: 28th March 2024 - 08:42 PM |