The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML scripting for imagine navigation - Prev Next buttons
amok
post 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>&nbsp;</p></div>

</div>
<div class="img">
<div><img src="3.HTML"><img src="3.jpg"class='img-bot' /><p>&nbsp;</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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
amok
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
amok
post 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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
amok
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
amok
post 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)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
amok
post 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 ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:42 PM