We Keep Coding

Blogger show external image thumbnail in popular posts

There is a Popular Post Widget provided by Blogger, which can find the popular posts' first image and show it on the sidebar of your blog.
But it can only find images which are directly uploaded to Blogger, it doesn't work on external image links. I'm wondering if there's a way to read the external image by editing its code, maybe in javascript I think...
The default generated code:
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
Since there are so many b:if and data: in the code, I'm not sure if I can treat it as a normal html file or not.

I made a widget below, which can show popular posts' thumbnail by external images. Copy all the code and add it as a widget fixes the problem.
It gets the first image in the posts, both internal images and external images worked well.
Code: GitHub

try this one
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href'>
<b:with value='data:post.featuredImage.isResizable?resizeImage(data:post.featuredImage, 65, "65:52"): data:post.thumbnail' var='image'>
<img class='featuredImage' expr:alt='data:post.title' expr:src='data:image' height='52' layout='responsive' width='65'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>

Background image slideshow not working properly

I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect

It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.

I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.

This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"

Fancybox.. one image that contains more images

I just want my page to contain one image then once you click it.. you can move across and view more images.. is this possible?
Atm my fancy box is just one image showing one image..
Any help would be great, thanks

I use to work with Fancybox since earlier versions. What I do in that case is:
HTML:
<!-- this is the regular image -->
<a class="fancybox" href="leIMG-bigger-0.jpg" rel="leGallery"><img src="leIMG-0.jpg" alt=""></a>
<!-- this is the rest of the gallery... hidden -->
<div class="fancyboxHidden">
<a class="fancybox" href="otherIMG-bigger-1.jpg" rel="leGallery">
<img src="otherIMG-1.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-2.jpg" rel="leGallery">
<img src="otherIMG-2.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-3.jpg" rel="leGallery">
<img src="otherIMG-3.jpg" alt="">
</a>
<div>
CSS:
.fancyboxHidden {display:none;}
This way you are:
1) Using your full gallery (try the thumbs helper and will look great)
2) Indexing all the images for search engines
Hope this will help you, for a good example of this check out this site in source view.
PS: There is many ways to achieve what you want, you can create the gallery directly from JS or combine both ways. This is the way I choose for image indexing ;)

Slideshow - link slide to URL only working for last slide

I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...

I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.

Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"

Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

lazy loading is not working properly

i want to display number of images in one page. For the best viewing i integrate lazy loading.
My javascript code is
<script src="{$this->scriptFolder}jquery.lazyload.js"></script>
<script src="{$this->scriptFolder}lazy_loader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".lazy").lazyload({
effect : "fadeIn"
});
$(window).scrollTop(1);
});
</script>
My html code is like this
<ul>
<li class="span2" id="hider">
<a href="/Magazine/index/get/52/" class="thumbnail magazine_cover">
<img width="180" height="230" class="lazy" alt="cover" src="/public/demo.jpg" data-original="http://magsonwink.com/ECMedia/MagazineFiles/MAGAZINE-141/ISSUE-10085/CoverPage/Thumbnail/Outlook.jpg">
</a>
</li>
</ul>
but when i load this page the images are loading from different sections. I want to load images one by on
My staging site : http://staging.delhipress.thewinkstore.com/
if any one know about this please help me