CODEWITHSUNDEEP
jqueryimagemapswiper.js
Scotsman
Scotsman

Reputation: 177

JQuery Swiper hash page change using image map

I'm trying to use an image map ("hot spots") to change pages on a JQuery Swiper implementation. See the test page at http://www.homeducate.me/takeTheTour.htm It has an image with hotspots which I'd like to be able to click to switch pages directly, while still allowing swipe navigation between pages too!

I'm trying to use the idangerous.swiper.hashnav.min.js plugin which allows the #page to be reported into the URL and a specific #page to be navigated to directly. My hope was that this would also allow me to navigate to specific pages from the image map.

Extract from my code:

<div class="swiper-container">
  <div class="swiper-wrapper">
  <br>
      <map name="FPMap0" id="FPMap0">
        <area href="#slide7" shape="polygon" coords="5, 2, 66, 3, 67, 27, 4, 26" />
        <area href="#slide1" shape="polygon" coords="186, 2, 235, 3, 236, 26, 186, 27" />
        <area href="#slide2" shape="polygon" coords="2, 129, 237, 128, 237, 159, 4, 159" />
        <area href="#slide3" shape="polygon" coords="4, 158, 237, 158, 237, 187, 1, 186" />
        <area href="#slide4" shape="polygon" coords="1, 187, 237, 186, 237, 220, 1, 221" />
        <area href="#slide5" shape="polygon" coords="1, 222, 237, 221, 237, 253, 2, 252" />
        <area href="#slide6" shape="polygon" coords="2, 252, 237, 251, 237, 281, 3, 281" />
      </map>
      <!--Slide 1-->
      <div class="swiper-slide" data-hash="slide1"> 
        <!-- Any HTML content of the 1st slide goes here -->
        <img src="http://www.homeducate.me/images/tour1.jpg" class="imgSizer"  usemap="#FPMap0" />
      </div>

etc.

I've followed the implementation notes carefully but I'm getting an error in the Chrome devtools: 'Uncaught SyntaxError: Unexpected token <' in idangerous.swiper.hashnav.min.js

Can anyone help me find the problem? I'm wracking my brain but cannot spot it. Is there a better way to achieve what I'm trying to do? Any help really appreciated.

Cheers.

Upvotes: 1

Views: 1435

Answers (1)

Scotsman
Scotsman

Reputation: 177

Found the answer.....

Add an onclick to the image map, as follows:

  <map name="FPMap0" id="FPMap0">
    <area onclick="mySwiper.swipeTo(6)" href="#slide7" shape="polygon" coords="5, 2, 66, 3, 67, 27, 4, 26" />

etc.

Then add the following script just before and below the mySwiper script:

$('a[data-slide]').click(function(e){
  e.preventDefault();
  mySwiper.swipeTo(
  $(this).data('slide') );
  })

Works a dream.

Thanks to the similar example/discussion I found on Github.com https://github.com/nolimits4web/Swiper/issues/701

Slides are numbered from 0.

Hope this answer helps someone else in the future.

Cheers.

Upvotes: 1

Related Questions