jor_magnificManipulation 1.0

[jordan]

jor_magnificManipulation 1.0

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



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

jor_magnificManipulation adds cool (exclusive) additional options to the WB 11 magnific popup lightbox

THE ADDITIONAL OPTIONS:
- style overlay/title/counter/close/arrow(custom image+animate)
- animate lightbox in, out, between by WB CSS3 animation
- iframe scale full height/width global (+max height/width)
- group option - gallery group single iframes into groups
- group option - max scale height/width per grouped item
- allow title for type iframe

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

visit the NEW redesigned jorextensions.com for a demo
see also a new cool template demo (=makeupofstars) that demonstrates jor_magnificManipulation in a templates setup

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

DEMO jor_magnificManipulation: visit jorextensions.com
DOWNLOAD: jor_magnificManipulation

Builder: jordan (6j6)
Code: jordan (6j6)
Relies on code: magnific popup 1.0 - dmitry semenov
EB version: 5.3.2
WB version: 11+
jQuery lib: 1.7.2/1.11.3/(2.1.4)
W3C valid: Html, Xhtml
License: released under the MIT and GPL licenses

HISTORY:
-#-#-#- version 1: -#-#-#- ??/??/??
01. new: -

- for full update history see .pdf in download

[tommy888]

Hi Jordan,

I'm a bit curious what you're working on at the moment? If it's not top secret ....
Your WB extentions are always top-of-the-shelf and give a lot of charm and eye-catching dynamism to a website.
Pablo has recently produced some really useful extentions, namely sliders. Thank you Pablo.

[jordan]

hi tommy888,

no top secret agent I just made a lot of changes and I need the links to point correct
although 1 extension is r-e-ally nice - I like them anyway:)

no surprise here anymore, Pablo always releases great stuff, what's new .

[tommy888]

Thanks Jor,
Truly appreciate your work.

[jordan]

jor_magnificManipulation 1.0

jor_magnificManipulation adds cool (exclusive) additional options to the WB 11 magnific popup lightbox

THE ADDITIONAL OPTIONS:
- style overlay/title/counter/close/arrow(custom image+animate)
- animate lightbox in, out, between by WB CSS3 animation
- iframe scale full height/width global (+max height/width)
- group option - gallery group single iframes into groups
- group option - max scale height/width per grouped item
- allow title for type iframe

visit the NEW redesigned jorextensions.com for a demo
see also a new cool template demo (=makeupofstars) that demonstrates jor_magnificManipulation in a templates setup (=READ MORE buttons in template)


@protectourlands - your request - little time flyby - hope you still enjoy!:)

[BaconFries]

As always 'Great' work jordan for taking the time your time to give something to the members/users of the forum.

[basstuuk]

Jordan Thanks for your time and your work. perfect

[jordan]

@batman:) - as always glad to do, - and glad to hear from you Calum . .

@basstuuk - TNX for your words - enjoy!:)

[BaconFries]

Thanks jordan for another great release.

[protectourlands]

After you helped me with the re-sizing issue a few months back, I was hoping you would find some time to make a manipulation extension for this.

Great work as always Jordan. Most appreciated!

[jordan]

After you helped me with the re-sizing issue a few months back, I was hoping you would find some time to make a manipulation extension for this.

Great work as always Jordan. Most appreciated!

was on my to-do list for sure - was a hard one too - glad it's done . . (happy to do:)

[pajadt]

Finally nicer look on your site , thanks for extension as always

[jordan]

Finally nicer look on your site

yup pajadt, finally redesigned, but he-ya I liked my old site, I love my chickie with the big eye's . .

[pajadt]

Jordan Yes i give you feedback, i not build yet web for self
now serious issue, When u finished http://www.jorextensions.com/wb/extensi ... o/gridrip/

That is great plugin

[jordan]

just released it pajadt:) - see here

[Islander]

Hi Jordan,

This extension is so useful and removes so many obstacles. Great Job and congrats for your new website look.

One thing I'd ask you to see though: the close button; sometimes on default mode it's not showing, a question mark show --- or if you put a custom character( for example the word CLOSE, it would be great to have a control on bold/regular or size)

Would it be possible, maybe in a future version, to have the window show up as a percentage of the view port but at the same time keep the aspect ratio? In such a case, the navigation arrow would stay outside the window thus not remain underneath pictures that request the highest z-index(for example 360panoramas)

[ColinM]

Hi Jordan - absolutely amazing work mate - mind blowing in fact!

[jordan]

hi islander,

the close button; sometimes on default mode it's not showing, a question mark show

question mark ? - you mean the zoom-out cursor on close ? - if so ...
the cursor was an option, I removed it
I changed the cursor style into a pointer cursor as default, I found a zoom-out on a lightbox close button strange
but if you want I can make it an option

or if you put a custom character( for example the word CLOSE, it would be great to have a control on bold/regular or size)

font-size was an option too, I removed it
I don't remember why I removed it, - at that time I was working on jor_gridRip (and many other things)
I probably just wanted to wrap jor_magnificManipulation up:) - (was something about position?-clouded in mist;)
can make that an option too if you want (if possible?)

Would it be possible, maybe in a future version, to have the window show up as a percentage of the view port but at the same time keep the aspect ratio? In such a case, the navigation arrow would stay outside the window thus not remain underneath pictures that request the highest z-index(for example 360panoramas)

I don't understand what your asking here
jor_magnificManipulation does nothing to image type, it only adds scaling to iframe type
could you put up a live example of nav. arrows underneath pictures as you describe - I have never seen this ?
or I just misunderstand ?

[jordan]

Hi Jordan - absolutely amazing work mate - mind blowing in fact!

hello ColinM,

thank you Colin! - always great to hear feedback and - mind blowing - I have not heard before . .
I'll take that . .

[Islander]

Hi Jordan,

About the question mark(?) well it's no longer there; maybe I missed some settings in the plugin. ( What I meant was a question mark (?) appearing instead of the close (X) button. and it did appear at some point)

About the navigation arrow being hidden, http://mauritius360.com/map/regions/alb ... eative.php -click on 360 view and downsize the browser width. I've managed to get the arrows to the near top of the page with the arrow | vertical align attribute as a temporary workaround.


Apart from that, everything works fine.

[jordan]

( What I meant was a question mark (?) appearing instead of the close (X) button. and it did appear at some point)

the close button is just text, maybe you added a question mark by accident ?
I wouldn't know any other reason, - but if you find it happen again just shout out
stranger things have happened:/

About the navigation arrow being hidden ...

the arrows move underneath the 360 panorama because it's a flash object
and the wmode of the flash object is set to - direct - this makes the object sit on top of html objects
for flash to be layered with html the wmode needs to be - opaque or transparent
but this 360 view (3D) flash application is set for high performance (wmode=direct)
I can not change that behavior, that is standard behavior for flash vs html

[rogerl]

Hello Jordon, if you are still out there??
In your extension you allow the default close button to be changed from "x" to some other text based character / s. I want to replace the x with an image. It took ages of Google searching and apparently the following code can be used to achieve what I want, but have no idea how to apply it. Can you help please?

Code: Select all

closeMarkup: '<button title="%title%" class="mfp-close"> <img src="images/close.png" width="44px"   height="44px"/></button>' 

[jordan]

Hello Jordon, if you are still out there??
In your extension you allow the default close button to be changed from "x" to some other text based character / s. I want to replace the x with an image. It took ages of Google searching and apparently the following code can be used to achieve what I want, but have no idea how to apply it. Can you help please?

Code: Select all

closeMarkup: '<button title="%title%" class="mfp-close"> <img src="images/close.png" width="44px"   height="44px"/></button>' 

hello rogerl,

yup - yup still alive, kicking and roaring:)
alive, yes, but I have not worked on any website for over a ?year+ - so I am rusty on code:\
but a custom image is possible yes ...

STEPS:
- use WB File Publisher to add your image
- add custom code by jor_magnificManipulation CALLBACKS (open)

download WB example project - URL REMOVED

like I said I'm rusty, have not tested this cross-browser etc - u need to do that yourself
but this should work just fine me think:)

[rogerl]

Me think you was right!
Brilliant, thanks for the help I would never have got that and it was so hard to find samples of working code even on the source site. I like your close image, I had the classic cross in circle.
One extra thought, under my original scheme I was changing the colour of the X to red on hover. Is it possible to change the .png colour with CSS or do I have to find a red version of the same image and can your code incorporate that.
Regards
Roger

[jordan]

Me think you was right!
Brilliant, thanks for the help I would never have got that and it was so hard to find samples of working code even on the source site. I like your close image, I had the classic cross in circle.
One extra thought, under my original scheme I was changing the colour of the X to red on hover. Is it possible to change the .png colour with CSS or do I have to find a red version of the same image and can your code incorporate that.
Regards
Roger

- the magnific popup script by default does not have a hover function for the close button ??!
- you can not change the color of a .png image, nope - (not standard anyway)

yes, you can "customize" the code further to use 2 images ...

download WB example project - DOWNLOAD HERE

hope this helps!

[rogerl]

Hi Jordon,
Another work of art, thanks.
This is the code I used to change the X to red on hover and to change the default position:

Code: Select all

<style>
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{
    top: -18px !important;
    right: -18px !important;
    color: white !important;
    font-size: 40px !important;
}
.mfp-image-holder .mfp-close:hover, .mfp-iframe-holder .mfp-close:hover{
    top: -18px !important;
    right: -18px !important;
    color: red !important;
    font-size: 40px !important;
}
</style>

Final version with images I used:

Code: Select all

<style>
/* Magnific Popup change close image position and overlay colour to solid */
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{
    top: -12px !important;
    right: -30px !important;
}
.mfp-bg{
    opacity: 1.0 !important;
}
</style>

You can see my test page here:
URL Removed
The "Pedigree" button goes to the Magnific popup while the slideshow is Fancybox3.
Regards
Roger

[jordan]

hi rogerl,

ah oke, I thought you used default only with jor_magnificManipulation, - didn't know u where hybrid . .
if it gets the result you need I'm huppy - it all goOd - cheers!:)

[rogerl]

Thanks Jordon,
I'm very rarely satisfied with the basics. The last software I had allowed a lot of hand coding to improve or enhance and we had a very good mentor on the Forum who showed me what's possible with a bit of thought and knowledge. Getting that knowledge can be the hard part as I have had no formal training but thank God for Google and people like yourself who can share their expertise.
Regards
Roger

[rogerl]

Hi Jordon,
happy Easter to you.
There is a query under general Questions where a chap wants to do multiple slideshows using groups and he prefers Magnific Popup. Does your extension handle that?
https://www.wysiwygwebbuilder.com/forum ... =5&t=80139
Regards
Roger

[jordan]

Hi Jordon,
happy Easter to you.
There is a query under general Questions where a chap wants to do multiple slideshows using groups and he prefers Magnific Popup. Does your extension handle that?
https://www.wysiwygwebbuilder.com/forum ... =5&t=80139
Regards
Roger

hi rogerl,

yes, with jor_magnificManipulation it can be done if - iframe’s - are used
meaning, for each image a single page is created, then they can be grouped in jor_magnificManipulation
I would not go that route if I would have dozens of pictures tho:|

but with a little custom code and/or creativity there are plenty of WA one could try ie. ...

OPT 1.
set the gallery to opacity 0 and layer objects until you have the desired result
(STACK - image > gallery > div to hide excessive gallery items)

OPT 2.
use a dedicated gallery (vertical) for each image, - use custom code to limit the height of the gallery
thus, only displaying the image you want
ie.
<script>
$(function() {
var imgHeight = $('#wb_PhotoGallery1 .thumbnail:first').height();
$('#wb_PhotoGallery1').css({'height':imgHeight+'px','overflow':'hidden'});
});
</script>

OPT 3.
use an image and a dedicated gallery for that image
set the gallery to hidden (=add display:none to gallery - custom style)
use a javascript event (custom jQuery) to trigger the gallery item on the image
- $('#wb_PhotoGallery1 .thumbnail:first a').trigger('click')


personally I would go for option 3;)
but I don't know what that person exactly want to achieve, these are just some general WA

cheers!:)

[kris33]

Bonjour,

Je ne sais pas ou poser ma question alors j'essaye ici puisque ça parle des extensions Jor.
Je viens de découvrir ces extensions très pratiques, j'en ai téléchargé quelques unes comme jor_fonteffect mais ça ne fonctionne pas. Est ce que ces extensions sont compatibles avec la version 14 de wysiwyg web builder?

Merci d'avance

Hello,

I do not know or ask my question so I'm trying here since it's about Jor extensions.
I just discovered these extensions very practical, I downloaded some like jor_fonteffect but it does not work. Are these extensions compatible with version 14 of wysiwyg web builder?

thank you in advance

[BaconFries]

@kris33 This is the incorrect place to ask please repost all questions at the following
jor_fonteffect 3.0

[rogerl]

Hi Jordon,
Have been trying to tidy up how the magnific popups appear in mobile phones. Have made some progress in that by using this code in settings:

Code: Select all

fixedBgPos:true,
fixedContentPos:true

The overlay, iframe and contents now centre and cover the whole screen whereas before they covered only part of the screen.
My remaining problem is the iframe itself. On desktop it appears per its sizing of 950 x 600 but on mobiles the frame is squished in landscape mode and the image inside is reduced in size to stay within the frame.
Can you suggest a way around this that we could incorporate into your extension? I was thinking something like a media query that dealt with the height in landscape mode.
An example is here:
https://www.whiteshepherdsnz.com/memtzarPuppies.html
If you click on the Dam or Sire buttons.
Regards
Roger

[jordan]

Hi Jordon,
Have been trying to tidy up how the magnific popups appear in mobile phones. Have made some progress in that by using this code in settings:

Code: Select all

fixedBgPos:true,
fixedContentPos:true

The overlay, iframe and contents now centre and cover the whole screen whereas before they covered only part of the screen.
My remaining problem is the iframe itself. On desktop it appears per its sizing of 950 x 600 but on mobiles the frame is squished in landscape mode and the image inside is reduced in size to stay within the frame.
Can you suggest a way around this that we could incorporate into your extension? I was thinking something like a media query that dealt with the height in landscape mode.
An example is here:
https://www.whiteshepherdsnz.com/memtzarPuppies.html
If you click on the Dam or Sire buttons.
Regards
Roger

hi roger1,

sorr-aye for a late reaction, I did not get a mail notification for this quest?:\

I don't see/understand the problem ?
you say the content (image) of the iframe is reduced in size ?
I have never seen content automatically resize inside an iframe (except a background image)
if the content is not RWD then an iframe will create scrollbars containing it's content (if enabled)
so, I don't understand your query ???

NOTE:
note that I have not been building any web site for more then a year now
a year not web building can be a life span change, I am very rusty on code

[rogerl]

Hi Jordon,
I gather there are a couple of problems with iframes and mobile OS.
1 - don't like "fixed"
2 - presentation of iframe gets distorted and needs scaling. Something to do with height and our phones and being able to switch dimensions from portrait to landscape.
Since posting last I came across some more code which works quite well in that it retains desktop appearance and tidies up the mobile appearance. So removed width & height settings from lightbox selection and added this code to page html under Head tag:

Code: Select all

<style>
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 850px;
max-height: 680px;
}

.mfp-iframe-scaler {
width: 100%;
height: 0px;
padding-bottom: 75%;
}
</style>

There is quite a lot of discussion on Google and Magnific sites on the subject. I came across this in a reply from the originator of the software.
I'm still not sure I've got it right yet and there looks to be duplication of stuff already covered in your extension ( i.e. max-width, max height).
I have amended the code in the url given above so you can see the difference now.
One thing I noticed is that Chrome doesn't handle the embedded border well while Firefox has no problem. Haven't checked it out on apple yet. (My future Daughter in law has disappeared to USA with both her Apple Mobiles for a week or so. The only time you want or need an Apple and there not available!)
Regards
Roger

[jordan]

(My future Daughter in law has disappeared to USA with both her Apple Mobiles for a week or so. The only time you want or need an Apple and there not available!)

I don't have access to an ios either so it's hard for me to test anything
I actually still don't know what the problem is that you have, cause I don't see it

all I can do, maybe, is create a customized version of jor_magnificManipulation
IF - you can tell me what to add - (as YOU tested)

nothing more I can do

[rogerl]

I do most of my testing for mobiles using Chrome on my android (Samsung) as Chrome is the most fussy along with Apple. Firefox never seems to give much trouble.
Have a look at this page on mobile (chrome):
https://www.whiteshepherdsnz.com/mwsPuppies.html
When you click on the Dam & Sire buttons you will see the frame is pretty good in portrait but in landscape its squished out horizontally and the contents have to scroll. Also positioning in viewport not correct.
Now have a look at:
https://www.whiteshepherdsnz.com/memtzarPuppies.html
Here I have added the changes outlined above, positioning is sorted and recover the proportionality in Landscape but somehow I have managed to knock out the embedded border. This same url in Firefox and the border is ok.
This is what I'm trying to sort out.
Regards
Roger

[jordan]

hi rogerl,

aah ok, now I see your problem, thanks for the demo's ...

but, jor_magnificManipulation AFAICS already solves that problem !?
here is my easystart project online - jor_magnificManipulation DEMO
you can see jor_magnificManipulation already scales/positions the overlay full into place

I don't know how you have setup jor_magnificManipulation
take a look at my DEMO project in the download and see what happens when you match those settings
- look at the GLOBAL and Group SCALE options

- on your page I see you have set the Global scale "max-width/height" option in the extension to 680/850
- try setting both settings to - DEFAULT

does that solve the problem ?

[rogerl]

If my link settings are:
fixedBgPos:true,
fixedContentPos:true
Then my centring issues are fixed. No amount of playing with your extension could solve this for me.
If I set the global scaling to default I then got a pretty good presentation with a little scrolling. If I set anything other than default then the old presentation issues surfaced:
https://www.whiteshepherdsnz.com/mwsPuppies.html
Also with this fix the desktop version now has a scroll bar

[jordan]

hi rogerl,

if you want me to help with jor_magnificManipulation then please first remove your custom code
I don't know what that code is doing, - it might work against jor_magnificManipualtion working correct !

and again I don't understand the problem now
because when I look at your last demo (scale set to default) it displays correct for me now
- the whole screen is covered (overlay/lightbox)
- the content of the iframe is in overflow so it creates scrollbars, which is correct behaviour

then what is the problem ?

ie.
if the height is the problem, then increase the global scale height in jor_magnificManipulation
set it to ? - 2000 or whatever height you want

does that solve the problem ?

[rogerl]

Per your suggestion, have made global height 700
This fixed the desktop version but now the mobile version in landscape is squished.:
https://www.whiteshepherdsnz.com/memtzarPuppies.html

[jordan]

Per your suggestion, have made global height 700
This fixed the desktop version but now the mobile version in landscape is squished.:
https://www.whiteshepherdsnz.com/memtzarPuppies.html

sorry, I do not understand what you mean by squished
I don't see anything out of they ordinary, landscape nor portrait ?
to me it displays just fine - can you maybe post an image of what you see as squished?

note:
please remove custom code if you want me to help you with a problem you experience with my extensions!

[rogerl]

I'll send something to my test site soon. in meantime here is link to screenshot of squished iframe:
https://www.sendspace.com/file/pz7ygn
You'll need to scroll down a bit to see it as pdf created large page.

[rogerl]

OK I have taken out all my extras i.e. embedded border, placement of close button, height, width, max-width, max-height, opacity and overlay colour, also the code to rectify"fixed" position of overlay and iframe. I have left the callback code you did for me.
https://www.whiteshepherdsnz.com/NewSit ... ppies.html

[jordan]

I'll send something to my test site soon. in meantime here is link to screenshot of squished iframe:
https://www.sendspace.com/file/pz7ygn
You'll need to scroll down a bit to see it as pdf created large page.

pfff, that is not how it displays for me ?!
there are so many strange things I see in that image
not only the lightbox height is strangely cut, but it's iframe content width is cut in half ????
how does an image automatically gets cut in half, that's not squished, that's magic:/

it will be hard for me to find a solution for this if I can't see/test it myself:\

btw is that pdf image taken in landscape, that looks like portrait to me ?

- (no guts no glory try)
can you take another image of the page, now without your custom code
- 1 x landscape and 1 x portrait
- also set the Global scale height in jor_magnificManipulation to 700 as you did before
just to be sure the same occurs without it

[rogerl]

OK will have ago tomorrow, not feeling the best, having early night.

[rogerl]

OK we're on a roll!
Screenshots, landscape and portrait from Chrome on Android (Samsung J7 Pro):




I have removed my stuff and reinstated the global height of 700 as requested.
https://www.whiteshepherdsnz.com/NewSit ... ppies.html
I've uploaded my test project file "fancy.wbs" file to Sendspace - The page in discussion is "mwsPuppies":
https://www.sendspace.com/file/eq3d11

[jordan]

OK we're on a roll!
Screenshots, landscape and portrait from Chrome on Android (Samsung J7 Pro):




I have removed my stuff and reinstated the global height of 700 as requested.
https://www.whiteshepherdsnz.com/NewSit ... ppies.html
I've uploaded my test project file "fancy.wbs" file to Sendspace - The page in discussion is "mwsPuppies":
https://www.sendspace.com/file/eq3d11

your on a role indeed:)goOd, but ...

1.
you have set your online demo formatting to minify
thereby I can not easily see what is happening on your page - (de-minify please)

2.
second your fancy.wbs is made in WB14? - I have WB14, but not installed, so I can not open it:\

3.
third your screen captures do tell a story that I partly can see myself
in portrait I can see somewhat the same occurring on your site, not in landscape tho

probable solution:
your site is 1250px in page width !
reduce your site page width to max. 980px - (preferable smaller)
re-order content to fit that space

does that fix the problem ?

[rogerl]

you have set your online demo formatting to minify
thereby I can not easily see what is happening on your page - (de-minify please)

Now that you mention this I noticed this minify thing the other day. Appears to have been introduced when I switched to V14 but no idea where the setting is. Any ideas?
On some of my pages I decided not to do break points as no full background images, Perhaps I'll do that conversion and see what happens.
Thanks for your patience.

[jordan]

Now that you mention this I noticed this minify thing the other day. Appears to have been introduced when I switched to V14 but no idea where the setting is. Any ideas?
On some of my pages I decided not to do break points as no full background images, Perhaps I'll do that conversion and see what happens.
Thanks for your patience.

minify is:
Tools > Options > HTML > formatting

just try it on a separate small project with max. width 980px and jor_magnificManipulation
no hurries