CSS Random Post Gallery

Monday, January 13, 2025
How Create a (Random Post) Gallery - This example of widget shows 12 random posts ( Image with Link) created on this blog but you can customize the number and size of your post widget.

For another Example of this type script go to my GALLERY link above to view ALL my postings...

Code:

<script type='text/javascript'>

//<![CDATA[

// Random Post Gallery

function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="random-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_self" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}

//]]>

</script>

<style>

/* CSS Random Post Gallery */

.random-gallery {padding:0;clear:both;}

.random-gallery:after {content:"";display:table;clear:both;}

.random-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}

.random-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}

.random-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}

.random-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}

.random-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}

.random-gallery a:hover img {border-color:#bbb;}

</style>

<script>

var arlina_thumbs = 150; 

var arlina_title = true; 

</script>

<script src="/feeds/posts/summary?max-results=100&amp;alt=json-in-script&amp;callback=arlinagrid"></script>



Thanks For Visiting
Copyright © 2018 - Creative eXpressions
Sources: ... FlipBook ... Scribed ... PDF
This Site is in no way apart of, with, or associated with The Walt Disney Company. Some content is Copyright © The Walt Disney Company. No parts of this site are to be reproduced without written permission. 
These books are for educational purposes only!! 
**FAIR USE** Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education and research.
Tags
Reactions