How to centre images
-
When i click on a radar the radar is not centered.
How to do that ?
http://buienradars.eu
-
Because you are using class=”fancybox-iframe” for images. Just remove that class and let the auto-detection (where you added .gif already) do the work…
When i do that radar 3,4 and 5 open in a new page.
This i de code that i use now ..
<table width=”100%”>
<tr>
<td align=”center”></td>
</tr>
</table><table width=”100%”>
<tr>
<td align=”center”>
<img src=”http://buienradar.nl/image?type=lightningzozw&fn=buienradarnl-1×1-ani550-1uurbliksem.gif” alt=”” width=”250″ height=”250″ class=”bbc_img”>
</td>
</tr>
</table><table width=”100%”>
<tr>
<td align=”center”>
<img src=”http://www.knmi.nl/neerslagradar/images/meest_recente_radarloop451.gif?124252″ alt=”” width=”250″ height=”250″ class=”bbc_img”>
</td>
</tr>
</table><table width=”100%”>
<tr>
<td align=”center”>
<img src=”http://api.buienradar.nl/image/image.ashx?k=3&l=1&c=nl” alt=”” width=”250″ height=”250″ class=”bbc_img”>
</td>
</tr>
</table><table width=”100%”>
<tr>
<td align=”center”>
<img src=”http://www.sat24.com/image.ashx?type=meteox&sat=ir” alt=”” width=”250″ height=”250″ class=”bbc_img”>
</td>
</tr>
</table><table width=”100%”>
<tr>
<td align=”center”>
<img src=”http://images.lightningmaps.org/blitzortung/europe/index.php?map=benelux&date=” alt=”” width=”250″ height=”250″ class=”bbc_img”>
</td><table width=”100%”>
<tr>
<td align=”center”>
<img src=”http://www.dwd.de/bvbw/generator/DWDWWW/Content/Oeffentlichkeit/WV/WVFK/Dynamisches/Regional/met8__deut__aktuell,templateId=poster,property=poster.png” alt=”” width=”250″ height=”250″ class=”bbc_img”>
</td>
</tr>
</table><table width=”100%”>
<tr>
<td align=”center”>
<img src=”http://www.dwd.de/bvbw/generator/DWDWWW/Content/Oeffentlichkeit/WV/WVFK/Dynamisches/Regional/met8__europa__aktuell,templateId=poster,property=poster.png” alt=”” width=”250″ height=”250″ class=”bbc_img”>
</td>
</tr>
</table>
</tr>
</table>Please use the code button when pasting code samples on this forum.
Your code got a bit ‘mangled’ but I think I see why it’s not working for some links. The script does not recognize them as pointing to images. For those links that point to images, just add the
class="fancybox"and useclass="fancybox-iframe"for links that point to complete web pages.Still not working i am afraid.
<table width="100%"> <tr> <td align="center"> <br /> </td> </tr> </table> <table width="100%"> <tr> <td align="center"> <a href="http://buienradar.nl/image?type=lightningzozw&fn=buienradarnl-1x1-ani550-1uurbliksem.gif" class="fancybox"><img src="http://buienradar.nl/image?type=lightningzozw&fn=buienradarnl-1x1-ani550-1uurbliksem.gif" alt="" width="250" height="250" class="bbc_img"></a><br /> </td> </tr> </table> <table width="100%"> <tr> <td align="center"> <a href="http://www.knmi.nl/neerslagradar/images/meest_recente_radarloop451.gif?124252" class="fancybox"><img src="http://www.knmi.nl/neerslagradar/images/meest_recente_radarloop451.gif?124252" alt="" width="250" height="250" class="bbc_img"></a><br /> </td> </tr> </table> <table width="100%"> <tr> <td align="center"> <a href="http://api.buienradar.nl/image/image.ashx?k=3&l=1&c=nl" class="fancybox-iframe"><img src="http://api.buienradar.nl/image/image.ashx?k=3&l=1&c=nl" alt="" width="250" height="250" class="bbc_img"></a><br /> </td> </tr> </table> <table width="100%"> <tr> <td align="center"> <a href="http://api.buienradar.nl/image/image.ashx?k=4&c=eu" class="fancybox-iframe"><img src="http://www.sat24.com/image.ashx?type=meteox&sat=ir" alt="" width="250" height="250" class="bbc_img"></a><br /> </td> </tr> </table> <table width="100%"> <tr> <td align="center"> <a href="http://images.lightningmaps.org/blitzortung/europe/index.php?map=benelux&date=" class="fancybox-iframe"><img src="http://images.lightningmaps.org/blitzortung/europe/index.php?map=benelux&date=" alt="" width="250" height="250" class="bbc_img"></a><br /> </td> <table width="100%"> <tr> <td align="center"> <a href="http://www.dwd.de/bvbw/generator/DWDWWW/Content/Oeffentlichkeit/WV/WVFK/Dynamisches/Regional/met8__deut__aktuell,templateId=poster,property=poster.png" class="fancybox"><img src="http://www.dwd.de/bvbw/generator/DWDWWW/Content/Oeffentlichkeit/WV/WVFK/Dynamisches/Regional/met8__deut__aktuell,templateId=poster,property=poster.png" alt="" width="250" height="250" class="bbc_img"></a><br /> </td> </tr> </table> <table width="100%"> <tr> <td align="center"> <a href="http://www.dwd.de/bvbw/generator/DWDWWW/Content/Oeffentlichkeit/WV/WVFK/Dynamisches/Regional/met8__europa__aktuell,templateId=poster,property=poster.png" class="fancybox"><img src="http://www.dwd.de/bvbw/generator/DWDWWW/Content/Oeffentlichkeit/WV/WVFK/Dynamisches/Regional/met8__europa__aktuell,templateId=poster,property=poster.png" alt="" width="250" height="250" class="bbc_img"></a><br /> </td> </tr> </table> </tr> </table>Like I said, use class=”fancybox” for those URLs that do not look like an image URL but actually are an image. Like http://api.buienradar.nl/image/image.ashx?k=4&c=eu and others… The URLs that end with .jpg .gif or .png will be recognized by the script but those that do not, will not get recognized as pointing to images so there you will have to add the right class manually.
I know RavanH but when i do that the image dont show up en keeps loading.
Hmmm… it sounds like that is happening because the FancyBox still does not recoginize them as actual images.
Please try the following:
Go to Instellingen > Media and Activate the option “Include the Metadata jQuery extension script to allow passing custom parameters via link class.”
Then edit your sidebar link classes (only for these special kind of images) again so that they look like
class="fancybox {type:'image'}"Thx so much RavanH that works super 😉
- The topic ‘How to centre images’ is closed to new replies.
