jor_magnificManipulation 1.0
Re: jor_magnificManipulation 1.0__**NEW**
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)
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)
Re: jor_magnificManipulation 1.0__**NEW**
Hi Jordan - absolutely amazing work mate - mind blowing in fact!
Yours truly
Colin M
Western Australia
Colin M
Western Australia
Re: jor_magnificManipulation 1.0__**NEW**
hi islander,
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
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?)
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 ?
question mark ? - you mean the zoom-out cursor on close ? - if so ...Islander wrote:the close button; sometimes on default mode it's not showing, a question mark show
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
font-size was an option too, I removed itIslander wrote: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)
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?)
I don't understand what your asking hereIslander wrote: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)
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 ?
Re: jor_magnificManipulation 1.0__**NEW**
hello ColinM,ColinM wrote:Hi Jordan - absolutely amazing work mate - mind blowing in fact!
thank you Colin! - always great to hear feedback and - mind blowing - I have not heard before . .
I'll take that . .
Re: jor_magnificManipulation 1.0__**NEW**
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.
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.
Re: jor_magnificManipulation 1.0__**NEW**
the close button is just text, maybe you added a question mark by accident ?Islander wrote:( What I meant was a question mark (?) appearing instead of the close (X) button. and it did appear at some point)
I wouldn't know any other reason, - but if you find it happen again just shout out
stranger things have happened:/
the arrows move underneath the 360 panorama because it's a flash objectIslander wrote:About the navigation arrow being hidden ...
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
Jor Magnific manipulation
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?
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>'
Re: Jor Magnific manipulation
hello rogerl,rogerl wrote: ↑Thu Mar 01, 2018 10:30 am 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>'
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:)
Last edited by jordan on Sat Mar 03, 2018 2:23 pm, edited 1 time in total.
Re: jor_magnificManipulation 1.0
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
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
Re: jor_magnificManipulation 1.0
- the magnific popup script by default does not have a hover function for the close button ??!rogerl wrote: ↑Sat Mar 03, 2018 11:03 am 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
- 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!
Re: jor_magnificManipulation 1.0
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:
Final version with images I used:
You can see my test page here:
URL Removed
The "Pedigree" button goes to the Magnific popup while the slideshow is Fancybox3.
Regards
Roger
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>
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>
URL Removed
The "Pedigree" button goes to the Magnific popup while the slideshow is Fancybox3.
Regards
Roger
Last edited by rogerl on Thu May 24, 2018 9:57 pm, edited 1 time in total.
Re: jor_magnificManipulation 1.0
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!:)
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!:)
Re: jor_magnificManipulation 1.0
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
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
Re: jor_magnificManipulation 1.0
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
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
Re: jor_magnificManipulation 1.0
hi rogerl,rogerl wrote: ↑Fri Mar 30, 2018 12:26 am 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
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!:)
Re: jor_magnificManipulation 1.0
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
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
-
- Posts: 5351
- Joined: Thu Aug 16, 2007 7:32 pm
Re: jor_magnificManipulation 1.0
@kris33 This is the incorrect place to ask please repost all questions at the following
jor_fonteffect 3.0
jor_fonteffect 3.0
Re: jor_magnificManipulation 1.0
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:
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
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
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
Re: jor_magnificManipulation 1.0
hi roger1,rogerl wrote: ↑Sun Jun 03, 2018 6:09 am 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:The overlay, iframe and contents now centre and cover the whole screen whereas before they covered only part of the screen.Code: Select all
fixedBgPos:true, fixedContentPos:true
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
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
Re: jor_magnificManipulation 1.0
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:
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
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>
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
Re: jor_magnificManipulation 1.0
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
Re: jor_magnificManipulation 1.0
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
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
Re: jor_magnificManipulation 1.0
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 ?
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 ?
Re: jor_magnificManipulation 1.0
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
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
Re: jor_magnificManipulation 1.0
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 ?
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 ?
Re: jor_magnificManipulation 1.0
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
This fixed the desktop version but now the mobile version in landscape is squished.:
https://www.whiteshepherdsnz.com/memtzarPuppies.html
Re: jor_magnificManipulation 1.0
sorry, I do not understand what you mean by squishedrogerl wrote: ↑Sun Jun 10, 2018 4:02 am 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
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!
Re: jor_magnificManipulation 1.0
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.
https://www.sendspace.com/file/pz7ygn
You'll need to scroll down a bit to see it as pdf created large page.
Re: jor_magnificManipulation 1.0
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
https://www.whiteshepherdsnz.com/NewSit ... ppies.html
Re: jor_magnificManipulation 1.0
pfff, that is not how it displays for me ?!rogerl wrote: ↑Mon Jun 11, 2018 4:57 am 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.
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
Re: jor_magnificManipulation 1.0
OK will have ago tomorrow, not feeling the best, having early night.
Re: jor_magnificManipulation 1.0
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
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
Re: jor_magnificManipulation 1.0
your on a role indeed:)goOd, but ...rogerl wrote: ↑Tue Jun 12, 2018 2:39 am 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
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 ?
Re: jor_magnificManipulation 1.0
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?you have set your online demo formatting to minify
thereby I can not easily see what is happening on your page - (de-minify please)
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.
Re: jor_magnificManipulation 1.0
minify is:rogerl wrote: ↑Tue Jun 12, 2018 12:08 pm 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.
Tools > Options > HTML > formatting
just try it on a separate small project with max. width 980px and jor_magnificManipulation
no hurries
Re: jor_magnificManipulation 1.0
Thanks, just found the setting when your notification came through. Have changed setting and uploaded Beautify edition to that same link I gave you.
Re: jor_magnificManipulation 1.0
thank you, but still not optimal for me, the javascript and css is still minified
Tools > Options > HTML > Css > formatting
Tools > Options > HTML > Javascript > formatting
but at the moment it is not important
first try to reduce the page width to see if that solves your problem anyway:)
Tools > Options > HTML > Css > formatting
Tools > Options > HTML > Javascript > formatting
but at the moment it is not important
first try to reduce the page width to see if that solves your problem anyway:)
Re: jor_magnificManipulation 1.0
fixed and uploaded
Re: jor_magnificManipulation 1.0
HI Jordan,
Reduced page width 980px
in your extension have global max-width 850 and global max height 700.
Checked on mobiles browsers Chrome and Firefox same problem as before.
Mobile browsers are a pain. Apart from the fixed position issue which I have a suggested fix, maybe the remaining problem has to be addressed in media queries to cope with width and height within portrait and landscape situations?
Reduced page width 980px
in your extension have global max-width 850 and global max height 700.
Checked on mobiles browsers Chrome and Firefox same problem as before.
Mobile browsers are a pain. Apart from the fixed position issue which I have a suggested fix, maybe the remaining problem has to be addressed in media queries to cope with width and height within portrait and landscape situations?
Re: jor_magnificManipulation 1.0
I have tried to replicate your problem, I can notrogerl wrote: ↑Fri Jun 15, 2018 12:46 pm HI Jordan,
Reduced page width 980px
in your extension have global max-width 850 and global max height 700.
Checked on mobiles browsers Chrome and Firefox same problem as before.
Mobile browsers are a pain. Apart from the fixed position issue which I have a suggested fix, maybe the remaining problem has to be addressed in media queries to cope with width and height within portrait and landscape situations?
here is my demo -CORRECT WORKING DEMO - it just works correct for me !!? - same setting as you!
something on your site must be conflicting, creating this behaviour
all I can say is reduce your site to a bare minimum as my demo displays, first see if that works correct
then start adding until you find what's causing it
Re: jor_magnificManipulation 1.0
hi rogerl,
duh, - now I finally see the problem ... you have a viewport meta tag - but your site is not RWD?
did you add the mete tag manual?
- remove the meta tag, that should solve the problem!
duh, - now I finally see the problem ... you have a viewport meta tag - but your site is not RWD?
did you add the mete tag manual?
- remove the meta tag, that should solve the problem!
Re: jor_magnificManipulation 1.0
Good morning,
OK, that solved the fixed issue:
but landscape still has issues, or is it that magnific tries to stay within the viewport rather than the page?
This is one of those moments when a decision comes back to haunt you as I remember Pablo highlighting at one time that if you weren't using bps then take that meta tag out and then Web Builder would put it back in automatically if bps were used. Given the number of pages I have on the main site I left the issue for later and forgot it Now I've done bps for most pages I might have to add it back on the list.
OK, that solved the fixed issue:
but landscape still has issues, or is it that magnific tries to stay within the viewport rather than the page?
This is one of those moments when a decision comes back to haunt you as I remember Pablo highlighting at one time that if you weren't using bps then take that meta tag out and then Web Builder would put it back in automatically if bps were used. Given the number of pages I have on the main site I left the issue for later and forgot it Now I've done bps for most pages I might have to add it back on the list.
Re: jor_magnificManipulation 1.0
if you have a viewport tag AND your site is RWD then it won't be a problem, then the content fits the bprogerl wrote: ↑Fri Jun 15, 2018 9:45 pm Good morning,
OK, that solved the fixed issue:
but landscape still has issues, or is it that magnific tries to stay within the viewport rather than the page?
This is one of those moments when a decision comes back to haunt you as I remember Pablo highlighting at one time that if you weren't using bps then take that meta tag out and then Web Builder would put it back in automatically if bps were used. Given the number of pages I have on the main site I left the issue for later and forgot it Now I've done bps for most pages I might have to add it back on the list.
anyway, I created an update that should fix the problem
for mobile devices it pushes the magnific lightbox back into position
DOWNLOAD jor_magnificManipulation1.1
I do not have time to test it thorough, please test for yourself, feedback is welcome;)
I will release it official later if I got some time to test ...
hope this will help - cheeriO!
Re: jor_magnificManipulation 1.0
Thanks Jordon. Will spend a bit more time on it shortly and probably look at making those pages have bps. Seems like everything is hitting the fan this week so have to re-prioritise my projects.
Regards
Roger
Regards
Roger
-
-
- Posts: 118
- Joined: Sun Feb 04, 2018 8:19 pm
- Location: Jacksonville, FL
- Contact:
Re: jor_magnificManipulation 1.0
I'm using PhotoGallery with the Magnific lightbox in WB14. Would this "helper extension" allow me to add a box (the same width as the image and also responsive) under the Title and (Image # of #) line in which the div class="description" would be placed? From the demo it seems like it might even allow me to put a box anywhere I want.
If not, would anyone be able to tell me what script and css would be necessary to create a box into which this div would be placed? I'm not a coder and I know extensions are not supported so I'm seeking answers from anyone that might care to help.
The generated code for my photo gallery, (example from first image of over 20) from which i'm trying to pull, is:
Any insight and help is appreciated.
Larry
If not, would anyone be able to tell me what script and css would be necessary to create a box into which this div would be placed? I'm not a coder and I know extensions are not supported so I'm seeking answers from anyone that might care to help.
The generated code for my photo gallery, (example from first image of over 20) from which i'm trying to pull, is:
Code: Select all
<div id="wb_PhotoGallery1" style="display:inline-block;width:100%;z-index:0;">
<div id="PhotoGallery1">
<div class="thumbnails">
<div class="thumbnail">
<a href="images/1953.jpg" data-rel="" title="1953"><img alt="1953" src="images/tn_1953.jpg"><div class="caption">1953<div class="description">This the first line of the description<br>This is the second line of the description</div>
</div></a>
Larry
Re: jor_magnificManipulation 1.0
hello LJLachance,
I don’t have WB14 installed so I do not know if jor_magnificManipulation works under WB14?
aside that, I do not think jor_magnificManipulation can do what you want
what you want requires custom coding I guess?
I don't think a custom description is part of magnific popup, - (I don't know which demo you are referring to?)
or maybe you can use the Title property to add your description
add <br> tag(s) on your Title, - maybe that is enough for what you need ?
Example: YourTitle<br>YourDescription1<br>YourDescription2
I don’t have WB14 installed so I do not know if jor_magnificManipulation works under WB14?
aside that, I do not think jor_magnificManipulation can do what you want
what you want requires custom coding I guess?
I don't think a custom description is part of magnific popup, - (I don't know which demo you are referring to?)
or maybe you can use the Title property to add your description
add <br> tag(s) on your Title, - maybe that is enough for what you need ?
Example: YourTitle<br>YourDescription1<br>YourDescription2
-
-
- Posts: 118
- Joined: Sun Feb 04, 2018 8:19 pm
- Location: Jacksonville, FL
- Contact:
Re: jor_magnificManipulation 1.0
Jordan,
Thanks for the quick reply. I went ahead and downloaded the add-on and it does work in WB14 (to the best of my limited knowledge) but I discovered I can't do what I thought might be possible from the demo on your page:
http://www.jorextensions.com/wb/extensi ... ipulation/
I noticed when clicking on a link in the demo a separate .html page opens which I suspect is by design. A separate page is not what I want but I do like the idea of a block in which to pull the description of the image within the lighbox itself.
I added a question to "stackoverflow" as well with an image of what I am hoping to achieve as well as the actual WB generated coding I'm working with:
https://stackoverflow.com/questions/512 ... ysiwyg-v14
The title property does work well except I don't have enough room to add the description that I want to add. Although it would work OK if I could hide the html attributes on hover (which also seems relatively impossible).
Custom code you say? As I smile, I only wish I knew someone who could add the "description" attribute to the "magnific js". I'd be willing to pay something for that but who? If you know someone who can do this, I can compensate using PP but I'm just an individual doing genealogy, not a company so cost would be a factor.
With my seriously impaired knowledge of java and code, I would think that somewhere in the script itself I could add a property similar to the "title" property but for "description" where both would be pulled into the lightbox on separate lines, but I have no idea how to do that. I have acquired a few talents since the advent of the personal computer but scripting and code are not among them.
I am using the wb_PhotoGallery (built-in) with magnific popup for the lightbox. In the Photogallery setup you can add your images, give them a title (which magnific pulls) and a description, (which is not a part of the magnific protocol).
Thanks again for your reply and suggestions, if you have any more, I'll be happy to take them to try to make this work.
Larry
Thanks for the quick reply. I went ahead and downloaded the add-on and it does work in WB14 (to the best of my limited knowledge) but I discovered I can't do what I thought might be possible from the demo on your page:
http://www.jorextensions.com/wb/extensi ... ipulation/
I noticed when clicking on a link in the demo a separate .html page opens which I suspect is by design. A separate page is not what I want but I do like the idea of a block in which to pull the description of the image within the lighbox itself.
I added a question to "stackoverflow" as well with an image of what I am hoping to achieve as well as the actual WB generated coding I'm working with:
https://stackoverflow.com/questions/512 ... ysiwyg-v14
The title property does work well except I don't have enough room to add the description that I want to add. Although it would work OK if I could hide the html attributes on hover (which also seems relatively impossible).
Custom code you say? As I smile, I only wish I knew someone who could add the "description" attribute to the "magnific js". I'd be willing to pay something for that but who? If you know someone who can do this, I can compensate using PP but I'm just an individual doing genealogy, not a company so cost would be a factor.
With my seriously impaired knowledge of java and code, I would think that somewhere in the script itself I could add a property similar to the "title" property but for "description" where both would be pulled into the lightbox on separate lines, but I have no idea how to do that. I have acquired a few talents since the advent of the personal computer but scripting and code are not among them.
I am using the wb_PhotoGallery (built-in) with magnific popup for the lightbox. In the Photogallery setup you can add your images, give them a title (which magnific pulls) and a description, (which is not a part of the magnific protocol).
Thanks again for your reply and suggestions, if you have any more, I'll be happy to take them to try to make this work.
Larry
Re: jor_magnificManipulation 1.0
hi LJLachance,
even if I would give you custom code, it would not work
there simply is no description option in magnific
so, in WB there is no property for you to enter description data
that's why I opted the title property to you with <br> tags
cause that's they only way for you to add data thru WB that can be used as "description" data
ie.
in your desired example code you have created a description div
how do you plan to get your text data in that description div ?
and if the title option I gave is to big then how would that be different for a description box ?
I'm not saying it's impossible, I just don't think you thought it through-through
a solution for you?!!:
if you really want a description div you could again even pass it thru the title property for each title
Example: YOUR TITLE<br><div class="mfp-description">YourDescription1<br>YourDescription2</div>
this would give you the added option to hide the description
if you use jor_magnificManipulation you could use a callback like this ...
$(".mfp-figure").mouseover(function(){
$(".mfp-description").css("display", "block");
}); ... etc
but, it is still a rough solution as this can create it's own problems
magnific simply was not created with a description box in mind
here is an example demo, maybe you can use it or build on it ?
jor_magnificManipulation description demo
hope this helps!
even if I would give you custom code, it would not work
there simply is no description option in magnific
so, in WB there is no property for you to enter description data
that's why I opted the title property to you with <br> tags
cause that's they only way for you to add data thru WB that can be used as "description" data
ie.
in your desired example code you have created a description div
how do you plan to get your text data in that description div ?
and if the title option I gave is to big then how would that be different for a description box ?
I'm not saying it's impossible, I just don't think you thought it through-through
a solution for you?!!:
if you really want a description div you could again even pass it thru the title property for each title
Example: YOUR TITLE<br><div class="mfp-description">YourDescription1<br>YourDescription2</div>
this would give you the added option to hide the description
if you use jor_magnificManipulation you could use a callback like this ...
$(".mfp-figure").mouseover(function(){
$(".mfp-description").css("display", "block");
}); ... etc
but, it is still a rough solution as this can create it's own problems
magnific simply was not created with a description box in mind
here is an example demo, maybe you can use it or build on it ?
jor_magnificManipulation description demo
hope this helps!
-
-
- Posts: 118
- Joined: Sun Feb 04, 2018 8:19 pm
- Location: Jacksonville, FL
- Contact:
Re: jor_magnificManipulation 1.0
Jordan,
Thank you for this solution it most likely will be the answer if I can get it to work.
When you open PhotoGallery properties you are presented with a box to which you can add your photos. When photos are added, the box is automatically populated with "filename" and "title". Title gets passed on to Magnific Popup.
Once the photo is in the properties box, if you double click you get another pop-up for just that photo. Here you can add a thumbnail, revise your title (the one passed on to Magnific) AND add a description. Is THIS the description that would be passed on to the "mfp-description"???
Another question. Your add-on really is nice and does a lot of things (I'll learn as I go to make it work) but for now ... you have the description made active by mouse hover. Why can't I just pull the description (without the mouse hover) so that it shows the two lines below the title. I know it fits with three lines because I've tried it using html to break the lines "<br>" but when doing so in the "title" the "<br>" shows up along with other html attributes like <strong> or <H3>. If I could just use the title without the HTML showing up I'd be set.
In the meantime, if I can figure out how to call the description div (see second code below), I'll be good.
This is the generated code from the photo gallery once I've filled in the title and description in the properties box for PhotoGallery: (just for the first photo)
Also, in the "Style" tab of the PhotoGallery properties box, "Text" to display text "none" "below thumbnail" "on hover top" or "on hover bottom". When I choose to display text (in any choice except none) I get this code: (NOTE: added "div class")
Where is your script pulling the description from?
Thanks again - I will work with your demo to see what I can make happen.
Larry
Thank you for this solution it most likely will be the answer if I can get it to work.
When you open PhotoGallery properties you are presented with a box to which you can add your photos. When photos are added, the box is automatically populated with "filename" and "title". Title gets passed on to Magnific Popup.
Once the photo is in the properties box, if you double click you get another pop-up for just that photo. Here you can add a thumbnail, revise your title (the one passed on to Magnific) AND add a description. Is THIS the description that would be passed on to the "mfp-description"???
Another question. Your add-on really is nice and does a lot of things (I'll learn as I go to make it work) but for now ... you have the description made active by mouse hover. Why can't I just pull the description (without the mouse hover) so that it shows the two lines below the title. I know it fits with three lines because I've tried it using html to break the lines "<br>" but when doing so in the "title" the "<br>" shows up along with other html attributes like <strong> or <H3>. If I could just use the title without the HTML showing up I'd be set.
In the meantime, if I can figure out how to call the description div (see second code below), I'll be good.
This is the generated code from the photo gallery once I've filled in the title and description in the properties box for PhotoGallery: (just for the first photo)
Code: Select all
<div id="wb_LayoutGrid1">
<div id="LayoutGrid1">
<div class="col-1">
<div id="wb_PhotoGallery1" style="display:inline-block;width:100%;z-index:4;">
<div id="PhotoGallery1">
<div class="thumbnails">
<div class="thumbnail">
<a href="images/1953.jpg" data-rel="" title="1953"><img alt="1953" src="images/tn_1953.jpg" title="1953"></a>
</div>
Code: Select all
<div class="thumbnails">
<div class="thumbnail">
<a href="images/1953.jpg" data-rel="" title="1953"><img alt="1953" src="images/tn_1953.jpg" title="1953"></a>
<div class="caption">1953 <div class="description">This is where I type in my description line 1<br>This is my description line 2</div>
</div>
Thanks again - I will work with your demo to see what I can make happen.
Larry