I'm using lightgallery.js (https://sachinchoolur.github.io/lightgallery.js) to develop my ASP.NET MVC project.
It seems ok to load some images which have a size of less than 1MB, but the problem here when I use about ~20 pictures (~2MB/picture), Light Gallery will load very slow.
Could you share with me some ideas to overcome this problem?
Thanks for reading.
Hi please check this example lazy load image.
For more detail please check the official link -> Click me
$(document).ready(function(){
$("ul.jsImageUl > li img").lazy({
effect: "fadeIn",
effectTime: 1000
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>
<ul class="jsImageUl">
<li>
<img data-src="https://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" width="200" height="200" alt="" />
</li>
<li>
<img data-src="https://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" width="200" height="200" alt="" />
</li>
<li>
<img data-src="https://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" width="200" height="200" alt="" />
</li>
</ul>
Related
With the following code, I am using a spotlight for each item of the page.
<a style="text-align:center; top:50%"data-lightbox="on" data-spotlight="on">
<img src="http://localhost/mysite/wp-content/uploads/2016/06/cropped-291H-1.jpg" alt="" width="180" height="120" />
<p>Watch Episode</p>
</a>
How can I actually put the paragraph on top of the image instead of letting it stay at the bottom?
I want popover on hover of product images in WordPress, i used popover.js also include js and css of bootstrap. my WordPress theme has included bootstrap.
here is my product image code,
<img class="alignnone size-full wp-image-134" src="Projektorer-research.jpg" alt="Projektorer-research" width="268" height="150" />
here i used data-content="test" for example, actually i want to display unordered list over there.
Are you initializing your Popovers? You must initialize them yourself with JS like in the example Snippet.
See docs working example.
$(function() {
$('[data-toggle="popover"]').popover();
});
body,
html {
margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" data-toggle="popover" data-trigger="hover" data-content="test">
<img class="alignnone size-full wp-image-134" src="http://placehold.it/350x150" alt="..." width="268" height="150" />
</a>
i think you are trying to display custom(html) content in your popover, if you do like below you can set any content in your popover.
<div id="popover_content" class="row company-logo" style="display: none">
<ul>
<li><img src="images/alico-logo.png" alt=""/></li>
<li><img src="images/national.png" alt=""/></li>
<li><img src="images/traveller.png" alt=""/></li>
<li><img src="images/progressive.png" alt=""/></li>
<li><img src="images/formost.png" alt=""/></li>
<li><img src="images/the.png" alt=""/></li>
<li><img src="images/circle.png" alt=""/></li>
</ul>
</div>
<a id="popx" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="">Click to toggle popover</a>
and initialize your popover like this:
<script>
$(function () {
$('#popx').popover({
html: true,
content: function () {
return $('#popover_content').html();
}
});
;
})
</script>
i need hide pics and no use display:none
I use Highlight script for create one gallery , the problem it´s i need only show 4 pics and no the others , the script let click in one pic and show the others with arrows , the problem it´s if i use display:none for the other pics and no in the first 4 , the other pics no show finally
I try other possibilities , but no works , i need hide all pics out of the firsts 4 but i can´t use display:none
The Best Regards
You can easily change this Highslide example gallery: http://highslide.com/examples/gallery-thumbstrip-above.html to have four visible thumbnails in the page instead of one visible thumbnail. The clue is to move the markup for the thumbnails you want to be visible, outside the hidden-container div.
The example gallery has one thumbnail outside the hidden-container div (see the source code).
jsFiddle with four visible thumbnails: http://jsfiddle.net/roadrash/Un4N7/ The HTML markup of a gallery with eight images, but only four visible thumbnails, will look like this:
<div class="highslide-gallery">
<a href="large-image1.jpg" onclick="hs.expand(this)" />
<img src="thumbnail1.jpg" alt="" />
</a>
<a href="large-image2.jpg" onclick="hs.expand(this)" />
<img src="thumbnail2.jpg" alt="" />
</a>
<a href="large-image3.jpg" onclick="hs.expand(this)" />
<img src="thumbnail3.jpg" alt="" />
</a>
<a href="large-image4.jpg" onclick="hs.expand(this)" />
<img src="thumbnail4.jpg" alt="" />
</a>
<div class="hidden-container">
<a href="large-image5.jpg" onclick="hs.expand(this)" />
<img src="thumbnail5.jpg" alt="" />
</a>
<a href="large-image6.jpg" onclick="hs.expand(this)" />
<img src="thumbnail6.jpg" alt="" />
</a>
<a href="large-image7.jpg" onclick="hs.expand(this)" />
<img src="thumbnail7.jpg" alt="" />
</a>
<a href="large-image8.jpg" onclick="hs.expand(this)" />
<img src="thumbnail8.jpg" alt="" />
</a>
</div>
</div>
I have this code:
<header id="mainHeader">
<div id="logo">
<img src="images/logo.jpg" alt="" />
</div>
<div id="callus">
<p>
<img src="images/callus.jpg" alt="" class="fl" />
</p>
</div>
<nav>
<ul id="nav">
<li class="links">Home</li>
<li class="links">About Us</li>
<li class="links">Portfolio</li>
<li class="links">Services</li>
<li class="links">Contact Us</li>
</ul>
</nav>
</header>
I have put it in a user control called header.ascx and declared it in a web.config file. Its working fine when i am calling it from any page which is on the same directory level. But once i call it from a subfolder the logo image disappears and links doesn't work.
Try calling the image src from your sites home directory. If your images folder is in your sites home directory, then you need a slash in front of it..
<img src="/images/logo.jpg" alt="" />
I am trying to implement add this code to a site , I would like to open facebook,twitter,linkedin and email windows as pop up when any one click on the buttons . I am also using cutomized buttons here . All other except linked in works perfect , but linked is not opening in a pop up window instead it opens a seperate tab window. How can I solve this ? Please see the code here
<html>
<head></head>
<body>
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/30 /addthis_widget.js#pubid=sunilkumarpkerala"></script>
<!-- AddThis Smart Layers END -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook"><img src="http://mysite.com/workshop/shareimages/facebook.png"
width="32" height="32" border="0" alt="Facebook" /></a>
<a class="addthis_button_twitter"><img src="http://mysite.com/workshop/shareimages/twitter.png"
width="32" height="32" border="0" alt="Facebook" /></a>
<a class="addthis_button_linkedin"><img src="http://mysite.com/workshop/shareimages/linkedin.png"
width="32" height="32" border="0" alt="Linkedin" /></a>
<a class="addthis_button_email"><img src="http://mysite.com/workshop/shareimages/email.png"
width="32" height="32" border="0" alt="Email" /></a>
</div>
</body>
</html>
You can see the live example here
You can check Addthis Sharing Endpoints that doesn't uses their script and make it work how you want.