CODEWITHSUNDEEP
javascriptjqueryhtmlresponsive-design
Jefferson
Jefferson

Reputation: 993

Disable li anchors mobile

I've got a beautiful responsive gallery up and running, with the prettyPhoto plugin for easier viewing of the images. This of course works brilliantly on desktop/laptop computers, but is absolutely horrible on mobile. (longer load time, images that don't fit the screen because of predetermined CSS etc.)

I could just tell the browser not to load the prettyPhoto.js on mobile, but then the thumbnail anchors would still link to the full size images. (Which I don't want! The thumbnails are big enough for mobile, no need for the full size image.)

There must be some kind of jQuery or JavaScript solution for this. I am not sure what the best approach to take is and was hoping someone could provide some insight to a solution to this issue.

HTML:

<ul id="portfolio">
  <section id="photos">
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
  </section>
</ul>

EDIT:

What I've got so far is:

<script>
if ( $(window).width() < 767) {
   $('#portfolio img').unwrap();
)};
</script>

Which doesn't seem to work. Any ideas?

Upvotes: 0

Views: 126

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You could just use .unwrap() jquery method:

http://jsfiddle.net/fm9Un/1/

$(function(){ //DOM ready
    if($(window).width() < 767)
         $('#portfolio img').unwrap();
});

Upvotes: 2

Related Questions