jor_magnificManipulation 1.0

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
User avatar
rogerl
 
 
Posts: 196
Joined: Tue May 03, 2016 8:24 am

Re: jor_magnificManipulation 1.0

Post by rogerl »

Thanks, just found the setting when your notification came through. Have changed setting and uploaded Beautify edition to that same link I gave you.
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

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:)
User avatar
rogerl
 
 
Posts: 196
Joined: Tue May 03, 2016 8:24 am

Re: jor_magnificManipulation 1.0

Post by rogerl »

fixed and uploaded
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

rogerl wrote: Tue Jun 12, 2018 9:40 pm fixed and uploaded
nice, - now change your page width to see if it solves the problem ?
User avatar
rogerl
 
 
Posts: 196
Joined: Tue May 03, 2016 8:24 am

Re: jor_magnificManipulation 1.0

Post by rogerl »

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?
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

rogerl 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?
I have tried to replicate your problem, I can not
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
:idea:
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

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!
User avatar
rogerl
 
 
Posts: 196
Joined: Tue May 03, 2016 8:24 am

Re: jor_magnificManipulation 1.0

Post by rogerl »

Good morning,
OK, that solved the fixed issue:
Image

Image

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.
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

rogerl wrote: Fri Jun 15, 2018 9:45 pm Good morning,
OK, that solved the fixed issue:
Image

Image

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.
if you have a viewport tag AND your site is RWD then it won't be a problem, then the content fits the bp

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!
User avatar
rogerl
 
 
Posts: 196
Joined: Tue May 03, 2016 8:24 am

Re: jor_magnificManipulation 1.0

Post by rogerl »

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
LJLachance
 
 
Posts: 115
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: jor_magnificManipulation 1.0

Post by LJLachance »

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:

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>
Any insight and help is appreciated.

Larry
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

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
LJLachance
 
 
Posts: 115
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: jor_magnificManipulation 1.0

Post by LJLachance »

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
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

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!
LJLachance
 
 
Posts: 115
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: jor_magnificManipulation 1.0

Post by LJLachance »

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)

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>
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")

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>
Where is your script pulling the description from?

Thanks again - I will work with your demo to see what I can make happen.

Larry
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

no, enabling the style > display text in the gallery should not be used
this will only display text on the gallery NOT on the magnific popup
as I said magnific was not created to be used with a description box
so, the only method of transferring text data to the popup for you is by using the text property
that description box could be used, but would require a whole lot more custom coding
I gave you a rough solution thru the title property
- in my demo project, study the gallery title property, you will see the added description div there for each individual title

the mouse hover I added for 2 reasons ...

1.
you said there was not enough room for the description text and wanted a hover
LJLachance wrote: Mon Jul 09, 2018 8:29 pmThe 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).
I guess you where talking about something else ?:\

2.
in my demo project NOTE I explain why the title box moves upward - (as well as hides on mouseout)

a description is not part of the magnific popup
so, the behaviour of the magnific changes when you add a description
you think the text will fit but when the window height becomes too small
magnific is not created to take the added description height into account
this in turn will create double scroll bars as the magnific popup window becomes larger then the screen size window

hence, my solution, in my demo project
- only show on mouseover and move the title upward to create space, which I wrote in my demo project NOTE

but, if you do not want that, change the code, just remove the code in the callbacks
like I wrote in the demo project, experiment, meaning - see, try and change what works for you:)

sum it up:
- don't use the gallery style > display text
- study the gallery title property in my demo project - (that's where the description is taken from)
LJLachance
 
 
Posts: 115
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: jor_magnificManipulation 1.0

Post by LJLachance »

Jordan,

Many thanks - I do like your solution and I'm working on it. I'm slow when it comes to code because I don't have a good knowledge of how it works so most of what I do is trial and error. I will work with the title property and see what I come up with.

Thanks again for your reply and your guidance, it's much appreciated.

Larry
User avatar
rogerl
 
 
Posts: 196
Joined: Tue May 03, 2016 8:24 am

Re: jor_magnificManipulation 1.0

Post by rogerl »

Hi Jordon,
Your update appears to work well. I found about 80% of the pedigree pages still had meta tags with viewport instructions, so have fixed those now. I believe its as good as its ever going to be on mobile. Thanks for your help.
Regards
Roger
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

txn for the feedback rogerl, goOd to hear it's working for you now!:)
User avatar
rogerl
 
 
Posts: 196
Joined: Tue May 03, 2016 8:24 am

Re: jor_magnificManipulation 1.0

Post by rogerl »

Hi Jordon - need to stop the Title showing on the page. What do I need to do for that please.
Regards
Roger
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

Hello rogerl,

Rusty as H... on my extensions or WB, but will try to help of course:)
A live demo please, don't know which Title your on to ?
User avatar
rogerl
 
 
Posts: 196
Joined: Tue May 03, 2016 8:24 am

Re: jor_magnificManipulation 1.0

Post by rogerl »

Thanks Jordon,
on my page:
https://www.whiteshepherdsnz.com/stud_dogs.html
on the link from each image to the dog's pedigree I have a link title which pops up as you hover over image. Unfortunately Magnific Popup takes this as a title to display on the page if you click on the image. I was hoping there would be a simple option to suppress the title under Magnific but still allow Web Builder to use the link title as intended.
jordan
 
 
Posts: 831
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0

Post by jordan »

nope sorry can not be removed, that's just browser behavior
you could remove the title by script, but then Magnific won't display the title, so that makes no sense
not possible afaik:\
Post Reply