Click on image to see larger zoom of image.

DLJonsson

Well-known member
Is there any way to (via a hook or custom php or ...) to enable
clicking on an image to show a full screen zoom of an image?
 

eugenio

Administrator
Staff member
Hello,
there isn't any built-in way to do a full screen zoom by clicking on the pictre; however, you may want to check the thumbnail parameters in config.php: they allow to specify different sizes for datagrid and details view.

Best,
 
D

Deleted member 75341

Guest
Hello juergen,
please can you share your custum function and writing a little tutorial for installing lightbox ?
Thank you in advance.
 

juergen_mueller

DaDaBIK Guru
Hallo Amigamerlin

You should get a lightbox version (I am still using lightbox-2.7.1) and put the lightbox folder into your dadabik folder (or wherever you want on your web server).

Now, you need to add the lightbox script to your dadabik header.php :

<script src="lightbox/js/lightbox.min.js"></script>
<link href="lightbox/css/lightbox.css"

Next step is to write the custom function in order to add the rel=lightbox tag to your images. You can set the width und height values as you like:


function dadabik_foto($value) {

return '<img src="uploads/'.$value.'" width="150" height="200" />';
}

Last step is to add the function to the related field in your dadabik application, which is, in this case: dadabik_foto.

Now, you click on an image and a lightbox opens.

Hope, this is clear enough,

Juergen
 
D

Deleted member 75341

Guest
Many thanks Juergen works really good !!! :)
Just a curiosity: to have it fully working I was forced to modify the .htaccess present in the uploads folder.
In the default condition I get 403 error on the images.After modification all was ok.
Was the same also for you ? Below the modification done in .htaccess:

Original value:
[pre]
Deny from all
[/pre]

Modified value:
[pre]
Order Deny,Allow
Allow from localhost
[/pre]

Thank you again for your sharing !!!
 

DLJonsson

Well-known member
Thanks Juergen:

Working so far but the [X] button to exit the image view does not show up,
in either chrome or firefox.

As well I can't find any control for maxsize of image.
 

DLJonsson

Well-known member
Still not working although when I said I could not see the [X] button it was because lightbox was not being activated at all.

Instead the databik function was running and simply showing me the image in full size without lightbox controls.

When adding and verifying these lines in header - clicking on the image does nothing.
<script src="lightbox/js/lightbox.min.js"></script>
<link href="lightbox/css/lightbox.css"

.htaccess is not the problem.

The lightbox css and js files are where they are referenced in the header.php.

Any suggestions appreciated.
 

DLJonsson

Well-known member
Isn't this the place to put the function name...Custom formatting function: dadabik_foto

I'm using DaDaBIK version 8.3-Lerici pro does that make a difference?
 

DLJonsson

Well-known member
I've tried the solution many times. Verifying header and config php lines as suggested above,
verifying lightbox .css and .js files are where they are called from and so on, as detailed above.

The result I get when clicking on an image using
Custom formatting function: dadabik_foto
is showing the image but not within lightbox.
 
D

Deleted member 75341

Guest
Hello DLJonsson,
I think you have done a little mistake so follow the below instructions

1) Download lightbox;
2) Extract it in a folder;
3) Rename folder in lightbox;
4) copy lightbox folder in the root of your Dadabik folder
5) open dadabik/include folder and edit header.php file and at line 82 just after

[pre]

<link href="css/select2/select2.min.css" rel="stylesheet" />
<script src="include/select2/select2.min.js"></script>
[/pre]

insert:

[pre]

<link href="lightbox/css/lightbox.css" rel="stylesheet">
<script src="lightbox/js/lightbox.min.js"></script>
[/pre]

6)Save header.php file,
7) Open your custom function.php and insert as CUSTOM FORMATTING FUNCTION the below code:

[pre]
function dadabik_foto($value) {
return '<img src="uploads/'.$value.'" width="150" height="200" />';
}
[/pre]

8) Open you app in edit
9) From form configurator insert in the field photo (at the one you want to use lightbox) in Custom formatting function: the code [pre]
dadabik_foto
[/pre]
10) Save modification.
11) That's it, should work !!

If you have problem showing thumbnails, make the modifcation shown in the prvious posto in you .htaccess files according your server.

Let us know.
Bye,
 

eugenio

Administrator
Staff member
Guys, let me just point out that if you modify the uploads .htaccess file you can experience security issues, see:

https://dadabik.com/index.php?function=show_documentation#security

Best,
 

DLJonsson

Well-known member
Thanks Amigamerlin that solution works.

Eugenio, I will print out the Security link and read it with a marking pen,
the detail and transparency on those pages is much appreciated.

Per the images URL though I have some questions.

* Is it possible to place images on another site or otherwise distance/decouple the uploads URL from the code/app directory tree?

Thanks
 

eugenio

Administrator
Staff member
The uploads directory should be in the app directory tree, this is how DaDaBIK is designed; however if you specify a full URL in $upload_relative_url it might work anyway; I haven't tested this solution so there could be bugs, I am pretty sure you can experience problems at least with pre-packaged app installation, though.

Best,
 
D

Deleted member 75341

Guest
For thoose that need .htaccess modification (lightbox don't work with default .htaccess rules) I found something really usefull :).
Here below a code needed for hardening / secure upload folder.
Please note that some rules contained in this code need to be uncommented and modified according domain in use.

[pre]
# Don't list directory contents
IndexIgnore *
# Disable script execution
AddHandler cgi-script .php .php2 .php3 .php4 .php5 .php6 .php7 .php8 .pl .py .js .jsp .asp .htm .html .shtml .sh .cgi
Options -ExecCGI -Indexes

# Only allow access to this directory if they are coming from your domain; excluding you, your server, Google and any other IPs
RewriteEngine On
# RewriteCond %{REMOTE_ADDR} !^(xxx\.xxx\.xxx\.xxx|xxx\.xxx\xxx\.xxx|66\.249\.)
RewriteCond %{HTTP_HOST} !^(127\.0\.0\.0|localhost) [NC]
# RewriteCond %{HTTP_REFERER} !^https?://(.+\.)?yourdomain\.com/ [NC]
# RewriteRule .* http://yourdomain.com/ [L]

# Secure php.ini and .htaccess
RewriteRule ^(php\.ini|\.htaccess) - [NC,F]

# Block shell uploaders, htshells, and other baddies
RewriteCond %{REQUEST_URI} ((php|my|bypass)?shell|remview.*|phpremoteview.*|sshphp.*|pcom|nstview.*|c99|c100|r57|webadmin.*|phpget.*|phpwriter.*|fileditor.*|locus7.*|storm7.*)\.(p?s?x?htm?l?|txt|aspx?|cfml?|cgi|pl|php[3-9]{0,1}|jsp?|sql|xml) [NC,OR]
RewriteCond %{REQUEST_URI} (\.exe|\.php\?act=|\.tar|_vti|afilter=|algeria\.php|chbd|chmod|cmd|command|db_query|download_file|echo|edit_file|eval|evil_root|exploit|find_text|fopen|fsbuff|fwrite|friends_links\.|ftp|gofile|grab|grep|htshell|\ -dump|logname|lynx|mail_file|md5|mkdir|mkfile|mkmode|MSOffice|muieblackcat|mysql|owssvr\.dll|passthru|popen|proc_open|processes|pwd|rmdir|root|safe0ver|search_text|selfremove|setup\.php|shell|ShellAdresi\.TXT|spicon|sql|ssh|system|telnet|trojan|typo3|uname|unzip|w00tw00t|whoami|xampp) [NC,OR]
RewriteCond %{QUERY_STRING} (\.exe|\.tar|act=|afilter=|alter|benchmark|chbd|chmod|cmd|command|cast|char|concat|convert|create|db_query|declare|delete|download_file|drop|edit_file|encode|environ|eval|exec|exploit|find_text|fsbuff|ftp|friends_links\.|globals|gofile|grab|insert|localhost|logname|loopback|mail_file|md5|meta|mkdir|mkfile|mkmode|mosconfig|muieblackcat|mysql|order|passthru|popen|proc_open|processes|pwd|request|rmdir|root|scanner|script|search_text|select|selfremove|set|shell|sql|sp_executesql|spicon|ssh|system|telnet|trojan|truncate|uname|union|unzip|whoami) [NC]
RewriteRule .* - [F]

# Disable hotlinking of images
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} \.(jpe?g?|png|gif|ico|pdf|flv|swf|gz)$ [NC]
# RewriteCond %{HTTP_REFERER} !^https?://([^.]+\.)?yourdomain\. [NC]

# Only the following file extensions are allowed
Order Allow,Deny
Deny from all
<FilesMatch "\.([Jj][Pp][Ee]?[Gg]?|[Pp][Nn][Gg]|[Gg][Ii][Ff]|[Gg][Zz]|[Pp][Dd][Ff])$">
Allow from all
</FilesMatch>

# Block double extensions from being uploaded or accessed, including htshells
<FilesMatch ".*\.([^.]+)\.([^.]+)$">
Order Deny,Allow
Deny from all
</FilesMatch>

# Only allow GET and POST HTTP methods if needed
<LimitExcept GET POST>
Deny from all
</LimitExcept>
[/pre]
 

eugenio

Administrator
Staff member
Hello,
the .htaccess provided by amigamerlin doesn't prevent unauthorized access to your files so, again, my advise is: DON'T change the default .htaccess, read the security section of the documentation and always do additional tests to be sure your uploads folder isn't publicly accessible.

Best,
 

juergen_mueller

DaDaBIK Guru
Hi DLJonsson

I cannot reproduce the missing [x].

In terms of max width I would rather modify the lightbox css (I did not test it).

Best

Juergen
 

DLJonsson

Well-known member
Hi Juergen

Lightbox has been working fine for several weeks now,
thanks for getting us started with it.

The X appears on the install we have now, the size of the images is fine for all devices
tested so far.
 
Top