tag:blogger.com,1999:blog-10531237503761596652024-02-07T14:37:05.483-06:00Highslide in BloggerRoadRashhttp://www.blogger.com/profile/08546278152446076926noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-1053123750376159665.post-40563754496622507732011-06-24T13:36:00.000-05:002013-01-14T11:54:28.740-06:00Highslide for single images in Blogger<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn14J_b2Ya8kgikMdDnMDEftxx5jieFIV2s3vOQaeaRMR3o6TCLqVvsAOwj_Kh5f6I-54_huwrjbYnN_ZRyRXd7EedjU271mzxntiZiSVNmykKrRjPjd3_o8SRdJ_o1EfOIvu8qnyUx6M/s1600/stones1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn14J_b2Ya8kgikMdDnMDEftxx5jieFIV2s3vOQaeaRMR3o6TCLqVvsAOwj_Kh5f6I-54_huwrjbYnN_ZRyRXd7EedjU271mzxntiZiSVNmykKrRjPjd3_o8SRdJ_o1EfOIvu8qnyUx6M/s400/stones1.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Stones - click to enlarge</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<u><b><span style="color: red;">UPDATED JANUARY 14, 2013</span> </b></u><br />
<br />
<u><b>This page describes two ways</b></u> to get single images opened in <a href="http://highslide.com/" target="_blank">Highslide JS</a> popups in Blogger:<br />
You can:<br />
<b>1.</b> Store the necessary files on your own server/file host. <br />
or you can:<br />
<b>2.</b> Link to the necessary files stored on my server. <br />
<br />
First you need to <b>turn off the default Blogger image popup function</b>. <br />
Settings => Posts and comments => Chose "No" for "Showcase images with Lightbox".<br />
<br />
<h3>
<u>1. Store the necessary files in your own domain/file host</u></h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="text-align: left;">
</div>
<ul>
</ul>
<div style="text-align: right;">
</div>
<ul><div style="text-align: left;">
</div>
<li>Download Highslide JS from the Highslide JS download page and unzip. </li>
<li>Download this JavaScript file: <a href="http://roadrash.no/blogger/highslide.config.js">http://roadrash.no/blogger/highslide.config.js</a> and place it in the highslide folder.</li>
<li>Upload the highslide folder with all its content to your server/file host. </li>
<li>Go to "Layout" and click "Add a Gadget" (<i>click thumb #1 below</i>)</li>
<li>Chose "HTML/JavaScript" from the list (<i>click</i><i> thumb #2</i><i> below</i>) </li>
<li>You will see this window: (<i>click</i><i> thumb #3</i><i> below</i>)<b><br />Don’t</b> add a title since we don’t want this Gadget to be visible with title in the page.</li>
<li>Add the below code in the content area.</li>
</ul>
<ul>
</ul>
<code></code><br />
<pre><code><!-- Start Highslide stuff -->
<script src="http://<span style="background-color: yellow;">XX</span>/highslide/highslide-full.js" type="text/javascript"></script>
<script src="http://<span style="background-color: yellow;">XX</span>/highslide/highslide.config.js" type="text/javascript"></script>
<link href="http://<span style="background-color: yellow;">XX</span>/highslide/highslide.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://<span style="background-color: yellow;">XX</span>/highslide/highslide-ie6.css" />
<![endif]-->
<!-- End Highslide stuff --></code></pre>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-edbR7sQLoCmA-VYiXabDqfnYfZn3PHqxdVaVWljSf2R5Fgn_JiG30i2XaPfKFNzCEcI4jIdkIOHulqh_2YyWqnnGUrNXUAC4VJkMTaU4RUkku37EKmL133NKyiw_xnpjqYBVL1XYipA/s1600/2013-01-14_1707.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-edbR7sQLoCmA-VYiXabDqfnYfZn3PHqxdVaVWljSf2R5Fgn_JiG30i2XaPfKFNzCEcI4jIdkIOHulqh_2YyWqnnGUrNXUAC4VJkMTaU4RUkku37EKmL133NKyiw_xnpjqYBVL1XYipA/s200/2013-01-14_1707.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>thumb #1</i></td></tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG19siATK_edwbMAt5FX6B4AX-aJJanASArlwtr7cabnFacqoYDCS8bcXOjNZPSsh5amUTg5Sg81K_Q9bGEXyMiblYMKk7fwpAgOWFYHEeMOwUVzq8sGm6WeQDSq5LrViqRzASqobDnZ0/s1600/2013-01-14_1716.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="38" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG19siATK_edwbMAt5FX6B4AX-aJJanASArlwtr7cabnFacqoYDCS8bcXOjNZPSsh5amUTg5Sg81K_Q9bGEXyMiblYMKk7fwpAgOWFYHEeMOwUVzq8sGm6WeQDSq5LrViqRzASqobDnZ0/s200/2013-01-14_1716.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>thumb #2</i></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwPnoRekQQjUj2Dv9ciY3m59As6GHcgoWHSWaZrXrctabuflN3UDNP4d_dXNcWbzuaG_cY8ld5YhFOrj4MUm4eW2S3iPLS6lEhoJhovKylmkxjfiU8iMQXXwklrgZEw4lMLjLnyO7Wl5I/s1600/2013-01-14_1717.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwPnoRekQQjUj2Dv9ciY3m59As6GHcgoWHSWaZrXrctabuflN3UDNP4d_dXNcWbzuaG_cY8ld5YhFOrj4MUm4eW2S3iPLS6lEhoJhovKylmkxjfiU8iMQXXwklrgZEw4lMLjLnyO7Wl5I/s200/2013-01-14_1717.png" width="169" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>thumb #3</i></td></tr>
</tbody></table>
<br />
<br />
<h3>
<u>2. Link to the necessary files stored at my server</u></h3>
<ul>
</ul>
<ul>
<li>Go to "Layout" in the menu and click "Add a Gadget" (<i>click thumb #1 above</i>)</li>
<li>Chose "HTML/JavaScript" from the list (<i>click thumb #2 </i><i>above</i>)</li>
<li>You will see this window: (<i>click thumb #3 </i><i>above</i>)<b><br />Don’t</b> add a title since we don’t want this Gadget to be visible with title in the page. </li>
<li>Add the below code in the content area.</li>
</ul>
<ul>
</ul>
<code></code><br />
<pre><code><!-- Start Highslide stuff -->
<script src="http://roadrash.no/hs-support/highslide/highslide-full.min.js" type="text/javascript"></script>
<script src="http://roadrash.no/blogger/highslide.blogger.config.js" type="text/javascript"></script>
<link href="http://roadrash.no/hs-support/highslide/highslide.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://roadrash.no/hs-support/highslide/highslide-ie6.css" />
<![endif]-->
<!-- End Highslide stuff --></code></pre>
<br />
<br />
<h3>
3. Make the Highslide effect available in the Mobile templates</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<ul>
<li>Go to “Templates” in the menu and click the little gear icon below the “Mobile” template. (<i>click thumb #4 </i><i>above</i>)</li>
<li>Choose “Yes. Show mobile template on mobile devices.” and chose “Custom” in the drop-down menu. Click “Save” (<i>click thumb #5 </i><i>above</i>)</li>
<li>Click “Edit HTML below the template you are using for your blog. (<i>click thumb #6 </i><i>above</i>)<br />Search for <b>HTML1</b> in the template code. If you already had added another HTML/JavaScript Gadget before the one we added for Highslide you probably need to search for HTML2. Your other HTML/JavaScript Gadget most likely has a title – the one you are searching for now doesn’t. The code you are searching for looks like this (note that the number in the id might be different):<br /><pre><code><b:widget id='HTML1' locked='false' title='' type='HTML'/></code></pre>
<br />You need to make it available for the mobile template – add the highlighted part:<br /><br /><pre><code><b:widget id='HTML1' locked='false' <span style="background-color: yellow;">mobile='yes'</span> title='' type='HTML'/>
</code></pre>
</li>
<li>Save the template and close.</li>
</ul>
<ul>
</ul>
<div style="text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNt5WYzOqhXc5hPpiww7_N3cHUIRrJr9yYNs0kXzeQEHVYkSe3lxIPyOU24KkrtdhuI-eJt7CUu7eakM3s0GrqYeapiaslVszbAu0ZH2PGofwP_wQBLcHyGu3EEeY_lN4ha_tTQiPcACg/s1600/2013-01-14_1735.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNt5WYzOqhXc5hPpiww7_N3cHUIRrJr9yYNs0kXzeQEHVYkSe3lxIPyOU24KkrtdhuI-eJt7CUu7eakM3s0GrqYeapiaslVszbAu0ZH2PGofwP_wQBLcHyGu3EEeY_lN4ha_tTQiPcACg/s200/2013-01-14_1735.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>thumb #4</i></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSvUsT1_9HFE41juOc6SCjTTMy7h32nyto3K5bOE-ghD-dWCiRRu3Zpoy_jYy406WgsE0ZiMuQ6a_yqvnuFvAf9aMbbhjorfbqJa7_9vwEpWuRq3N5XYfJUnl2BzYZS7Rm_7gGbi2Krw/s1600/2013-01-14_1744.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSvUsT1_9HFE41juOc6SCjTTMy7h32nyto3K5bOE-ghD-dWCiRRu3Zpoy_jYy406WgsE0ZiMuQ6a_yqvnuFvAf9aMbbhjorfbqJa7_9vwEpWuRq3N5XYfJUnl2BzYZS7Rm_7gGbi2Krw/s200/2013-01-14_1744.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>thumb #5</i></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmOqWeoO8YdXTJyAU0vMnDOR88SPI321T6utgU7p3hkR8vnd6Hlb1dyHn_ZlMt3mnodN5MkyKKqoH8lIa-DQCuiLJc-e_SfvENVZAMMAMdAOK7nVjEueuTMbgCzzIxZI7E4LY6W5H9rAY/s1600/2013-01-14_1746.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmOqWeoO8YdXTJyAU0vMnDOR88SPI321T6utgU7p3hkR8vnd6Hlb1dyHn_ZlMt3mnodN5MkyKKqoH8lIa-DQCuiLJc-e_SfvENVZAMMAMdAOK7nVjEueuTMbgCzzIxZI7E4LY6W5H9rAY/s200/2013-01-14_1746.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>thumb #6</i></td></tr>
</tbody></table>
<br />
<br />
<b>That’s it - now all the images will automatically open in a Highslide popup.</b></div>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlvT3GnTqMsWgsW3rIzgyh4ODq-Iqq2uvKQUPS0Jwr94ROZvqPSmbF8d7GT-6Kx_KCwXhp2EaoCElIn58jbO0wRRb9h3Eitax_-0zmArnn-_C6uG9DEOmjlaE_EDOmPjtjkz3UTlcIWwI/s1600/waterdrop.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlvT3GnTqMsWgsW3rIzgyh4ODq-Iqq2uvKQUPS0Jwr94ROZvqPSmbF8d7GT-6Kx_KCwXhp2EaoCElIn58jbO0wRRb9h3Eitax_-0zmArnn-_C6uG9DEOmjlaE_EDOmPjtjkz3UTlcIWwI/s400/waterdrop.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Water drop - click to enlarge</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
RoadRashhttp://www.blogger.com/profile/08546278152446076926noreply@blogger.com