ekko-lightbox shows junk characters in model popup instead of showing actual image.

Question

I am using ekko-lightbox to display image in popup, images gets displayed as expected in thumbnail however when i click on image it opens model and displays junk characters.

Here is the application url which download image from database but open clicking the thimlnail it displays junk characters. http://localhost:8080/insignia/downloadImage.html?piid=1

And below link works fine even in model popup also. https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg

Below is my html code to display and download image gallery and preview image.

<c:forEach var="item" items="${form.patient.patientImages }" varStatus="status">
             <div class="container">
                <div class="row">
                    <div class="col-md-offset-1 col-md-10">
                        <div class="row">
                            <a href="http://localhost:8080/insignia/downloadImage.html?piid=1" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
                                <img src="http://localhost:8080/insignia/downloadImage.html?piid=1" class="img-responsive">
                            </a>
                             <a href="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
                                <img src="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s128/IMG_0736%20-%20original.jpg" class="img-responsive">
                            </a>
                             <a href="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
                                <img src="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg" class="img-responsive">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </c:forEach>
<script type="text/javascript">
        $(document).ready(function ($) {

            // delegate calls to data-toggle="lightbox"
            $(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
                event.preventDefault();
                return $(this).ekkoLightbox({
                    onShown: function() {
                        if (window.console) {
                            return console.log('Checking our the events huh?');
                        }
                    },
                    onNavigate: function(direction, itemIndex) {
                        if (window.console) {
                            return console.log('Navigating '+direction+'. Current item: '+itemIndex);
                        }
                    }
                });
            });

            //Programatically call
            $('#open-image').click(function (e) {
                e.preventDefault();
                $(this).ekkoLightbox();
            });
            $('#open-youtube').click(function (e) {
                e.preventDefault();
                $(this).ekkoLightbox();
            });

            $(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
                event.preventDefault();
                return $(this).ekkoLightbox({
                    onShown: function() {
                        var a = this.modal_content.find('.modal-footer a');
                        if(a.length > 0) {
                            a.click(function(e) {
                                e.preventDefault();
                                this.navigateTo(2);
                            }.bind(this));
                        }
                    }
                });
            });
        });
    </script>

Below is my spring controller code to download image from database.

@RequestMapping(value = "downloadImage.html", method = RequestMethod.GET)
public void downloadImage(@Valid @ModelAttribute("form") PatientForm form, BindingResult result, Model model, HttpServletResponse response) throws IOException {
    if (request.getParameter("piid") != null) {
        Long patientImageId = Long.valueOf(request.getParameter("piid"));
        response.setContentType("image/jpg");
        PatientImage patientImage = patientService.findImageById(patientImageId);
        OutputStream outputStream = null;
        try {
            outputStream = response.getOutputStream();
            outputStream.write(patientImage.getActualImage());
        } catch (IOException e) {
            logger.error(e.getMessage(), e);
            e.printStackTrace();
        } finally {
            outputStream.flush();
            outputStream.close();
        }
    }
}

Can somebody help me resolve this issue?

score 3 · Answer 1 · answered Jun 28 '17 at 12:52

3

You just need to specify the type of data for the modal e.g. data-type="image"

I had the same issue as my files did not have extensions. Adding the above resolved for me

See Options here for more http://ashleydw.github.io/lightbox/

answered Jun 28 '17 at 12:52

Alex

75
1
8

score 1 · Answer 2 · answered Sep 23 '15 at 05:21

I got it resolved by making below changes.

@RequestMapping(value = "downloadImage.jpg", method = RequestMethod.GET)

So when i changes the URL to downloadImage.jpg from downloadImage.html, modal popup was able to render the image.

So the URL which we put in anchor tag it expects to an extension of any of the image type i.e. jpg, gif etc.

My final URL will become as below in anchor tag, which will hit Spring MVC Controller and download byte[] from db and flushes the buffer having byte[].

http://localhost:8080/insignia/downloadImage.jpg?piid=1

Hope this helps.

ekko-lightbox shows junk characters in model popup instead of showing actual image.

2 Answers2