fullscreen for images + support for slideshow

[mgogoulos]

fullscreen for images + slideshow support

Acceptance criteria

• clicking an image opens it in an enlarged view within a modal window. The image displays in high resolution, scaling appropriately to fit the screen without distortion.
• The viewer is fully responsive, automatically adapting to different screen sizes, including mobile, tablet, and desktop.
  Users can easily close the enlarged view (modal) using a close (X) button or by clicking outside the image in modal mode.
• Users can navigate forward and backward between images without closing the viewer (slideshow). Navigation controls are visible and accessible (e.g., arrow buttons or keyboard arrow keys).

For this to happen, the backend needs to provide a list with the following

• thumb_image, poster_image, url, eg [{'thumb_image1': 'http://address.com/', 'poster_image1': 'http://address.com/', 'url1': 'http://address.com'}, {'thumb_image2': 'http://address.com/', 'poster_image2': 'http://address.com/', 'url2': 'http://address.com'}]

• When clicking next/previous, it will show the poster_image.
• On the list of icons, it shows the thumb_image.
• If you click on a thumb_image, you get to see the poster_image of that object
• if you click on a poster_image, you get directed to that media page
• if you hit escape, you get back to the image you have been before clicking the image

[mgogoulos]

#1108