We have answer of your question!

100% solved queries, no empty question

0

Advertisement


I've got a beautiful responsive gallery up and running, with the prettyPhoto plugin for easier viewing of the images. This ofcourse 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. (Wich 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>

Wich doesn't seem to work. Any ideas?

Question author Jefferson | Source

Answer


1


Advertisement


You could just use .unwrap() jquery method:

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

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

Advertisement


Tickanswer.com is providing the only single recommended solution of the question Disable li anchors mobile under the categories i.e javascript , jquery , html , responsive-design , . Our team of experts filter the best solution for you.

Related Search Queries:

You may also add your answer!