Dynamically display multiple images from database to jsp?

Question

Hello fellow stack overflowers.

I am stuck on a certain portion of a project and am looking for some advice.

I have a photo gallery page in jsp that is set up to display all the listings of photo albums and the photos within them based on the user's interest. It is currently set up so that whatever 'photo' option is selected will be redirected to another jsp with the outputstream decoding on that particular page. However, in order to see another photo or image, the user has to go 'back' to the photo galleries page and select another image for a new photo.

Is there a way to set up the galleries page so that all the photos can be dynamically displayed on the page OR is there possibly a way put some direction on the display.jsp page so that the user can simply click from one photo to the next?????

Code is below.

<div id="subSlideshow">
                <table>
                    <tr>
                        <td id="subpageSlideshow">
                            <table>
                                <tr>
                                    <td>
                                        <h1 id="subpageTitle">Galleries</h1>
                                            <form action="gallery" method="get">
                                                <%try{
                                                  Connection conn = GalleriesConnection.connect();
                                                  Statement st = conn.createStatement();
                                                  String sql = "SHOW TABLES IN GALLERIES;";
                                                  ResultSet rs = st.executeQuery(sql);
                                                  while(rs.next()){%>
                                                  <input class="wineDiv" type="submit" name="gallery" value="<%=rs.getString(1).toLowerCase() %>" />
                                                  <%} 
                                                  rs.close();
                                                  st.close();
                                                  GalleriesConnection.close(conn);
                                                  } 

                                                catch(Exception e){

                                                  }%>
                                            </form>
                                        <td>
                                    </tr>
                                <tr>                                    
                                    <td>
                                        <h1 id="subpageTitle">Images</h1>
                                        <form  action="pictures/display.jsp">
                                        <%try{
                                          Connection conn = GalleriesConnection.connect();
                                          Statement st = conn.createStatement();
                                          String sql = "SELECT PHOTO_NAME FROM "+gallery+" ;";
                                          ResultSet rs = st.executeQuery(sql);

                                          while(rs.next()){   
                                          String photoName = rs.getString(1);
                                          %>
                                            <input class="wineDiv" type="submit" name="photo" value="<%=photoName %>" />  
                                        <%   }
                                          rs.close();
                                          st.close();
                                          GalleriesConnection.close(conn);

                                        } catch(Exception e){                                               
                                        }%>
                                        </form>
                                    </td>
                                </tr>
                            </table>    


                        </td>
                        <td id="subpageInfo">
                            <h1 id="subpageTitle">Click on an image to see a larger view</h1>
                            <div id="slider">
                             <script src ="js/slides.js" type="text/javascript"></script>
                                <img id="1" src="pictures/winery_image1.jpg"  />
                                <img id="2" src="pictures/winery_image2.jpg" />
                                <img id="3" src="pictures/winery_image3.jpg" />
                                <img id="4" src="pictures/winery_image4.jpg" />
                                <img id="5" src="pictures/winery_image5.jpg" />
                            </div>   

                            <input class="previous" onclick="prev(); return false;" value="Previous Image" />
                            <input class="next" onclick="next(); return false;" value="Next Image" />                                               
                        </td>
                    </tr>
                </table>
            </div> 

All the action on the page is within this div. The first connection command retrieves all the table names in the database and spits the table names out on submit buttons. Additionally, the images currently listed in the subpageInfo are one of the desired spots on where I would like images from the database to be embedded. They make a nice little fadeOut() fadeIn() transition when the next and previous buttons are selected.

The second connection gets all the names of the photos and puts them in the form of submits as well. Selected photo names are sent to this page:

<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>

<% 
 byte[] imgData = null;
%>
<jsp:scriptlet>
String photo = request.getParameter("photo");
</jsp:scriptlet>
<%
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:8889/GALLERIES","myusername","mypassword");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT PHOTO FROM PHOTOS WHERE PHOTO_NAME = '"+photo+"';");

while (rs.next()) {
Blob image = rs.getBlob(1);
imgData = image.getBytes(1,(int)image.length());
}  
// display the image
response.setContentType("image/png");
OutputStream o = response.getOutputStream();
o.write(imgData);
o.flush();
o.close();

rs.close();
stmt.close();
con.close();
} catch (Exception e) {
out.println("Unable To Display image");
out.println("Image Display Error=" + e.getMessage());
return;
} 
%>

This program does everything it is asked to do, but I am having some difficulty on making it more user friendly. The desired effect is either embed the images in the subpageInfo div or to have some directives on the display.jsp page to go from one image to the next.

As always any and all help is greatly appreciated.

Answer 1

If you want to present a set of pictures I'd go for:

http://lokeshdhakar.com/projects/lightbox2/

Or if you want to do everything yourself, use only one page - use the selection form you mentioned and after sumbition, reload the same page including a decoded image into it. You can setup a javascript so that everytime user selects another picture the form gets submited so user doesn't have to click submit.

But I suggest rethinking the whole thing. What's your goal? Is this approach the best one? I'm usually way too deep in technical stuff that I don't see the solution user expects. That's why I ask random people to help me out.

Also - scriptlets? ew! Use JSTL and prepare everything in the controller. Or use Primefaces, JSF, managed beans and all the stuff that was made for this purpose.