fancybox 3 and wb14 problem

[wb_user]

hello
i use fancybox 3 in wb14 but next and previous arrows not show

[Pablo]

By default the arrows of fancybox3 are disabled. However, this has nothing to do with WWB14.

[wb_user]

i understand.
thanks.

[rogerl]

Have a look at FB3 options. you need to add something like
arrows: true
in settings

[rogerl]

Hi Pablo - just preparing my thoughts before going down this path. Can I just add a folder into the Lightbox area as we did with FB2 and put the files in there or have you set it up so the system Fancybox folder has to be used?

[Pablo]

This is from the help:

Due to license restrictions we are not allowed to distribute FancyBox v3.
However if you copy the files from https://fancyapps.com/fancybox/ to Documents\WYSIWYG Web Builder\system\lightbox\fancybox, then the application will use these files instead of the included ones (FancyBox v1).

[rogerl]

Yes I've read that. So are you saying to replace the v1 files with v3 then or just combine them? I have slide shows that use all 3 versions that's why it makes more sense to me to use a separate folder for each version of FB as each version is so different to the earlier ones

[Pablo]

are you saying to replace the v1 files with v3 then or just combine them?

No, you will need to create a new folder
Documents\WYSIWYG Web Builder\system\lightbox\fancybox

Then extract the downloaded files from version 3 in that folder

The software will then use these files instead of fancybox v1

[wb_user]

hello
fancybox 3 has a next and previous arrows
please see : https://fancyapps.com/fancybox/3/#images-1

[Pablo]

// Should display navigation arrows at the screen edges
arrows: true

[BaconFries]

wb_user did you read rogerl reply to you!

Have a look at FB3 options. you need to add something like
arrows: true
in settings

[wb_user]

i copy that in this box but not work https://pasteboard.co/HkPALkI.jpg

[Pablo]

It works for me:
http://wysiwygwebbuilder.com/support/fancybox3/

[BaconFries]

You should only add arrows: true nothing else!

[wb_user]

please see this :
https://www.dropbox.com/s/4xtvl236agwo4 ... y.zip?dl=0
am i true work ?

[presto]

The only files you will need to run fancybox 3 are "jquery.fancybox.min.css" and "jquery.fancybox.min.js" and a file "lightbox.ini" (you can copy this from the "old" fancybox). These three files only are sufficiant to run fancybox 3.

If you want to run a slideshow then you also need to add the file "slideshow.js".

There is a file "core.js", too. With this file there you can determine yourself the behavior of fancybox 3, otherwise fancybox 3 will use the default values. In this file there is a part where for example you can switch on and off the icons shown in the upper right corner of the modal window when fancybox 3 runs. And here you can also set "arrows: true" to show the navigation arrows.

All these mentioned files above should be in the folder called "fancybox", so no sub-folders are needed. This configuration works perfectly for me.

[wb_user]

The only files you will need to run fancybox 3 are "jquery.fancybox.min.css" and "jquery.fancybox.min.js" and a file "lightbox.ini" (you can copy this from the "old" fancybox). These three files only are sufficiant to run fancybox 3.

If you want to run a slideshow then you also need to add the file "slideshow.js".

There is a file "core.js", too. With this file there you can determine yourself the behavior of fancybox 3, otherwise fancybox 3 will use the default values. In this file there is a part where for example you can switch on and off the icons shown in the upper right corner of the modal window when fancybox 3 runs.

All these mentioned files above should be in the folder called "fancybox", so no sub-folders are needed. This configuration works perfectly for me.

sorry my english is not good i download fancybox3 from that site and paste that in system\lightbox

[rogerl]

I have been trying to run FB3 integrated into Slideshow and struck the same problems. You only need the 2 .min files for css and js. core is built into those files.
How does it know data-caption = title of image? - needed to run this version
Can't get arrows:true to work either
Perhaps someone could give us a working wbs file to check out.

[presto]

You only need the 2 .min files for css and js. core is built into those files.
How does it know data-caption = title of image? - needed to run this version.

You need a file called "lightbox.ini" as well. This should contain these lines only:

[attribute]
rel=$ID$

[copyrights]
company=fancyapps
url=http://fancyapps.com/fancybox/3/

[init]
script=$("a[rel^='$ID$']").fancybox({$SETTINGS$});
settings=

You can copy this to any editor and then save the file as "lightbox.ini" in the same directory as the .min files

[rogerl]

Yes, have that file as well.
So what script / css have you used in Head, if any and what settings did you use for lightbox, fancybox.

[wb_user]

hello
"- New feature: Added the possibility to use fancybox v3. Due to license restrictions we are not allowed to distribute fancybox v3. However if you copy the files from https://fancyapps.com/fancybox/3/ to Documents\WYSIWYG Web Builder\system\lightbox\fancybox, then application will use these files instead of the included ones (fancybox v1)."
who can send me the files with .ini and .css without problem to i put that to Documents\WYSIWYG Web Builder\system\lightbox\fancybox ?

[presto]

After having installed WWB 14 you only have to create once a directory named "lightbox" with a subdirectory "fancybox" in "C:/Documents\WYSIWYG Web Builder\system".

Please not that this is the standard path and directory where WWB (both 32-bit and 64-bit version) stores important information. Most probably you won't have changed this. Please do not mix this up with the path to the programme files of WWB.

In this new directory "C:/Documents\WYSIWYG Web Builder\system\lightbox\fancybox" you only have to copy the two files from fancybox 3:

jquery.fancybox.min.css
jquery.fancybox.min.js

Even if you update WWB 14 it does not overwrite this directory and as long as this directory exists, WWB 14 will use fancybox 3 instead of the built-in fancybox 1.

[wb_user]

After having installed WWB 14 you only have to create once a directory named "lightbox" with a subdirectory "fancybox" in "C:/Documents\WYSIWYG Web Builder\system".

Please not that this is the standard path and directory where WWB (both 32-bit and 64-bit version) stores important information. Most probably you won't have changed this. Please do not mix this up with the path to the programme files of WWB.

In this new directory "C:/Documents\WYSIWYG Web Builder\system\lightbox\fancybox" you only have to copy the two files from fancybox 3:

jquery.fancybox.min.css
jquery.fancybox.min.js

Even if you update WWB 14 it does not overwrite this directory and as long as this directory exists, WWB 14 will use fancybox 3 instead of the built-in fancybox 1.

i do all of this but arrows not shown

[Pablo]

What is the URL of the page so I can see what you have done?

[wb_user]

What is the URL of the page so I can see what you have done?

[rogerl]

OK, in my case, using the slide show, it works and arrows and controls show by default but disappear if no screen activity. I know Janis put out a fix for that cause it annoyed users. I'll go look for that.

• How do I get the image title to show as the caption?

• Given that I use all 3 versions of fancybox across the site, why can't the lightbox setup in Program Files be used with a Folder "fancybox3"

[Pablo]

please see this :
http://bit.do/egdA3

ID:
wb_تور-مجازیPhotoGallery1

I so not see any references to 'arrows: true' in the code.
Where exactly did you add it?

[Pablo]

Given that I use all 3 versions of fancybox across the site, why can't the lightbox setup in Program Files be used with a Folder "fancybox3"

Because as a standard Windows user you cannot copy files to this folder.

I am not allowed to distribute fancybox3 in the setup, that is why you will need to copy the files yourself.

[rogerl]

OK, in my case, using the slide show, it works and arrows and controls show by default but disappear if no screen activity. I know Janis put out a fix for that cause it annoyed users. I'll go look for that.

Found the answer to this - put the following into settings:

Code: Select all

idleTime: false

Also with current version of FB3 the arrows and basic controls should show by default.

[rogerl]

Because as a standard Windows user you cannot copy files to this folder.

I am not allowed to distribute fancybox3 in the setup, that is why you will need to copy the files yourself.

As an "Administrator" I have full access to all files on my system.
I setup fancybox2 in this manner and it works perfectly as a choice under "Lightbox Gallery". In fact I did this after coming across a post where you suggested this method.
This does not involve you distributing the software at all.

• Is there some way you could expand your current method suggested for FB3 so that it doesn't overwrite fancybox default and allow us to have a fancybox2 and fancybox3 folder under this scenario?

• I noticed after entering settings for "fancybox" and exiting in the normal manner. I then went to preview to check the page. I then went back to change settings only to find my original settings had been erased.

[wb_user]

please see this :

ID:
wb_تور-مجازیPhotoGallery1

I so not see any references to 'arrows: true' in the code.
Where exactly did you add it?

in ID : تور-مجازیPhotoGallery1
i set this in light box gallery - fancybox - options : https://pasteboard.co/HkZ83tT.jpg

[Pablo]

i set this in light box gallery - fancybox - settings : https://pasteboard.co/HkZ83tT.jpg

This look correct.

Maybe this will be helpful?
https://www.wysiwygwebbuilder.com/forum ... 10&t=80753

Make sure the contents of lightbox.ini is correct.

[wb_user]

i set this in light box gallery - fancybox - settings : https://pasteboard.co/HkZ83tT.jpg

This look correct.

can you send me http://wysiwygwebbuilder.com/support/fancybox3/ project folder to i preview that whats happen ?

[Pablo]

Here's the project:
https://www.wysiwygwebbuilder.com/suppo ... x3demo.zip

Also, please be aware of the license for Fancybox 3.

[rogerl]

Slideshow fancybox3 settings
if you want to show image title as caption and include image count put the following into settings:

Code: Select all

 infobar:false,
 caption : function( instance, item ) {
    var caption = this.title || '';
    return '<span class="fancy-count">(Image <span data-fancybox-index></span> of <span data-fancybox-count></span>)</span>' + ( caption.length ? ' ' + caption : '' );
  }

[presto]

After having installed WWB 14 you only have to create once a directory named "lightbox" with a subdirectory "fancybox" in "C:/Documents\WYSIWYG Web Builder\system".

Please not that this is the standard path and directory where WWB (both 32-bit and 64-bit version) stores important information. Most probably you won't have changed this. Please do not mix this up with the path to the programme files of WWB.

In this new directory "C:/Documents\WYSIWYG Web Builder\system\lightbox\fancybox" you only have to copy the two files from fancybox 3:

jquery.fancybox.min.css
jquery.fancybox.min.js

Even if you update WWB 14 it does not overwrite this directory and as long as this directory exists, WWB 14 will use fancybox 3 instead of the built-in fancybox 1.

i do all of this but arrows not shown

This works perfectly even with arrows provided that there is a file called lightbox.ini in the original fancybox directory. This file is installed automatically when you install WWB 14.

[German]

After having installed WWB 14 you only have to create once a directory named "lightbox" with a subdirectory "fancybox" in "C:/Documents\WYSIWYG Web Builder\system".

Please not that this is the standard path and directory where WWB (both 32-bit and 64-bit version) stores important information. Most probably you won't have changed this. Please do not mix this up with the path to the programme files of WWB.

In this new directory "C:/Documents\WYSIWYG Web Builder\system\lightbox\fancybox" you only have to copy the two files from fancybox 3:

jquery.fancybox.min.css
jquery.fancybox.min.js

Even if you update WWB 14 it does not overwrite this directory and as long as this directory exists, WWB 14 will use fancybox 3 instead of the built-in fancybox 1.

i do all of this but arrows not shown

This works perfectly even with arrows provided that there is a file called lightbox.ini in the original fancybox directory. This file is installed automatically when you install WWB 14.

Thank You very much. Great! It works perfect

[wb_user]

It works for me:
http://wysiwygwebbuilder.com/support/fancybox3/

is it possible to send me this project file ?

[Pablo]

See my previous reply with link.

[wb_user]

See my previous reply with link.

pablo , i check this topic : viewtopic.php?f=10&p=404218#p404218 and I acted carefully
i check your project too
but fancybox arrows not work for me Even in your project
I don't know what to do

[Pablo]

Are you sure the lightbox.ini is correct?

[wb_user]

Are you sure the lightbox.ini is correct?

yes! image: https://pasteboard.co/Hl6OHxr.jpg
please note i change my system folder from wb14 settings to D

[Pablo]

If you remorse 'lightbox.ini' does it still work?
If yes, then the location is wrong.

[zinc]

If you create a file called lightbox.ini and copy these

[attribute]
rel=$ID$

[copyrights]
company=Janis Skarnelis
url=http://fancybox.net/

[init]
script=$("a[rel^='$ID$']").fancybox({$SETTINGS$});



and place the file back the folder "facybox" within your "lightbox" folder, it works. I have just tried it and no issues.

[wb_user]

my system folder in D:\
i set fancybox files in D:\WWB\system\lightbox\fancybox
after that i test photo gallery its load fancybox 3 , and when remove fancybox folder , its load fancybox V1 and i guess no problem for fancybox 3 files and folder location.

------------------------------------------------------------------------------------------------
in D:\WWB\system\lightbox\fancybox i have lightbox.ini with
[attribute]
rel=$ID$

[copyrights]
company=Janis Skarnelis
url=http://fancybox.net/

[init]
script=$("a[rel^='$ID$']").fancybox({$SETTINGS$});

with this .ini , arrows not shown. when i remove lightbox.ini , photo gallery is correctly work i think lightbox.ini not effect on my photo gallery
i test pablo project file ( with arrows:true config) .To be or not to be lightbox.ini in my wb system folder ( are: D:\WWB\system\lightbox\fancybox ) not effect on project photo gallery.

[rogerl]

I have successfully tested both Pablo's Gallery demo and the original ice image example.
I discovered my .ini file has an extra line to that offered in this thread:

Code: Select all

settings=

When I tested further, the Gallery example, the settings would not work unless the .ini file was in the folder whereas the slideshow example worked with or without the .ini file.
The files are in the correct location as set out in the method. (C:\Documents\WYSIWYG Web Builder\system\lightbox\fancybox)
here are the settings I have used in the slideshow example and Gallery example to further enhance the output:

Code: Select all

infobar:false,
 loop:true,
 idleTime: false,
slideShow : { autoStart : true },
 caption : function( instance, item ) {
    var caption = this.title || '';
    return '<span class="fancy-count">(Image <span data-fancybox-index></span> of <span data-fancybox-count></span>)</span>' + ( caption.length ? ' ' + caption : '' )
  }

Gallery Example:
https://www.whiteshepherdsnz.com/NewSite/index.html

Slideshow Example:
https://www.whiteshepherdsnz.com/NewSite/Ice.html

[mayur007]

I have successfully tested both Pablo's Gallery demo and the original ice image example.
I discovered my .ini file has an extra line to that offered in this thread:

Code: Select all

settings=

When I tested further, the Gallery example, the settings would not work unless the .ini file was in the folder whereas the slideshow example worked with or without the .ini file.
The files are in the correct location as set out in the method. (C:\Documents\WYSIWYG Web Builder\system\lightbox\fancybox)
here are the settings I have used in the slideshow example and Gallery example to further enhance the output:

Code: Select all

infobar:false,
 loop:true,
 idleTime: false,
slideShow : { autoStart : true },
 caption : function( instance, item ) {
    var caption = this.title || '';
    return '<span class="fancy-count">(Image <span data-fancybox-index></span> of <span data-fancybox-count></span>)</span>' + ( caption.length ? ' ' + caption : '' )
  }

Gallery Example:
https://www.whiteshepherdsnz.com/NewSite/index.html

Slideshow Example:
https://www.whiteshepherdsnz.com/NewSite/Ice.html

thankyou it worked

[rogerl]

Pablo, would I be right in saying if you have used Fancybox1 elsewhere on a site, that folder will now be over written when this one is uploaded. If so, is there some way to over come the problem.

[Pablo]

Pablo, would I be right in saying if you have used Fancybox1 elsewhere on a site, that folder will now be over written when this one is uploaded.

Correct, it will affect all object that use fancybox

[mayur007]

@pablo I did as you said in the thread but the problem arised tat there no arrows to navigate
arrows true code didnt worked but the rogel code worked, but curious is there anything i needed to do it for that without using the extra code like you made it worked?