I am trying to create custom button for pinterest. I was able to use a custom image as a button but it is not working properly.
Here is the CSS I am using.
span[data-pin-log="button_pinit_bookmarklet"] {
}
span[data-pin-log="button_pinit_bookmarklet"]::after {
content: url('../images/icon.png');
}
In the ScreenShot I have marked the button I am working on using red color. I have marked the areas I want to get rid off using blue color.
I am stuck on this problem for more than 12 hours. So, any help will be really appreciated.
You can get the Pinterest Button Using these codes
<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
For custom button
The data-pin-custom="true" attribute is important because it keeps your custom markup, including your HTML and CSS.
<a href="https://www.pinterest.com/pin/create/button/"
data-pin-do="buttonBookmark"
data-pin-custom="true">
--YOUR CUSTOM HTML--
</a>
--YOUR CUSTOM HTML-- Given likes as below
<img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
<p>Ordinary button</p>
<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<p>Custom button</p>
<a data-pin-do="buttonPin" href="" data-pin-custom="true">
<img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
</a>
For more information: Visit https://developers.pinterest.com/docs/widgets/save/?
Related
how to access img tag inside a href tag to set focus to <img> tag?
eg:
<a href ='#' ><img class="img1" src="abc.png"/> </a>
The a .img1:focus {} didn't work. Not able to access <img> inside an <a href></a> tag
If I add class to tag, I can add focus to tag but tag & tag are of diff size & causing issue. eg: , then a .test:focus{} is working, But I need focus for tag
You need a space between a and .img1 ( the way you wrote it means "a tag with img1 class" ) this way :
a .img1:focus {}
This means "element with img1 class inside a tag"
EDIT : in the link #jdv provided in the comments of your initial answer, don't focus (pun unintended) on the accepted answer, but on the second one. You can fix your problem by adding a tabindex property to your img tag.
Like this :
<a href ='#' ><img class="img1" src="abc.png" tabindex="0"/> </a>
try out this code
<a href ='#' id='link'><img class="img1" src="abc.png"/> </a>
a#link .img1:focus{}
focus is often associated with form elements like input field I advise you use hover like this instead
a img:hover{
width: 500px;
}
<a><img class="img1" src="http://via.placeholder.com/350x150"/></a>
In Fancybox 3, is it possible to have HTML inside an image gallery?
This HTML will have a link to an external site.
Whatever I do, it doesn't work.
<div id="photo-gallery" style="display: none">
<a data-fancybox="photo-gallery" href="photo-1.jpg"></a>
<a data-fancybox="photo-gallery" href="photo-2.jpg"></a>
<a data-fancybox="photo-gallery" href="photo-3.jpg"></a>
The 4th item should be just a window with a link to another site, like:
<a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a>
</div>
Please, check documentation for samples - http://fancyapps.com/fancybox/3/docs/
I guess you are looking for something like this:
<a data-fancybox="photo-gallery" data-type="iframe" href="some-page.html">4</a>
Demo - https://codepen.io/anon/pen/vdxPJg?editors=1000
Edit #1
If you want to automatically add some extra content at the end of the gallery, you can use this snippet:
$('[data-fancybox="photo-gallery"]').fancybox({
onInit: function(instance) {
instance.createGroup({
type : 'html',
content : '<div><h1>Hi</h1><a data-fancybox="photo-gallery" href="www.anothersite.com">Click here</a></div>'
});
}
})
Demo - https://codepen.io/anon/pen/KQmNGX?editors=1010
Edit #2
This is how you can mix images and inline content:
<a data-fancybox="photo-gallery" href="#info">4</a>
<div id="info">
Click here
</div>
Demo - https://codepen.io/anon/pen/KQmNrX?editors=1010
I have looked at css filters "invert" but i'm struggling to think how a can target all my images (which have the Id=images) to invert with a click on text link. I'd also need to be able to second click the link to remove the invert filter. If anyone has an idea that'd be great.
FYI:
All my image are tagged Id=images and are all in the same div.
The invert link (text) has it's own div which is fixed, z-index 2000.. (front layer)
Thanks
http://jsfiddle.net/hu8tn0qb/1/
Turn all your id="images" into class="images" (you can't use an id more than once), then add in the code below.
The first block of code is the jQuery that will add the "inverted" class to all images with the class "image" when the div with the id "invert_btn" is clicked. By using .toggleClass it will remove the class when clicked a second time.
$('#invert_btn').click(function() {
$(".images").toggleClass("inverted");
});
.inverted {
-webkit-filter: invert(1);
filter: invert(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="invert_btn">Click Me</div>
<img src="http://placekitten.com/g/200/300" class="images" />
<img src="http://placekitten.com/g/200/300" class="images" />
I have a HTML form which is a popup. When the user click the button, form will get appear at the same page.
But this code doesn't work in Wordpress post:
<a href="javascript: void(0)" onClick="OpenPopup();">
<img border="0" src="submit.jpg">
</a>
What should I do for this?
Iexplore doesn't support onClick, may be you can do this by creating a jQuery function :
Add ID first:
<img id='image_id' border="0" src="submit.jpg"/>
Then, jQuery function:
<script>
$(document).ready(function(){
$('#image_id').click(function(){
OpenPopup();
});
});
</script>
So I need to use addthis. Please visit my page which I am trying to implement add this.
http://www.iamvishal.com/dev/node/13
The add this buttons won't show up on my page. I am able to implement it using plain html code but the drupal implementation is not working.
The js is getting loaded but I am unable to debug the problem as I am unable to find the problem why this is happening.
cheers,
Vishal
p.s - for more on addthis pls visit http://www.addthis.com/
code:
<script type="text/javascript">
(function ($) {
Drupal.behaviors.slider = {
attach:function(context) {
var script = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
if (window.addthis) {
window.addthis = null;
}
$.getScript(script);
}
};
}(jQuery));
</script>
<div id="sociallinks">
<div class="viewing">Request a viewing</div>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->
</div><!-- end of social links -->
What worked for me in D7 was to create a new 'text format' where there were no filters enabled. For whatever reason D7 thinks that the AddThis code is faulty or incomplete.
configuration > content authoring > text formats > add text format
Give it a shot.