jor_magnificManipulation 1.0

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.

There are already more than 250 extensions available!
LJLachance
 
 
Posts: 65
Joined: Sun Feb 04, 2018 8:19 pm

Re: jor_magnificManipulation 1.0

Post by LJLachance » Sun Jul 08, 2018 10:32 pm

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

Re: jor_magnificManipulation 1.0

Post by jordan » Mon Jul 09, 2018 3:41 pm

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: 65
Joined: Sun Feb 04, 2018 8:19 pm

Re: jor_magnificManipulation 1.0

Post by LJLachance » Mon Jul 09, 2018 8:29 pm

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

Re: jor_magnificManipulation 1.0

Post by jordan » Tue Jul 10, 2018 1:16 pm

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: 65
Joined: Sun Feb 04, 2018 8:19 pm

Re: jor_magnificManipulation 1.0

Post by LJLachance » Tue Jul 10, 2018 10:09 pm

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

Re: jor_magnificManipulation 1.0

Post by jordan » Wed Jul 11, 2018 11:15 am

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 pm
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).
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: 65
Joined: Sun Feb 04, 2018 8:19 pm

Re: jor_magnificManipulation 1.0

Post by LJLachance » Wed Jul 11, 2018 6:04 pm

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: 174
Joined: Tue May 03, 2016 8:24 am

Re: jor_magnificManipulation 1.0

Post by rogerl » Fri Jul 20, 2018 8:06 am

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

Re: jor_magnificManipulation 1.0

Post by jordan » Sat Jul 21, 2018 8:38 am

txn for the feedback rogerl, goOd to hear it's working for you now!:)

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests