how to set up initialisation for Lightbox

Topic: how to set up initialisation for Lightbox

photokengoldstein-com-au pro asked 5 years ago

where do I put the following code to initialise the Lightbox:// MDB Lightbox Init$(function () { $("#mdb-lightbox-ui").load("mdb-addons/mdb-lightbox-ui.html");});

Add comment

Jakub Strebeyko staff answered 5 years ago

0 0 Best answer

Dear All, 
To turn a bunch of pictures into a full-fledged interactive gallery using MDB Lightbox you need two things in your project:
1) Proper <code>html</code> structure in place, including nested <code>div</code>, <code>figure</code> and <code>img</code> tags with proper classes in place (check out <a href="https://mdbootstrap.com/javascript/lightbox/#basic-example">the example here</a>) 
2) JavaScript initialization of nifty scripts doing the whole work for us. It means that we need the aforementioned <code>Init function</code> somewhere in our JS files. The preferred way to do it is to create an <code>any-name-you-like-really[dot]js</code> file in your JavaScript files directory, and then put the initializing script inside the file and save it. You need to attach your newly created JS file to the <code>html</code> document exactly the same way as all the others are attached - in between <code>script</code> tags, with <code>src</code> attribute pointing at location of <code>any-name-you-like-really[dot]js</code> file. There is one requirement - it must come after <code>mdb.js</code>, <code>mdb.min.js</code> or any other file that might be needed to run our splendid LightBox Gallery.
In case of questions, don't hesitate to ask.
Regards, 
Kuba

Please insert min. 20 characters.

Dear All,

To turn a bunch of pictures into a full-fledged interactive gallery using MDB Lightbox you need two things in your project:

1) Proper html structure in place, including nested div, figure and img tags with proper classes in place (check out the example here)
2) JavaScript initialization of nifty scripts doing the whole work for us. It means that we need the aforementioned Init function somewhere in our JS files. The preferred way to do it is to create an any-name-you-like-really[dot]js file in your JavaScript files directory, and then put the initializing script inside the file and save it. You need to attach your newly created JS file to the html document exactly the same way as all the others are attached - in between script tags, with src attribute pointing at location of any-name-you-like-really[dot]js file. There is one requirement - it must come after mdb.js, mdb.min.js or any other file that might be needed to run our splendid LightBox Gallery.

In case of questions, don't hesitate to ask.

Regards,
Kuba

Aleksandar Srbljak pro commented 4 years ago

Hi, i have done like you said it, but it won't work, and i don't know why..i have copied lightbox gallery with heading and created new js file with initialization code, and still doesn't works..how can i fix that ? Thanks !

Ollie Vincent pro commented 4 years ago

Have you checked the filepath for you JS file? If so - try pasting the lightbox script at the bottom of your html file - just before the closing body tag.

Ivo Zincovsky free commented 3 years ago

@Aleksandear Have you uploaded it on the server, or you've tested on your desktop? Don't know why, but it doesn't work until you upload it or run on local server.

Add comment

Bartłomiej Malanowski staff answered 5 years ago

0 0 Best answer

Hi, guys! You should put that code after mdb.js

obibas pro commented 5 years ago

can I also put it after mdb.min.js? It is not working on my page, what am I doing wrong? https://blacksheepsnowboardschool.com/blog/splitboarding-the-lofoten.html

Add comment

jay2jam pro answered 5 years ago

0 0 Best answer

I need also to know.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

photokengoldstein-com-au

Pro User 0Support score
3Questions 0Answers 0Snippets