Answer Posted / 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 View All Answers