I have a problem with the iframe from flickr.
I have a website in which i embed an iframe from flickr in order to display a gallery without having to worry about creating slider and resizing pictures and extracting thumbnails.
Also since this website is for a friend of mine he wants to be able to change his pictures on his own without having to ask me all the time to change the website.
so the solution was to use an iframe from flickr where he created his galleries and i embeded his galleries into the website.
This is the code:
<div class="six columns">
<iframe src="https://www.flickr.com/photos/127583121#N07/15148138666/in/set-72157647343739461/player/" width="500" height="281" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
</div>
My problem is that when a viewer clicks on an image then he is redirected to the flickr website therefore he is gone from my site.
Is it possible to make it when a user clicks on the iframe to open the flickr website in a new browser window so that the user is not lost from my site?
Thank you in advance
Try this:
<div class="six columns">
<iframe name="myFrame"></iframe>
</div>
$(document).ready(function () {
window.open("https://www.flickr.com/photos/127583121#N07/15148138666/in/set-72157647343739461/player/", "theFrame");
});
It will open a new pop-up window and user can interact separately with images in that.
DEMO
UPDATED SOLUTION
After a lot of search and tries, I finally made a solution which is most close to what you want. It will just require a click to confirm from user. If user clicks stay on page the iFrame will be opened in another window.
$(document).ready(function () {
window.onbeforeunload = function () {
window.open("https://www.flickr.com/photos/127583121#N07/15148138666/in/set-72157647343739461/player/", "theFrame");
return "";
}
});
<div id="dv" class="six columns">
<iframe id="myFrame" name="myFrame" src="https://www.flickr.com/photos/127583121#N07/15148138666/in/set-72157647343739461/player/"></iframe>
</div>
UPDATED DEMO
I'm not sure if it'll work for you but, if you get the content of galleries as HTML using Jsoup's API for example. You can change the content as you need.
I did already this in a project I worked, in my case, the images' path was absolute
and I had no problem to open it into a dialog.
Related
I wanted in my store product pages to have a gallery button that opens up a gallery of pictures of that product they are looking to buy. Only problem is that the popup button cant seem to load in the content I want to show for some reason. I know that these popups work since it works successfully with loading in sketchfab iframes of models like shown below.
Only issue now is that the popup button for my gallery does the following shown below...
Through a lot of testing I have discovered that the photo gallery embed will only work if the popup is quickly opened before the web page is loaded. Although this is true once the popup is closed and reopened it is then broken again. Below is an image of the embed working in the popup.
Through more testing I have also tested if the code can run inside the product description of my store. In doing so I have found out that it can run inside the product description. See the image below showing that it is working
knowing all this, the only issue would have to do with both the google photos embed, and the popup code and how they work together. The popup codes are found at the following link. they are made by dimsemenov.
Popup codes I use
I believe as an assumption the issue causing this is that this embed is a google photos displayer that constantly needs to be refreshed and updated as it is synced with google photos. What I know for a fact is with the way my popups are coded, they are loaded in when the page is loaded and are not refreshed or updated, and are only updated when the page is reloaded. I know this because if I change the code for inside the popup, and then after saving changes open a popup the changes arn't reflected inside until I refresh the entire page. In saying this though.. when I open my sketchfab iframe it does have the loading bar showing as though it is loading off sketchfab site, I cant seem to understand if this is the problem, why my photo embed cant do the same. This is only an assumption and am not sure if this is causing the problem. However if it is the problem is there a way to fix this issue. below is the embed google photos code used for one of my products.
<script src="https://cdn.jsdelivr.net/npm/publicalbum#latest/embed-ui.min.js" async></script>
<div class="pa-carousel-widget" style="width:100%; height:480px; display:none;"
data-link="https://photos.app.goo.gl/KvdTmPLrewaZ4VvWA"
data-title="Shirai Ryu"
data-description="10 new photos added to shared album">
<object data="https://lh3.googleusercontent.com/dDpV4uY9zN6x742KmOzaE5ZxDdJlU6TVD4NnhsyTIw6vFuhzLpxDGDGal3JvvsiGDGZyi7t2eeE4RwjbfvkNyf9Av8-yDSjXXs-Xtlm9CXkytft1CJg9ZN6XwCTy7xMd0ek0qrrXKA=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/G8CDlUSGKAcJwbMNyVBPM8mfd6Iq6XlFP_3ryqhrNvolSPJYNckZwpCpmTfGatMGxtImKJTkQO_tBXAzFJQ2kgDtffMA8x7Dx-bE5GF12b7JuEkyUO7KvGJq7OvLk4hxtAJ3PaD1yw=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/Lt_cMOBt1Ua3bOTomjIQL4Rrldt3aGzKXvlVygFwSth5ObrkulhAhhSOnsZrgru4ac1_2ZQkAst-7NqZsyAHDnR7QHlYhptWVscK4pm5RKH22K3dZbr0eLdeU6nozBZl5jD-RfSTLQ=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/3Eh-1UUWg2Ny3flhQkUqbw9P8zO4_XzIfuyH0KmRNSz8JvX0pGdGYvhgs1r_LuFhPdJs9pmjAce2fyttsqLZVfC1pPtluRNPu1kmOc9VxwJnsPgXpnLdthyR1ckOmcjArDMep1VIKg=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/alnf2b0Ug47vNxihL-i_bxhV-H-o3fuHGS1F0LICzQjdejJwWF8kUPsZp0BjTKFfHhPAgPJau0khVpnTk5RaI8z1PDGO411-4BwHPTPEnAxRRhDT3MyW2IsmwxpTStCNoeS9upuiiw=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/i-10hdpYEH6dZ-hAEMRUr2X-xNgFlIwK93bh0lb2Fc-9W15NFksRSEQePv3com6wUzCJt--x9rtbcLO35Ox7diPwT7lhbRKOL8-DD4KVdZDoC5BYJXbbxu-ADxAxY-T_nEUsz6Jh4A=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/Zj9I78oiH12745U5sHJteoSap9KEL8pNrUIWfwtG1YspZ9taxcMbSRn2UCY-GbxqJn5h51yZIOpb708JqBV1eQuzwSxTNfCmNB9UJqZxJfehCgJ2Uo4RfF-RVctGxC4yrie93necMQ=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/1NNepe283WSYo_8pJX5sloiwcEy2uE8MMGi4V_bLHoMV-By19oX4XTmt6sVHFYyt7-2M3LInsXmyZmQ0RlQst3kiQmt2_fNU9cljFxJdPHJwYVr0NRY1aGsg0ky7H0RQ3YTfir8lSQ=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/7eoT9bKBkDDndxTHD6hDTydt9cd2G_Rl40Yy_r3m_PvQ8GB7w5lPLRQ7da8zNy4u2nU0UFgc2LSrSlO6o4qdAN6UmEkz7CsJ8lO-zVl_L5-bfSye3tItl0U4x1VBnV2yXEspbAxOBQ=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/uPt0BhapfibUCEaEg2X0Quk1C5cvCFYYst10CHcTNDb-NWlmr4rdt7aADO8jrQLrPONVb0vf8nMHxnhxcjmtd5NQlFESyacuifQTTexhHyh8N3RWDtCOP5xZNpl8t4cga8UcQpbRlg=w1920-h1080"></object>
</div>
If it helps here is more code, which is just showing the position where I have the embed placed within my popup. It is called in as {{ description_arr1 }}, from my product description. I am using Magnific Popup for my popups.
<div id="Image-Gallery" class="mfp-hide">
<div class="row">
<div class="gallerycolumn"></div>
<div class="gallerycolumn"></div>
</div>
<div class="row">
<div class="galleryleft" style="background-color:#000000;">
{{ description_arr[1] }}
</div>
<div class="galleryright" style="background-color:#000000;">
<div class="acerill-custom-form" data-form-id="ca3d163c-517f-4dda-8e8c-202a1cb2e3dc"></div>
<script type="text/javascript" src="https://custom-forms-client.acerill.com/js/custom-forms-v2.js"></script>
</div>
</div>
</div>
<style>
#image-gallery {
border: 0px #555 solid;
background-color: #ffffff;
max-width: auto;
margin-left: auto;
margin-right: auto;
}
</style>
I greatly appreciate all the support.
Kind Regards
Nicolas Murdaca
We have a page that has a video on it, embedded with an iframe.
The iframe js code for the player has the following code in it:
m.default.focus(function (e) {
var t = e.playButton;
(0, y.focusElement) (t)
})
This basically makes the play button visible on the screen if it isn't already. Which is fine for stand alone videos, but not on a page where we have the video embedded.
What it does framed in on our page is cause the entire page to scroll to that content.
We'd like to prevent that if possible.
Here is the iframe code:
<div class="embed-responsive mb-5 embed-responsive-16by9" id="myFrame" style="height: auto;">
<iframe allowfullscreen="" class="embed-responsive-item" sandbox="allow-scripts allow-downloads-without-user-activation allow-same-origin" src="https://sourcefile.onthesamedomain.com" title="Video"></iframe>
</div>
We've tried the scroll to 0,0 on the parent but that didn't work.
Apologies, but I forgot to add that this is only an issue in Firefox. The other browsers work with the attributes on the iframe.
Any help would be appreciated.
The 3rd party owner of the js within the iframe ended up providing a fix. There was no way we could do this without the screen scrolling back and forth.
Many times I am only interested in the first portion
and would like to make a "collage", say of arriving buses at nearby stops and fit more on a small screen.
I found I can use "iframe", but having the cursor in the frame of course scrolls the frame
rather than scroll me further down the web page. Just for variety I include an image too.
Is there a better way to post "heads" of web pages? (I probably know to little about CSS and Bootstrap, etc.)
Running the snippet here shows only the traffic cam, but pasting it for example into http://htmledit.squarefree.com/ or local html file runs just fine. https://codepen.io/pen/ shows pugetsound "refuses to connect".
<div class="thumbnail-container">
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_14961" frameborder="0"></iframe>
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_15540" frameborder="0"></iframe>
<img src="http://www.seattle.gov/trafficcams/images/WSB_Midspan_EW.jpg" width="400" /> <!-- or a placekitten.com ;-) -->
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_19930" frameborder="0"></iframe>
</div>
Just to show that there are other example applications I run into frequently
would be the weather for the next 2 days only, or the temperature for the last few days.
An answer to above would solve many problems.
height=380px http://forecast.weather.gov/MapClick.php?lat=47.578&lon=-122.403&FcstType=text&TextType=2
height 120px https://atmos.washington.edu/~neal/uwp/index72.cgi
If the issue is you do not want the iFrame to scroll, you can try:
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
I'm currently developing a website and custom theme in WordPress. On some of the Pages, a YouTube video will be embedded within the Page. To make it easy to update, I've used a plugin for embedding YouTube videos so when the user pastes the video URL, it embeds automatically.
The embed results in the following HTML code:
<div class="fluid-width-video-wrapper" style="padding-top: 56.25%;">
<iframe id="_ytid_72976" class="__youtube_prefs__" frameborder="0" mozallowfullscreen="" webkitallowfullscreen="" allowfullscreen="" type="text/html" src="//www.youtube.com/embed/fNKwb6dvNTE?enablejsapi=1&autoplay=0&cc_load_policy=0&iv_load_policy=3&loop=0&modestbranding=1&rel=0&showinfo=0&playsinline=0&autohide=1&theme=dark&color=red&wmode=opaque&vq=&controls=2&">
</div>
Now, I'd like to combine this with a custom thumbnail. So basically adding an image and when the image is clicked, it will be replaced with the embed with jQuery, and the video will autoplay after being replaced. Preferably with by adding an image into a div or something, because I don't want the user to have to alter the CSS or a script each time a new Page is added.
I've seen several similar questions but I couldn't quite figure out how to make it work with this plugin.
Thanks in advance!
I am building a popup-like page, which could be included into other sites. I use cookies (created with PHP commands) and I would like to set that this popup shows up only once in a while (so the cookies would be timed).
I am using bPopup for the popup window, so it's Jquery based. The problem is that i cannot close it.
I managed to make the content not loading in case there is a cookie, but i cannot find anny command to close the popup.
I have googled a lot, tried with parent.closeIFrame, but that didn't worked.
Do you have any idea how could i code this?
Here are the code parts:
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a href="#"class="b-close" style="position:absolute; margin-top:5px; margin-left:550px;"><img src="./image/close.png"><a/>
<iframe frameBorder="0" name="iFrame" width="600" height="500" src="welcome.php" scrolling="no"></iframe>
</div>
The welcome.php is a simply html file with analytics, so there's no much possibilities.
I managed it with an exit command to get an empty popup window in case there is cookie found, but i cannot hide the whole window, which would be annoying for the users to get into the same popup over and over again.
Please help me finding a great solution for this case.
Thanks in advance!
From the docs
Public Function
close()
Closes the popup.
Usage:
$('element_to_pop_up').bPopup().close(); // Version 0.4.0