Before getting started to create a dynamic image gallery with PHP<\/b>, take a look at the file structure.<\/p>\n To store image file information a table needs to be created in the database. The following SQL creates an You need to create a directory on the server where the image files will be stored.<\/p>\n The In this file, all the images are fetched from the database and listed in a gallery view. Also, the image gallery popup is implemented in the dynamic photo gallery<\/b> using the fancyBox jQuery lightbox plugin.<\/p>\n fancyBox Plugin:<\/b> To bind fancyBox events on the image gallery, specify a selector and call the fancybox()<\/b> method.<\/p>\n PHP & HTML Code:<\/b> CSS Code:<\/b> Now, if you open the index.php file on the browser, you’ll see a fully functional dynamic image gallery with fancyBox popup<\/b> in the web page.<\/p>\ndynamic_image_gallery_with_php\/<\/span>\r\n\u251c\u2500\u2500 dbConfig.php\r\n\u251c\u2500\u2500 index.php\r\n\u251c\u2500\u2500 fancybox\/<\/span>\r\n\u2502 \u251c\u2500\u2500 jquery.fancybox.js\r\n\u2502 \u2514\u2500\u2500 jquery.fancybox.css\r\n\u251c\u2500\u2500 images\/<\/span>\r\n\u2502 \u2514\u2500\u2500 thumb\/<\/span>\r\n\u251c\u2500\u2500 js\/<\/span>\r\n\u2502 \u2514\u2500\u2500 jquery.min.js\r\n\u2514\u2500\u2500 css\/<\/span>\r\n \u2514\u2500\u2500 style.css\r\n<\/pre>\nCreate Database Table<\/h2>\n
images<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `images`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `file_name`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `title`<\/span> varchar<\/span>(255<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `uploaded_on`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n `status`<\/span> tinyint(1<\/span>) NOT<\/span> NULL<\/span> DEFAULT<\/span> 1<\/span> COMMENT<\/span> '1=Active | 0=Inactive'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nCreate Directory to Store Images<\/h2>\n
\n
![\"dynamic-photo-gallery-images-thumbnails-directory-codexworld\"](\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/03\/dynamic-photo-gallery-images-thumbnails-directory-codexworld.png\")
<\/div>\nDatabase Configuration (dbConfig.php)<\/h2>\n
dbConfig.php<\/code> file is used to connect and select the database. Specify the database host ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) as per your MySQL database credentials.<\/p>\n<?php
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
<\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
<\/span>$dbName <\/span>= <\/span>\"codexworld\"<\/span>;
<\/span>\/\/ Create database connection
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
<\/span>\/\/ Check connection
<\/span>if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Connection failed: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}<\/span><\/pre>\nDynamic Image Gallery (index.php)<\/h2>\n
\nThe jQuery fancyBox plugin is used for displaying the image gallery on the popup, so, include the CSS and JS library of the fancyBox plugin.<\/p>\n<!-- Fancybox CSS library --><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"fancybox\/jquery.fancybox.css\"<\/span>><\/span>\r\n\r\n<!-- jQuery library --><\/span>\r\n<script<\/span> src<\/span>=\"js\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n\r\n<!-- Fancybox JS library --><\/span>\r\n<script<\/span> src<\/span>=\"fancybox\/jquery.fancybox.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n<script<\/span>><\/span>\r\n$(\"[data-fancybox]\"<\/span>).fancybox();<\/span>\r\n<\/script<\/span>><\/span><\/pre>\n
\nThe image’s data is fetched from the MySQL database and the files are retrieved from the server (images\/<\/code> directory) using PHP. To add the fancyBox image gallery you need to specify the following attributes in the anchor tag of the images.<\/p>\n\n
href<\/code> attribute.<\/li>\ndata-fancybox=\"gallery\"<\/code> attribute.<\/li>\ndata-caption<\/code> attribute.<\/li>\n<\/ul>\n<div<\/span> class<\/span>=\"gallery\"<\/span>><\/span>\r\n <?php
<\/span>\/\/ Include database configuration file
<\/span>require <\/span>'dbConfig.php'<\/span>;
<\/span>\/\/ Retrieve images from the database
<\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM images WHERE status = 1 ORDER BY uploaded_on DESC\"<\/span>);
if(<\/span>$query<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
while(<\/span>$row <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>()){
<\/span>$imageThumbURL <\/span>= <\/span>'images\/thumb\/'<\/span>.<\/span>$row<\/span>[<\/span>\"file_name\"<\/span>];
<\/span>$imageURL <\/span>= <\/span>'images\/'<\/span>.<\/span>$row<\/span>[<\/span>\"file_name\"<\/span>];
<\/span>?>
<\/span> <a<\/span> href<\/span>=\"<?php <\/span>echo <\/span>$imageURL<\/span>; <\/span>?><\/span>\"<\/span> data-fancybox<\/span>=\"gallery\"<\/span> data-caption<\/span>=\"<\/span><?php <\/span>echo <\/span>$row<\/span>[<\/span>\"title\"<\/span>]; <\/span>?><\/span><\/span>\" ><\/span>
<img<\/span> src<\/span>=\"<?php <\/span>echo <\/span>$imageThumbURL<\/span>; <\/span>?><\/span>\"<\/span> alt<\/span>=\"\"<\/span> \/><\/span><\/span>
<\/a<\/span>><\/span>
<?php <\/span>}
} <\/span>?><\/span>\r\n<\/div<\/span>><\/span><\/pre>\n
\nThe following CSS is used to define a basic design of the image gallery.<\/p>\n.gallery<\/span> img<\/span> {\r\n width<\/span>: 20%<\/span>;\r\n height<\/span>: auto;\r\n border-radius<\/span>: 5px<\/span>;\r\n cursor<\/span>: pointer;\r\n transition<\/span>: .3s<\/span>;\r\n}<\/pre>\nTesting<\/h2>\n