jor_fancyboxManipulation 2.0

[jordan]

jor_fancyboxManipulation 2.0



=======================================================================================

jor_fancyboxManipulation creates easy acces to the WB fancybox 1.3 lightbox addon options
it also adds many customized options - some of it's features ...

the standard options:
01. effects (on lightbox enter/exit/change/(fade/easing))
02. settings (padding, margin, cyclic, close on- etc etc)

customized options:
01. static navigation arrows
02. title display on hover only
03. extensive styling (remove shadow, lightbox color/transparent, title color/size/family etc etc)
04. counter display
05. autoplay (start/stop/forward-backward)

create as many lightbox styles per object, per page as you you want, get fancy!
jor_fancyboxManipulation relies on the WB fancybox 1.3 lightbox addon of janis skarnelis
jor_fancyboxManipulation can be used with many WB components
WB Gallery/SlideShow/YouTube/-Image/Rollover/Text/Shape/NavigationBar etc

=======================================================================================

DEMO jor_fancyboxManipulation: visit jorextensions.com
DOWNLOAD: jor_fancyboxManipulation

Builder: jordan (6j6)
Code: jordan (6j6)
Relies on code: fancybox 1.3 - janis skarnelis
EB version: 5.2.0
WB version: 10+
jQuery lib: 1.7.2/1.11.1/1.11.3/(2.1.1/2.1.4)
W3C valid: Html, Xhtml
License: released under the MIT and GPL licenses

HISTORY:
-#-#-#- update 1 -#-#-#- 14/feb/16
01. fix: WB11 - lightbox color/transparent fix
02. fix: WB11 - title fixes - outside(pos+style)/inside(pos+style)/over(resz.width)
03. fix: WB11 - margin fixes
04. fix: WB11 - shadow remove fix
05. new: autoplay time line indicator
06. note: compiled with EB5.2 - (=WB10+)
07. addit: other minor improvements

[tommy888]

Marvellous! Thanks Jordan

[jordan]

hehe glad you like tommy888, go get fancy:)

[jordan]

jor_fancyboxManipulation 2.0 - UPDATE

jor_fancyboxManipulation 2.0 fixes compatibility with WB11 and adds a cool autoplay line indicator

01. fix: WB11 - lightbox color/transparent fix
02. fix: WB11 - title fixes - outside(pos+style)/inside(pos+style)/over(resz.width)
03. fix: WB11 - margin fixes
04. fix: WB11 - shadow remove fix
05. new: autoplay time line indicator
06. note: compiled with EB5.2 - (=WB10+)
07. addit: other minor improvements

for full update history, demo and download see top post

[protectourlands]

Thank you for the update Jordan. I love this extension. Brilliant!

[jordan]

Thank you for the update Jordan. I love this extension. Brilliant!

Gu GoOd!, always good to hear protectourlands . .

[protectourlands]

Hi Jordan

If you ever feel like looking at the new Magnific popup lighbox option, I for one would be very grateful to see another of your amazing manipulation extensions for it. I'm sure others would as well. Like Fancybox it looks like it has quite a few options, plus it has preset padding values that don't work well for some applications. viewtopic.php?f=5&t=70865

[jordan]

Hi Jordan

If you ever feel like looking at the new Magnific popup lighbox option, I for one would be very grateful to see another of your amazing manipulation extensions for it. I'm sure others would as well. Like Fancybox it looks like it has quite a few options, plus it has preset padding values that don't work well for some applications. viewtopic.php?f=5&t=70865

hello protectourlands,

at the moment I have so many projects I work on, too little time
but, if I have some time I will surely have a look at it, it seem to have a lot of nice options to play with:)
future project maybe ?

=======

preset padding ?
the padding you mean relates to magnific popup in combination with an iframe I assume
you want the height to remain full height, and not scale in ratio, correct ?
if so, (quick) looking at the code I think this has to be set by script
the CSS sets the padding-top in percentage, therefore it scales height by width as well
you want to limit the padding-top to only scale by window height
if you want I can give you code that will do that, that is, if that is what you mean with padding ?

[protectourlands]

Hi Jordan

Yes that is exactly what I meant by padding. The iframe appears too short relative to the viewport height. If you can post the code to work around this I would be very grateful.

[jordan]

hello protectourlands,

woeps, this was more work then I expected:) - but I think this will do the trick
add this between Page HTML <HEAD> ...

==========================================================
<script>
$(function() {

var SETFWID = false, // --- ENABLE - FULL WIDTH - AS WELL - true/false

$window=$(window);
$window.on('resize orientationchange',function(){
$('.mfp-iframe-scaler').css({'padding-top':$window.height()-80+'px'});
});
$.magnificPopup.instance.open=function(data){
$.magnificPopup.proto.open.call(this,data);
$('.mfp-iframe-scaler').css({'padding-top':$window.height()-80+'px'});
if(SETFWID){$('.mfp-content').css('maxWidth','5000px')};
};
});
</script>
==========================================================

or download example project here

hope this helps!

[protectourlands]

Jordan I cannot thank you enough. I'm so sorry it turned out to be more time consuming than originally thought. Had I known I would have held off and continued to use Fancybox with your extension for it.

You'll be happy to know your script works perfectly! The iframes open full height in all viewports. I appreciate this so much!

[jordan]

no problem protectourlands, just glad it's working