How to add lightbox2 in magento?

Question Posted / yeshwant singh

1 Answers
16 Views
I also Faced
E-Mail Answers

How to add lightbox2 in magento?..

Answer / Sudheer Kumar

To add Lightbox2 to Magento, follow these steps:

1. Download the latest version of Lightbox2 from the official website (<https://lightbox-js.com/>).
2. Extract the contents of the downloaded zip file.
3. Upload the 'lightbox' and 'lightbox-plus' directories to your Magento theme's root directory. If you have a custom theme, upload them to the respective folder.
4. Navigate to app > design > frontend > [your_theme] > web in your Magento installation. Create a new file called 'requirejs-config.js'.
5. Add the following lines to the requirejs-config.js file:

var config = {
map: {
'*': {
lightbox: '<your_theme>/web/lightbox'
}
},
shim: {
lightbox: {
deps: ['jquery']
}
}
};

6. Replace '<your_theme>' with your Magento theme name (e.g., default, luma, etc.).
7. In your template file (.phtml), include the necessary Lightbox2 files and initialize the library:

<link rel="stylesheet" href="<your_theme>/web/lightbox/css/lightbox.min.css">
<script src="<your_theme>/web/lightbox/js/lightbox-plus-jquery.min.js"></script>

8. Add image links or other content with the 'a' tag and data-lightbox attribute as needed.

Is This Answer Correct ?

0 Yes

0 No

Post New Answer