Here's my page: http://ilijaveselica.com/Gallery/GetCroatiaFavPhotos
I'd like to implement this page into another website. I tried with iframe but lightbox (fancybox) opens only within iframe, not whole page. Any idea how can I solve this without much pain?
Here's how it looks: http://www.croatia-photography.com/
The only way I can imagine of doing that is including the gallery elements within the fancybox script itself.
So, in your page http://ilijaveselica.com/Gallery/GetCroatiaFavPhotos, instead of having this :
$(".fancybox-thumb").fancybox({
// API options here
});
...and all your hidden html anchors for each image of the gallery, have something like this :
$('.gallery').click(function(e){
e.preventDefault();
parent.$.fancybox([
{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}
],{
// API options here
}); // fancybox
}); // click
Notice that we are providing the href and title within the brackets. Also notice that we used parent.$.fancybox to indicate that fancybox will open in the parent page and outside the iframe.
Then the only html you would need to open the gallery outside the iframe is :
<a class="gallery" href="javascript:;"><img src="{thumbnail}" alt="" /></a>
For further reference and DEMO (see update), check this https://stackoverflow.com/a/8855410/1055987
Related
So I have been searching for a good plugin but was unable to find any - On the homepage of the WP website that I am working on, I want to hide half the page and want to add a button and in middle of the page at the end of the first half that would say "Show More" - When the visitor clicks that button, the rest of the page should show. The button would then go to the end of the page saying "Show Less". The page is static and is just some text and images, nothing complex.
You can do this putting a html block and writing:
<!--nextpage-->
you can read more about this on:
https://codex.wordpress.org/Styling_Page-Links
and to get other solutions you can try:
https://es.wordpress.org/plugins/automatically-paginate-posts/
https://es.wordpress.org/plugins/sgr-nextpage-titles/
https://es.wordpress.org/plugins/page-links-single-page-option/
I hope this will help you to get what you want.
You must create a div with css display none. And then in your html code put an element with a jquery behaviour to display the previously div created. It will be something like:
$(document).ready(function(){
$('#show_content_button').click(function(){
$(this).hide();
$('#content_hide_on_home').show();
});
$('#hide_content_button').click(function(){
$('#show_content_button').show();
$('#content_hide_on_home').hide();
});
});
#content_hide_on_home { display:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Text on home</p>
Show content
<div id="content_hide_on_home">
Your extra content on home
Hide content
</div>
I hope this is what you're searching.
I made a script that connects to a WP video plugin and generates a floating menu over it. The script works fine inside the WP page but it does not work when I use the plugins SHARE&EMBED function when it generates a link to my video that is used to incorporate it into another page structure. When embedding the into the outside webpage my custom Js script does not work. Better to say it works because my js and css files get connected to the head of the new page and the menu is present inside the structure of the page but it is covered by the new div elements generated by the plugin.
WordPress video plugin that I use generates an iframe tag. When I examine the page in which I embed the link to the video, in developer mode, I see that the is placed inside a tag that is outside the page's tag. When I try to access the Iframe tag with document.getElementsByTagName("iframe") or by its' id I get an error message that the element does not exist. I tried to use "document.addEventListener('DOMContentLoaded',..." and "if(window.fwduvpPlayer0)..." but it still i can not access the the tag with my video.
document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
generateMainMenuButton1();``
if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
shareAndEmbed();
}
});
document.addEventListener('DOMContentLoaded', function displayMenuBtnOverVideo() {
generateMainMenuButton1();``
if (window.fwduvpPlayer0 && document.getElementsByTagName("iframe") != null) {
shareAndEmbed();
}
});
function shareAndEmbed() {
let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");
getIFrameDiv.insertAdjacentHTML("beforebegin",
`<div class="show-menu top-left" id="menuBtnDiv1">
<button class="btn btn-sm" id="menuBtn" onclick="videoOverlayMenuGenerator1()">
<span class="iconify" data-icon="whh:menu" data-inline="false"></span><span class="menu-button-title"> MENU emb</span>
</button>
</div>`
);
The idea is that I want my script to access he iFrame tag by its' id and include before it the div tag with the code for my custom menu.
You are selecting the document property within document. That property does not exist.
let getIFrameDiv = document.document.getElementById("fwduvpPlayer0youtube");
Maybe you tried to get the <html> tag which is the documentElement property in document.
documentElement only has three methods to select elements.
getElementsByClassName
getElementsByTagName
getElementsByTagNameNS
In order to access to a element that is not into the tag, you can try to use this options:
window.parent.document.getElementById()
OR
window.top.document.getElementById()
Maybe, with this you would can to access to this elements.
I hope that this, help you.
Regards
I'm using the extjs library. I've got a blank panel and I want to load another one of my ext projects into it with an iframe. Here is my function (called from a button), "thepanel" is my blank panel.
function(button){
var div = document.getElementById('thepanel');
div.innerHTML = "<iframe src=\"../../../project2/?&type=grades&gradeitem1=40691&\"></iframe>";
}
I can see the GET request in firebug's console when I run the function and all my second project code/data all shows up in an iframe when I look a the HTML in firebug but nothing new shows up in the browser. Any ideas of what could be keeping my iframe's contents from showing
I am using MVC architecture, here is the code that declares my panel:
items:[{
xtype:'panel',
itemId:'two',
id:'thepanel',
region:'center',
}]
UPDATE: I've tried moving the iframe to the html config option of the panel instead of adding it through jquery with a button click. Again, I can see the code from the url in the iframe show up in firebug but nothing shows up in my application. Here is the code declaring my panel:
xtype:'panel',
itemId:'two',
id:'thepanel',
region:'center',
html:'<iframe src=\"../../../extjproh2/?&type=grades&gradeitem1=40691\"></iframe>',
height:400,
width:400,
Ended up using this plugin from the sencha forums:
http://www.sencha.com/forum/showthread.php?110311-iframePanel&p=943573#post943573
see the snap shot and you will understand what i mean.
You should locate the iframe on the page using your browser's code inspection (CTRL + U generally), and then use jQuery (because its convenient) to remove it. So you should add a script like that in your page: $(function() { $('#pubPath').remove(); }); or switch to another website.
Saw alot of manual loads of iframes in answers, but I need the page to automatically load the fist menu option and I am using nyroModal (class=iframe which opens it iframe style with nyroModal).
The reason for this is the menu for a bunch of other iframe content is in this iframe as well and I'd like it to stay open and the menu stay in this auto opened iframe.
Hopefully this makes sense to someone.(?)
You can use the manual function inside the event handling:
$(window).load(function() {
// my code to open manually an iframe using nyroModal
});
You can get the snippet to open the iframe at this page: Open iframe manually in nyroModal