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
Related
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/?
I am using W3.CSS framework. Been using Bootstrap before but i think W3.css is more fast and want to try it out as well.
I set a dropdown button with contents but when i hover it, it does not show dropdown.
Am I missing anything out? i Have tried this on Chrome and Edge. below is the code.
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown <i class="fa fa-caret-down"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
Link 1
Link 2
Link 3
</div>
This issue is properly addressed here: Dropdowns by w3schools
You need to put the Javascript script link provided by w3schools. I have created one I am sure it will work for you. For more examples you can visit the above link.
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container">
<p>Dropdown click Demo</p>
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
Link 1
Link 2
Link 3
</div>
</div>
</div>
Hi I hope someone can help with this. I'm building a wordpress plugin. I just have basic knowledge of php and i managed to build the whole plugin except pagination. I have tried so many code using javascript but none is working for me. Here is the image. I want to divide the items with pagination
Thank you in advance!
A good approach will be to think about the pages like tabs. Then the page link will behave like buttons that show/hide based on the page link clicked.
Here's an example using jQuery
// Add an event listener for when the page link is clicked
$('.page-link').on('click', function(){
// Save the page number that was clicked
var pageNum = $(this).data('page-id')
// Hide any open 'pages'
$('.page-content').hide();
// Find and show the selected page
$('[data-page=' + pageNum + ']'').show();
});
For this to work, you'd need a HTML structure a bit like this
<!-- The Page Link -->
<div>
<ul>
<li class="page-link" data-page-id="1">Page 1</li>
<li class="page-link" data-page-id="2">Page 2</li>
<li class="page-link" data-page-id="3">Page 3</li>
</ul>
<!-- The Page Content -->
<div class="page-content" data-page="1" style="display: none;">
Page 1 content
</div>
<div class="page-content" data-page="2" style="display: none;">
Page 2 content
</div>
<div class="page-content" data-page="3" style="display: none;">
Page 3 content
</div>
</div>
Here is a super basic jsfiddle
I'm using bootstrap tab shortcodes on my Wordpress site. I want to link from another page to tab2. Can anyone advise how this is done?
My page code (chopped a bit):
[bootstrap_tab name="TAB1" link="tab1-slug" active="active"]
TAB 1 Content
[/bootstrap_tab]
[bootstrap_tab name="TAB2" link="tab2-slug"]
More content
[/bootstrap_tab]
[bootstrap_tab name="TAB3" link="tab3-slug"]
Yep. Even more content.
[/bootstrap_tab]
[bootstrap_tab name="TAB4" link="tab4-slug"]
Yep. Even more content.
[/bootstrap_tab]
[end_bootstrap_tab]
The code it produces:
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="tabs active">
<a data-toggle="tab" href="#tab1-slug">TAB1</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab2-slug">TAB2</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab3-slug">TAB3</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab4-slug">TAB4</a>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div id="tab1-slug" class="tab-pane active">
<p></p>
<h2>header</h2>
<p><strong>bold</strong></p>
<p>content</p>
<p></p>
</div>
<div id="tab2-slug" class="tab-pane ">
<p></p>
<h2>TAB2</h2>
<p><strong>These are usually two day</strong></p>
</div>
<div id="tab3-slug" class="tab-pane ">
<p></p>
<h2>TAB3</h2>
<p>1 to 2 day events</p><p></p>
</div>
<div id="tab4-slug" class="tab-pane ">
<p>
<h2>TAB4</h2>
<p><strong>5 to 10 day courses</strong></p>
</div>
</div>
Though not in WordPress, this seems to be the definitive solution to linking to Bootstrap tabs:
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
That being said, I wrote a WordPress plugin that will do this. Activate the plugin, then you'll be able to use the tab's href as the hash.
If your tab looks like this:
<li>Profile</li>
You can link to it and activate/open it using a link like this:
Link to my tab
The plugin will also allow you to link directly to content on the tabs, using a sort of a two-step link:
Step 1 Activate the proper tab
Step 2 Scroll to the content on the tab.
It does this using only a single hash in the URL.
For example: http://www.example.com/mypage/#content
This will take you to "mypage" and the HTML element with id="content", whether it's on an active/inactive Bootstrap tab or just on the page somewhere.
Hope this helps:
Here's the plugin on GitHub: https://github.com/marinersmuseum/WP-Tab-Anchors/blob/master/wp-tab-anchors.zip
Supposing that jQuery is being loaded and that the link URL is something like
http://example.com/page-with-tabs/?tab=NUMBER
We print some conditional script at the footer:
add_action( 'wp_footer', 'active_tab_so_19576232' );
function active_tab_so_19576232()
{
# Query var not set in URL, bail out
if( !isset( $_GET['tab'] ) )
return;
# Change the active tab
$tab = '#tab'. $_GET['tab'] .'-slug';
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('div.tab-pane.active').removeClass('active');
$('<?php echo $tab; ?>').addClass('active');
});
</script>
<?php
}
Should be a plugin, but you can drop the code in your theme functions.php.
I am making a website that uses div/slides to hold content. They are positioned inside a container with overflow:hidden. A navigation bar uses document.getElementById('box').style.left='0px' to alter the div positions to bring required div into view. The left CSS property is changed 'onclick' to bring the targeted div into view and push the others out of container viewing area. Transitions animations are handled by CSS.
Here a link to the fiddle example. http://jsfiddle.net/HyHmF/1/ . HTML Code is as follows,
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='0px';
document.getElementById('box2').style.left='200px';
document.getElementById('box3').style.left='400px';">Box 1</a>
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-200px';
document.getElementById('box2').style.left='0px';
document.getElementById('box3').style.left='200px'";>Box 2</a>
<a class="boxes" href="#" onclick="document.getElementById('box1').style.left='-400px';
document.getElementById('box2').style.left='-200px';
document.getElementById('box3').style.left='0px'">Box 3</a>
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
My issue is this. How can I make the browser back button to change the CSS to bring the previous displayed div into view. That is, without reverting back to the 'home' div.
I am reasonably familiar with javascript and jquery. I know the answer lies in JQuery BBQ pushstates and hashtags. Unfortunately I haven't been able to implement these into my site # http://www.sumoto.com.au. The fiddle is basically this site, scaled down, for ease of explaining my dilemma.
Essentially, how can I save a 'snapshot', of the current css view to a hashtag url, and call this 'save' through the browser back/forward navigation?
I solved my problem!
I removed all the cluttered onclick lines from the a elements. And added id's for each one. The actual hashtag/browser back button functionality is provided by hashchange by Ben Alman, and of course, JQuery.
The revised HTML is:
<a class="boxes" id="link1" href="#box_1">Box 1</a>
<a class="boxes" href="#box_2">Box 2</a>
<a class="boxes" href="#box_3">Box 3</a>
<div id="boxcontainer">
<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
The Javascript
$(document).ready(function() {
$(window).hashchange( function(){
var hash = location.hash;
var lc1 = $("#link1")
if (lc1.attr('href') === hash) {document.getElementById('box1').style.left='200px';}
if (lc1.attr('href') !== hash) {document.getElementById('box1').style.left='0px';}
});
$(window).hashchange();
});
The a links are targeted by the script and assigned a var; "lc1". An if statement checks if the hash of lc1 (the link) is equal to the browser url. If it is then the css manipulation is performed and the sliding movement occurs. If it isn't (for example when the user clicks back) the boxes return to their original (or previous) conformation.