CSS Gallery Syndication via JavaScript

You can now display a list of new CSS Gallery entries on CSS Drive- thumbnails and all- on your site! Just copy and paste some JavaScript code, and off you go.

Step 1: Insert the below code on your page, ideally in the <HEAD> section:

<script src="http://www.cssdrive.com/export/galleryfeed.js" type="text/javascript"></script>

Step 2: You can now display the latest 6 CSS Gallery Entries from our site any way you like using simple JavaScript. Here are some examples.

Example 1 (show latest 6 entries inline on the page):

<script type="text/javascript"> //Displays all gallery items inline. Adds divider after 3rd gallery item. //Ideal width versus height ratio: 1.2 : 1 var thumbWidth="220px" //native width is 220px var thumbHeight="170px" //native height is 170px for (i=0; i<csstitles.length; i++){ document.write('<a href="'+cssurl[i]+'"><img src="'+csssrc[i]+'" border="1px" title="'+csstitles[i]+'" width="'+thumbWidth+'" height="'+thumbHeight+'" style="margin-right:5px;" /></a>') if (i==2) //add divider after 3rd gallery item document.write('<div style="margin-top: 6px"></div>') } </script>

Example 2 (show latest 3 entries vertically):

<script type="text/javascript"> //Displays 3 gallery items vertically. Adds gallery title underneath each thumbnail. //Ideal width versus height ratio: 1.2 : 1 var thumbWidth="220px" //native width is 220px var thumbHeight="170px" //native height is 170px for (i=0; i<3; i++) document.write('<div style="margin-bottom: 10px"><a href="'+cssurl[i]+'"><img src="'+csssrc[i]+'" border="1px" title="'+csstitles[i]+'" width="'+thumbWidth+'" height="'+thumbHeight+'"/><br />'+csstitles[i]+'</a></div>') </script>

Example 3 (show 1 entry randomly):

<script type="text/javascript"> //Displays a single gallery item randomly out of 6. //Ideal width versus height ratio: 1.2 : 1 var thumbWidth="220px" //native width is 220px var thumbHeight="170px" //native height is 170px var randomNum=Math.floor(Math.random()*csstitles.length) document.write('<div style="margin-bottom: 10px" style="width:'+thumbWidth+'"><a href="'+cssurl[randomNum]+'"><img src="'+csssrc[randomNum]+'" border="1px" title="'+csstitles[randomNum]+'" width="'+thumbWidth+'" height="'+thumbHeight+'"/><br />'+csstitles[randomNum]+'</a></div>') </script>

Example 4 (show a CSS gallery image slideshow):

<script language="JavaScript1.1"> //Displays a a rotating image slideshow out of all CSS items //Ideal width versus height ratio: 1.2 : 1 var thumbWidth="220px" //native width is 220px var thumbHeight="170px" //native height is 170px var delay=4000 //delay between image change: 3 seconds var count=0; function rotategallery(){ count++; if (count==csssrc.length) count=0; if (window.createPopup) galleryObj.filters[0].apply() galleryObj.src=csssrc[count] if (window.createPopup) galleryObj.filters[0].play() setTimeout("rotategallery()",delay) } function galleryurl(){ window.open(cssurl[count], "css") } function begingallery(){ galleryObj=document.getElementById? document.getElementById("cssgallery") : document.images.cssgallery setTimeout('rotategallery()',delay) } document.write('<a href="javascript:galleryurl()"><img src="'+csssrc[0]+'" width="'+thumbWidth+'" height="'+thumbHeight+'" name="cssgallery" id="cssgallery" border="1px" style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle=\'PUSH\')"></a>') window.onload=begingallery </script>

Our
Partners

Dynamic Drive forums | Register

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site