スタック オーバーフローの皆さん、こんにちは。
プロジェクトの特定の部分で立ち往生しており、アドバイスを求めています。
ユーザーの興味に基づいて、フォトアルバムのすべてのリストとその中の写真を表示するように設定されたjspのフォトギャラリーページがあります。現在、「写真」オプションが選択されていても、その特定のページで出力ストリームのデコードを使用して別の jsp にリダイレクトされるように設定されています。ただし、別の写真や画像を見るには、ユーザーはフォト ギャラリー ページに「戻って」、新しい写真の別の画像を選択する必要があります。
すべての写真を動的にページに表示できるようにギャラリー ページを設定する方法はありますか、またはユーザーが 1 つの写真から次の写真をクリックするだけで、display.jsp ページに何らかの方向性を設定する方法はありますか? ???????
コードは以下です。
<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>
ページ上のすべてのアクションは、この div 内にあります。最初の接続コマンドは、データベース内のすべてのテーブル名を取得し、送信ボタンにテーブル名を吐き出します。さらに、現在 subpageInfo にリストされている画像は、データベースからの画像を埋め込みたい場所の 1 つです。次のボタンと前のボタンが選択されたときに、fadeOut()、fadeIn() への小さな移行を行います。
2 番目の接続は、写真のすべての名前を取得し、それらを送信の形式にもします。選択した写真の名前がこのページに送信されます:
<%@ 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;
}
%>
このプログラムは、要求されたすべてのことを実行しますが、よりユーザーフレンドリーにするのに苦労しています。望ましい効果は、画像を subpageInfo div に埋め込むか、display.jsp ページにいくつかのディレクティブを配置して、ある画像から次の画像に移動することです。
いつものように、どんな助けも大歓迎です。