-
Posts
-
hello there!
is there a code i can use to be able to link any text … or image … to open a video up in a lightbox? for LINK settings throughout the theme, it only gives me standard choices like parent page or new page.
this is a general question. no exact page to share.
i want to be able to click on a text link or image and open up a video in a lightbox instead of navigating to another page.
thanks!
chris
Hey vlkwatchman,
To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.
Best regards,
John TorvikHi,
This is how to make a link for an image to open in lightbox, use in a code block element:<a href="http://127.0.0.1/wp-content/uploads/2015/07/portfolio-9.jpg" rel="prettyPhoto" title="">Image</a>To open pages in lightbox using an iframe, create a link like this in a code block element:
<a href="http://127.0.0.1/pages/blank-pages/coming-soon-page/?iframe=true">Page</a>If you link to one of your pages, such as a FAQ, and disable the header, sidebar, & footer for that page, it looks very slick.
This is the format for opening a Youtube video in lightbox:<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>Best regards,
Mikethat’s awesome, thanks!
is there a way to change the size of the iframe? or is there only the standard size? i’d love for it to at least be taller for a page in an iframe. for a 16:9 video, it works perfectly. :)
thanks,
chris
ALSO … will the iframe/lightbox work for EXTERNAL links too? i’m thinking about possibly an amazon item page. when i try the linking method above, only a black lightbox pops up.
info in private section.
thanks!
chris
Hi Chris,
Here is how you can adjust the height and the width of the iframe, you can specify the size in pixels or in percents.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css.avia-video iframe, .js_active .avia-iframe-wrap iframe { width: 80%; height: 80%; }If you need further assistance please let us know.
Best regards,
Victoriahey there,
that css didn’t seem to do anything. i was able to find the quick css. couldn’t find themes/enfold/css/custom.css. where can i find it?
thanks,
chris
Hi,
It should be inside the wp-content folder. So the fuller filepath would be wp-content/themes/enfold/css/custom.css
Best regards,
Sarahah, so am i not able to access this via wordpress? i need to do it outside … like ftp?
thanks,
chris
Hi Chris,
Yep, via ftp, but probably it just does not target the element that you think you’re applying it to. Can you point to the element on the page, that you are trying to adjust?
Best regards,
Victoriahey there,
i’m trying to adjust the iframe of size of a page i want to open … instead of opening a new window. for example, to open up my blog page via the home page main menu. (of course, i would want to disable menu at top of blog page when inside the iframe).
looking at opening may 80% width and height of the browser window.
right now, the iframe is small … the size of a 16:9 video.
thanks!
chris
ALSO … will the iframe/lightbox work for EXTERNAL links too? i’m thinking about possibly an amazon item page. when i try the linking method above, only a black lightbox pops up.
info in private section.
thanks!
chris
btw, i pasted the code given to me (the 80%) into my custom.css via ftp server and nothing is happening. all the same.
.avia-video iframe, .js_active .avia-iframe-wrap iframe {
width: 80%;
height: 80%;
}a page/link that i open in an iframe is still the small size of a 16:9 video. too small for a page.
any other ideas???
thanks,
chris
—
ALSO … will the iframe/lightbox work for EXTERNAL links too? i’m thinking about possibly an amazon item page. when i try the linking method above, only a black lightbox pops up. am i doing something wrong? or is this supposed to happen for external links?
thanks!
chris
I believe the theme uses Magnific Popup so the iframe is wrapped in a class of mfp-iframe-scaler
using…
.mfp-iframe-scaler iframe {width:1000px;height:1000px;}will allow size changes. Change the 1000px to whatever you like. I’ve tried on my dev site and it works ok.
This wont change the aspect ratio of the video.I’ve tried a few external links and they all produce a black screen. Some of the bigger sites so your googles, youtube run framekillers to stop their sites from running in iframes. This maybe what is happening.
An iframekiller looks like… (don’t paste this anywhere it’s just for show)
<style> html{display:none;} </style> <script type="text/javascript"> $(document).ready(function () { if(window.self == window.top) { document.documentElement.style.display = 'block'; } else { window.top.location = window.self.location; } }); </script>Hope that helps a little
TJ
thanks a lot, tjswarbs78! appreciate that. i assume i can use percentages instead of pixels?
should i paste the code in the quick css or the actual custom.css file?
chris
nice! okay, i see the percentages don’t work … but no worries.
** NOW… is there a way to tell the magnific popup to start the iframe up higher? it’s starting smack dab in the middle of the browser window. when i increase the height, it only extends the iframe downward.
thanks!
(and thanks for confirming that your external links to the “big sites” don’t work either.) :)
Hey, yes you can use percentage. Pasting in the quick css should fine. I’ve always added css in there with no issues.Be mindful that any change you make will alter every Magnific Popup iframe and on any device. Setting a width of 80% may look fine on desktop but mobiles may suffer. It’d be worth checking how things look on small screens (if the code actually works)
Give it a bash then come back and let us know the outcome :)
Thanks
Tim
ps – will look at how to move it up and down now.
Ok so these values will depend on the height you give the iframe.
We need to move two things. 1) the iframe itself and 2) the little close button.mfp-iframe-scaler iframe{ top:-155px; }that will move the whole frame up but keep the left and right arrows centre.
div.avia-popup .mfp-iframe-scaler .mfp-close { top: -205px; }that will move the close button up so you can see it.
As I said play with the values
TJ
I’ve had a play about and come up with a slightly different method too.
Both methods have pros and con.
If the first works as you need… good stuff… if not… we have a back up
Thanks
TJ
hey there,
thanks again for all your help! so very close!!
i’d like to set a height as a percentage of the browser window … like we have for the width (size between the two arrows on the popup). i don’t really want to set a pixel value for the height due to all the varying resolutions of monitors. the percentage for width works great.
i added height and max-height to the code you sent … and that allows me to adjust where the iframe starts on the page (how high up). it does not restrict the size of the iframe to the height of the browser window.
any ideas?
thanks!
chris
Yeah i spotted that too ;)
Method two should sort that out. It’ll have to wait til tomorrow though as I’m off home.Just out of curiosity does your site have an ssl? That may also be blocking websites popping up in the lightbox if they are a non ssl site
Thanks
Tim
Well unless someone has been super kind and bought one for you I guess that isn’t causing the issue :)
Method two is below…
.mfp-iframe-holder .mfp-content { width: 100%; max-width: 80%; } .mfp-iframe-holder .mfp-close { top: 50px!important; } .mfp-iframe-scaler { width: 100%; height: 80%; .mfp-iframe-scaler iframe { top: 90px; height:80%; }Fingers crossed for this one
Thanks
TJ
well, not as successful as i’d like to be. i was better off yesterday with the code we had then. i can keep playing with it.
the code we used at the end of the day yesterday was perfect … accept ALL i needed was to extend the HEIGHT of the iframe as a PERCENTAGE of the browser window. that seems to be the only hangup. it likes pixels for height. but not really a percentage.
BTW … on the code you sent today … i had to remove this last part. for some odd reason, it was changing the format of EVERYTHING on the web site! text changed to a different font. and menu items moved. so bizarre!
.mfp-iframe-scaler iframe {
top: 90px;
height:80%;
}so i removed it. :)
thanks again for your help,
chris
Ah keep playing a hopefully it’ll fall in to place.
With the way the Magnific Popup is structured makes editing it a bit complicated.
You have a mfp-contain that sits 100% height and width and inside that the mfp-content.
Inside the mfp-content you have the iframe scaler.It a question of tweaking the right set of properties to get the desired effect.
The last code I sent worked fine on my end. Hmmmm!
TJ
Hi,
the code we used at the end of the day yesterday was perfect … accept ALL i needed was to extend the HEIGHT of the iframe as a PERCENTAGE of the browser window. that seems to be the only hangup. it likes pixels for height. but not really a percentage.
Increase the max width of the lightbox container which in turn increase its height.
.mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 1500px; }Best regards,
Ismaeli have been able to satisfactorily adjust the iframe size to my needs. i was hoping to be able to adjust the ratio for pages in the iframe SEPARATELY of the 16:9 videos. not sure this is possible.
you can go ahead and close this ticket.
thanks!
chris
- The topic ‘Have VIDEO (vimeo) open up in Lightbox from standard text’ is closed to new replies.