snipt

Ctrl+h for KB shortcuts

JavaScript

Test if href points image

1
2
3
4
if($(this).attr('href').indexOf('.jpg') > 0) // or any other extension
{
    //do what you want
}
https://snipt.net/embed/6b6e76de0f8d48d7e980f025b5f0f153/
https://snipt.net/raw/6b6e76de0f8d48d7e980f025b5f0f153/
6b6e76de0f8d48d7e980f025b5f0f153
js
JavaScript
4
2016-09-29T18:17:09
True
False
False
Mar 17, 2014 at 01:11 PM
/api/public/snipt/122560/
test-if-href-points-image
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;href&#39;</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">&#39;.jpg&#39;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="c1">// or any other extension</span> </span><span id="L-2"><a name="L-2"></a><span class="p">{</span> </span><span id="L-3"><a name="L-3"></a> <span class="c1">//do what you want</span> </span><span id="L-4"><a name="L-4"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
check, href, image, img, javascript, jpeg, jpg, jquery, js, test

JavaScript

WebP Image with Fallback

<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">
https://snipt.net/embed/3129a92b49c67565ace361fb10dedc62/
https://snipt.net/raw/3129a92b49c67565ace361fb10dedc62/
3129a92b49c67565ace361fb10dedc62
js
JavaScript
1
2016-09-30T11:08:43
True
False
False
Apr 08, 2014 at 09:22 AM
/api/public/snipt/114585/
webp-image-with-fallback
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="o">&lt;</span><span class="nx">img</span> <span class="nx">src</span><span class="o">=</span><span class="s2">&quot;image.webp&quot;</span> <span class="nx">onerror</span><span class="o">=</span><span class="s2">&quot;this.onerror=null; this.src=&#39;image.png&#39;&quot;</span><span class="o">&gt;</span> </span></pre></div> </td></tr></table>
image, img, js, webp

JavaScript

Fix broken images automatically

1
2
3
$('img').error(function(){
	$(this).attr('src', 'img/broken.png');
});
https://snipt.net/embed/11b46d468543c142594c407058013be4/
https://snipt.net/raw/11b46d468543c142594c407058013be4/
11b46d468543c142594c407058013be4
js
JavaScript
3
2016-09-30T10:01:46
True
False
False
/api/public/snipt/109800/
fix-broken-images-automatically
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;img&#39;</span><span class="p">).</span><span class="nx">error</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span> </span><span id="L-2"><a name="L-2"></a> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;src&#39;</span><span class="p">,</span> <span class="s1">&#39;img/broken.png&#39;</span><span class="p">);</span> </span><span id="L-3"><a name="L-3"></a><span class="p">});</span> </span></pre></div> </td></tr></table>
broken, fix, image, img, jquery, placeholder

CSS

CSS: Resize image to container's width

1
2
3
4
5
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
https://snipt.net/embed/ce510da033dbaee8b4f6210af95ea8bf/
https://snipt.net/raw/ce510da033dbaee8b4f6210af95ea8bf/
ce510da033dbaee8b4f6210af95ea8bf
css
CSS
5
2016-09-30T06:07:14
True
False
False
/api/public/snipt/52989/
css-resize-image-to-containers-width
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nt">img</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="k">max-width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> </span><span id="L-3"><a name="L-3"></a> <span class="k">height</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="k">width</span><span class="o">:</span> <span class="k">auto</span><span class="err">\</span><span class="m">9</span><span class="p">;</span> <span class="c">/* ie8 */</span> </span><span id="L-5"><a name="L-5"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
auto-resize, container, img, resize

JavaScript

when a link to lightbox has special css setting

1
2
3
4
/* delete css setting of lightbox img links */
$('img').parent('a').css('background-image','none');		
$('img').parent('a').css('padding-right','0');
$('img').parent('a').css('text-decoration','none');
https://snipt.net/embed/d44b2223c57abfae7ba850bd03073242/
https://snipt.net/raw/d44b2223c57abfae7ba850bd03073242/
d44b2223c57abfae7ba850bd03073242
js
JavaScript
4
2016-09-29T21:00:48
True
False
False
Jan 01, 2013 at 01:12 PM
/api/public/snipt/52429/
when-a-link-to-lightbox-has-special-css-setting
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="cm">/* delete css setting of lightbox img links */</span> </span><span id="L-2"><a name="L-2"></a><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;img&#39;</span><span class="p">).</span><span class="nx">parent</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;background-image&#39;</span><span class="p">,</span><span class="s1">&#39;none&#39;</span><span class="p">);</span> </span><span id="L-3"><a name="L-3"></a><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;img&#39;</span><span class="p">).</span><span class="nx">parent</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;padding-right&#39;</span><span class="p">,</span><span class="s1">&#39;0&#39;</span><span class="p">);</span> </span><span id="L-4"><a name="L-4"></a><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;img&#39;</span><span class="p">).</span><span class="nx">parent</span><span class="p">(</span><span class="s1">&#39;a&#39;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s1">&#39;text-decoration&#39;</span><span class="p">,</span><span class="s1">&#39;none&#39;</span><span class="p">);</span> </span></pre></div> </td></tr></table>
css, img, jquery

CSS

change image opacity on hover

1
2
3
4
5
6
#some-div-name img:hover {
        /* for Chrome, Firefox, & Safari */
	opacity: 0.8;
        /* for IE */
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
https://snipt.net/embed/120c2e856b95ffd8e0b1863c0d112bbf/
https://snipt.net/raw/120c2e856b95ffd8e0b1863c0d112bbf/
120c2e856b95ffd8e0b1863c0d112bbf
css
CSS
6
2016-09-30T20:52:43
True
False
False
/api/public/snipt/29285/
change-image-opacity-on-hover
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1">1</a> <a href="#L-2">2</a> <a href="#L-3">3</a> <a href="#L-4">4</a> <a href="#L-5">5</a> <a href="#L-6">6</a></pre></div></td><td class="code"><div class="highlight"><pre><span id="L-1"><a name="L-1"></a><span class="nf">#some-div-name</span> <span class="nt">img</span><span class="nd">:hover</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="c">/* for Chrome, Firefox, &amp; Safari */</span> </span><span id="L-3"><a name="L-3"></a> <span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">8</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="c">/* for IE */</span> </span><span id="L-5"><a name="L-5"></a> <span class="n">filter</span><span class="o">:</span><span class="n">progid</span><span class="o">:</span><span class="n">DXImageTransform</span><span class="o">.</span><span class="n">Microsoft</span><span class="o">.</span><span class="n">Alpha</span><span class="p">(</span><span class="k">opacity</span><span class="o">=</span><span class="m">80</span><span class="p">);</span> </span><span id="L-6"><a name="L-6"></a><span class="p">}</span> </span></pre></div> </td></tr></table>
css, hover, image, img, opacity
Copyrighted, illegal, or inappropriate content? Email support@snipt.net.