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.
Related
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>
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?
In a dialog i want to display several download links with a caption on the same line :
<md-dialog-content>
<div align="center" id="download">
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}.pdf"
download>
<figure>
<img src="style/images/pdf-icon.png" alt="Download PDF" width="15%" height="15%">
<figcaption>English PDF</figcaption>
</figure>
</a>
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}.pdf"
download>
<figure>
<img src="style/images/pdf-icon.png" alt="Download PDF" width="15%" height="15%">
<figcaption>French PDF</figcaption>
</figure>
</a>
<a ng-href="https://community.site.com/it/urbsi/cartographies/{{currentCartography}}.vsd"
download>
<img src="style/images/vsd-icon.png" alt="Download VSD" width="15%" height="15%">
</a>
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}_FS.png"
download>
<figure>
<img src="style/images/png-icon.png" alt="Download PNG" width="15%" height="15%">
<figcaption>English PNG</figcaption>
</figure>
</a>
<a ng-href="https://community.site.com/it/urbsi/SiteGenen/{{currentCartography}}_FS.png"
download>
<figure>
<img src="style/images/png-icon.png" alt="Download PNG" width="15%" height="15%">
<figcaption>French PNG</figcaption>
</figure>
</a>
</div>
</md-dialog-content>
But my links are displayed on different lines. I tried display: inline;but no luck.
Which gives this instead of a one line dialog :
use layout="row" inside your div tag.
<md-dialog-content>
<div align="center" id="download" layout="row">
// your anchor tag
</div>
</md-dialog-content>
note: as you uses <md-dialog-content> its means you are using angular-material-design
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 created a little website (which will probably stay offline) to make some things easier. I created a hotbar with links so I can navigate to important sites more easily.
The problem is:
To iframe google into the webpage I had to use a proxy (I used hidemyass) because google blocks the use of iframes, but because the proxy site has a huge banner on top of every page you open trough it I moved the content inside of the iframe using margin top in CSS.
So the banner is still there but you can't see it but now whenever I open any other website in the same iframe without any banners it will hide part of the website and I don't want this.
So how do I make it hide the banner on top of the proxy page and still fully display any other page? I tried to give the div and iframe 2 names so that I could make 2 CSS statements but this doesn't work.
Here's the code:
#frame1 {
position:fixed !important;
position:absolute;
top:0%;
right:0%;
bottom:0%;
left:8%;
overflow: hidden;
}
body {
background-color: black
}
#frame2 {
width: 100%;
height: 131%;
margin-top: -18.5%;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="school/bronnen/css/main.css">
<meta charset="UTF-8">
<title>Bronnen</title>
</head>
<body>
<br>
a href="http://2.hidemyass.com/ip-1/encoded/czovL3d3dy5nb29nbGUuY29tLw%3D%3D" target="frame2"><img src="school/bronnen/pics/google.jpg" alt="google" width="7%" height="auto"></a>
<br>
<img src="school/bronnen/pics/github.png" alt="github" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/awwards.png" alt="awwards" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/dropbox.jpg" alt="dropbox" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/activetuts.png" alt="activetuts" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/stackoverflow.jpg" alt="stackoverflow" width="7%" height="auto">
<div name="frame1" id="frame1"><iframe src="school/bronnen/iframe/iframe.html" name="frame2" id="frame2" frameborder="1" scrolling="auto"></iframe></div>
<br>
<img src="school/bronnen/pics/dubstep.jpg" alt="dubstep" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/codecademy.png" width="7%" height="auto" alt="">
<br>
<img src="school/bronnen/pics/youtube.png" alt="youtube" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/facebook.png" alt="facebook" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/piratebay.jpg" alt="piratebay" width="7%" height="auto">
<br>
<img src="school/bronnen/pics/twitter.png" alt="twitter" width="7%" height="auto">
</table>
For obvious security reasons, you can not change contents of an iframe from its parent