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!
User avatar
Islander
 
 
Posts: 62
Joined: Tue Jan 12, 2010 4:03 pm
Location: Mauritius
Contact:

Re: jor_magnificManipulation 1.0__**NEW**

Post by Islander » Thu Jun 16, 2016 6:31 am

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)

User avatar
ColinM
 
 
Posts: 509
Joined: Wed Feb 09, 2011 3:40 am
Location: Western Australia
Contact:

Re: jor_magnificManipulation 1.0__**NEW**

Post by ColinM » Thu Jun 16, 2016 7:34 am

Hi Jordan - absolutely amazing work mate - mind blowing in fact! 8) :D
Yours truly
Colin M
Western Australia
FORUM MODERATOR
Please think before you post, be polite, don't hijack threads and above all please respect Pablo's huge effort!
My Website

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

Re: jor_magnificManipulation 1.0__**NEW**

Post by jordan » Thu Jun 16, 2016 1:20 pm

hi islander,
Islander wrote: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
Islander 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)
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?)
Islander 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)
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
 
 
Posts: 838
Joined: Tue Jun 26, 2007 1:56 pm
Contact:

Re: jor_magnificManipulation 1.0__**NEW**

Post by jordan » Thu Jun 16, 2016 1:22 pm

ColinM wrote:Hi Jordan - absolutely amazing work mate - mind blowing in fact! 8) :D
hello ColinM,

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

User avatar
Islander
 
 
Posts: 62
Joined: Tue Jan 12, 2010 4:03 pm
Location: Mauritius
Contact:

Re: jor_magnificManipulation 1.0__**NEW**

Post by Islander » Fri Jun 17, 2016 6:11 am

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. :D

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

Re: jor_magnificManipulation 1.0__**NEW**

Post by jordan » Fri Jun 17, 2016 3:19 pm

Islander wrote:( 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:):/
Islander wrote: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

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

Jor Magnific manipulation

Post by rogerl » 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>' 

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

Re: Jor Magnific manipulation

Post by jordan » Fri Mar 02, 2018 2:03 pm

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>' 
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:)
Last edited by jordan on Sat Mar 03, 2018 2:23 pm, edited 1 time in total.

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

Re: jor_magnificManipulation 1.0

Post by rogerl » 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

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

Re: jor_magnificManipulation 1.0

Post by jordan » Sat Mar 03, 2018 2:21 pm

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
- 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!

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

Re: jor_magnificManipulation 1.0

Post by rogerl » Sat Mar 03, 2018 11:25 pm

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
Last edited by rogerl on Thu May 24, 2018 9:57 pm, edited 1 time in total.

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

Re: jor_magnificManipulation 1.0

Post by jordan » Sun Mar 04, 2018 2:11 pm

hi rogerl,

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

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

Re: jor_magnificManipulation 1.0

Post by rogerl » Sun Mar 04, 2018 10:21 pm

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

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

Re: jor_magnificManipulation 1.0

Post by rogerl » 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

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

Re: jor_magnificManipulation 1.0

Post by jordan » Fri Mar 30, 2018 2:02 pm

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
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!:)

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests