Search jQuery

jQuery Forum

jQuery Retina Display Plugin not working

in Using jQuery Plugins • 9 years ago

I followed the installation instructions but I am not getting any changes on my IOS simulator or my live device (iphone 4S).

http://troymcilvena.com/post/998277515/jquery-retina

I am actually making a responsive version for mobile here,

My navigation is in a ul, li controlled by css, I don't have an image tags in my html is that why?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="_js/basic-jquery-slider.js"></script>
<script>window.jQuery || document.write('<script src="_js/jquery-1.8.2.min.js"><\/script>')</script>
<script type="text/javascript" src="_js/jquery.retina.js" ></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<link rel="stylesheet" href="../stylesheets/basic-jquery-slider.css">
<link rel="stylesheet" href="../stylesheets/normalize.css">
<link rel="stylesheet" href="../stylesheets/fonts.css">
<link rel="stylesheet" href="../stylesheets/main.css" >
<link rel="stylesheet" href="../stylesheets/iphone.css" />
<script type="text/javascript">
$(document).ready(function() {
// slider
$('#banner').bjqs({
'animation' : 'slide',
'width' : 700,
'height' : 300
});
// jquery-retina display plugin
$('img').retina();
});
</script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<header>
<ul id="mobileTop">
<a name="mobileTopMenu"></a>
<li class="smoothScroll"><a href="#mobile" id="home" class="mobile_nav-nav_sprite" ><em>work</em></a></li>
<li class="smoothScroll"><a href="#mobilefaq" id="faq" class="mobile_nav-nav_sprite"><em>faq</em></a></li>
<li><a href="mailto:barbara_pav@hotmail.com?subject=Speech-Language Inquiry" id="email" class="mobile_nav-nav_sprite "><em>contact</em></a></li>
</ul>
</header>
<div id="wrapper">
<div id="scroll-content">
<section id="mobilehomeContent">
<a name="mobile"></a>
<h2>What is speech therapy?</h2>
<p>
Keytar seitan next level, bushwick mcsweeney's jean shorts quinoa blog aesthetic forage mlkshk +1 keffiyeh lo-fi ethnic. Fanny pack mcsweeney's tattooed, cred wolf food truck lomo trust fund swag fap. Pop-up flexitarian etsy, before they sold out vice beard ennui brooklyn synth sustainable typewriter.
</p>
</section>
<section id="mobilefaqContent" >
<a name="mobilefaq"></a>
<h2>Frequently asked questions?</h2>
<ul class="mobilefaqlist">
<li>When a parent should seek speech therapy?</li>
<li>How do I know if my child has delayed speech language skills?</li>
<li>How do I know if I should look for a speech-language therapist.</li>
<li>Keytar seitan next level, bushwick mcsweeney's jean shorts quinoa?</li>
</ul>
</section>
</div>
</div>
<footer>
<ul id="mobileBottom">
<li><a href="http://www.linkedin.com/pub/barbara-pavicevac/2b/56a/434" target="_blank" id="linkedin" class="mobile_nav-nav_sprite"><em>linkedin</em></a></li>
<li><a href="https://twitter.com/Babspav" target="_blank" id="twitter" class="mobile_nav-nav_sprite"><em>twitter</em></a></li>
<li><a href="http://www.facebook.com/groups/108100642565490/?fref=ts" target="_blank" id="facebook" class="mobile_nav-nav_sprite"><em>facebook</em></a></li>
</ul>
</footer>

Replies(1)

jakecigar

Re: jQuery Retina Display Plugin not working

9 years ago

I read https://github.com/mcilvena/jQuery-Retina-Display-Plugin/blob/master/jquery.retina.js . It works on <img> tags. It also allows the non-retina img to download first. You are better off with using CSS to implement retina images, or a plugin that does not double download (plus ajax).

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

jQuery Retina Display Plugin not working

Replies(1)

Re: jQuery Retina Display Plugin not working

Statistics

Tags

Actions