0

<ul class="slides">
 <div class="page-header" id="page-header">
 
 <!--Begin slide 1 -->
 
    <input type="radio" name="radio-btn" id="img-1" checked />

    <li class="slide-container">

  <div class="slide">
   <video id="video1" width="100%" autoplay loop muted >
   <source src="files/video/1.webm" type="video/webm">     
    </video>
        </div>

  <div class="nav">
  
   <label for="img-10" class="prev" onclick="setTimeout(jump, 6000);"></label>
   <label for="img-2"  class="next" onclick="setTimeout(jump2, 6000);" ></label>

  </div>

    </li>
<!-- End slide 1 -->
 
 
 <!--Begin slide 2 --> 
    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
<div class="video-container">

        <div class="slide">
  <video id="video2" width="100%"   muted >
          <source src="files/video/2.webm" type="video/webm"> 
    </video>
    </div>
    </div>

  <div class="nav">
   <label for="img-1" class="prev"  onclick="setTimeout(jump3, 6000);"></label>
   <label for="img-3" class="next"  onclick="setTimeout(jump4, 6000);"></label>

  </div>  
    </li>
 <!--End slide 2 -->
 
 <!--Begin slide 3 -->
    <input type="radio" name="radio-btn" id="img-3" />

    <li class="slide-container">
<div class="video-container">
        <div class="slide">
  
  <video id="video3" width="100%" >
          <source src="files/video/3.webm" type="video/webm"> 
    </video>
    </div>
        </div>
  <div class="nav">
   <label for="img-2" class="prev" onclick="setTimeout(jump5, 6000);"></label>
   <label for="img-4" class="next" onclick="setTimeout(jump6, 6000);"></label>
  </div>
    </li>
 <!--End slide 3 -->

</div>
</ul>

I'm using an image gallery HTML code that gives each image slide an id. I'd like to make a javascript function to jump to a specific slide when a button is clicked on a slide. I know that window.location.href is used to redirect to different pages, but is there a way to redirect to an id of something that is on the page?

user2454060
  • 91
  • 1
  • 10

3 Answers3

1

You can add a hash before the id of an element in your page to redirect to it:

<a href="#foo"></a>

This also works in Javascript:

window.location.href = '#foo'
Camille Wintz
  • 951
  • 7
  • 8
  • The image gallery code im using uses labels to navigate like this: "img-1" is set as the id of the slide like this: Changing the URL id doesnt go to it, any idea how to make it work in this situation? I cant figure out how to convert the "label for" code into a javascript function – user2454060 Aug 31 '17 at 23:55
0

Other posters noting that this is a possible duplicate is correct, but to make the answer more specific you'll want to use anchor tags within a page.

Background reading on anchor tags within a page: http://www.echoecho.com/htmllinks08.htm http://help.typepad.com/anchor-tags.html

So in your case specifically your image markup will look something like

<a name="#img-1"></a>
<img src="..."/>

Then use window.location.href to navigate.

window.location.href = '#img-1';

Per your response you seem to have label tags that will kick off this interaction and you may be able to handle this with an onClick handler:

<label for="img-1" class="prev" onclick="window.location.href='#img-1'"></label>

If it's not the label tag but actually the radio button you mentioned that causes the navigation, you will need to write a slightly more complex function that evaluates if the button is checked or not -- examples using jquery can be found here and in your case you'd just modify the alert call to be the window.location.href navigation: jquery radio button when checked need an alert

quetzaluz
  • 1,071
  • 12
  • 17
  • The image gallery code im using uses labels to navigate like this: "img-1" is set as the id of the slide like this: Changing the URL id doesnt go to it, any idea how to make it work in this situation? I cant figure out how to convert the "label for" code into a javascript function – user2454060 Sep 01 '17 at 00:24
0

Just use the location.hash property to set the anchor part of the URL.

Let's asume the URL is 'www.abc.com'

location.hash = "anId";

... will set the URL to 'www.abc.com#anId'

If there is an id "anId" on the page the browser will automatically jump to it.

andiluk
  • 46
  • 5
  • The image gallery code im using uses labels to navigate like this: "img-1" is set as the id of the slide like this: Changing the URL id doesnt go to it, any idea how to make it work in this situation? I cant figure out how to convert the "label for" code into a javascript function – user2454060 Aug 31 '17 at 23:51
  • Setting the for attribute of the label tag to an id of a input element just binds the label to the input element (see https://www.w3schools.com/tags/tag_label.asp for more info). If you want to jump to an image you will have to set the URL's anchor part to the actual id of the image (not the input). So in your JavaScript you will have to bind an event handler on the (onchange event of the) input element and then set the URL. If this doesn't help you, maybe add your HTML to the question so I can better see what you want to do... – andiluk Sep 01 '17 at 09:41
  • I've added the HTML code. The function im trying to make is the 'SetTimeout (jump, 6000)' for the onclick in the navigation. The purpose of it is so that when the user clicks "prev" or "next" they are directed to the next slide, but after 6 seconds they are sent to a different slide. – user2454060 Sep 01 '17 at 22:15