将图像与链接集成
Posted
技术标签:
【中文标题】将图像与链接集成【英文标题】：integrate an image with link 【发布时间】：2015-01-09 07:32:41 【问题描述】：嗯，我认为用下图解释我的问题可能更容易：
从图片中可以看出，如果用户选择“按标题”，将出现一个文本框，用户可以在其中编写电影标题（我也为这个文本框使用了 jQuery 自动完成）。然后，如果用户单击“按此标题播放的电影”按钮，将显示一个新窗口，其中包含文本框中包含该术语的电影列表。
我的问题：
我想在它们旁边整合每部电影的小图像（可能还有一些其他信息，如电影年份、类型……），就像亚马逊所做的那样 (Please see here)。我将 renderitem 用于自动完成部分，它工作正常，但实际上我不知道如何在新窗口中做同样的事情。如果有人能帮助我，我将不胜感激。
这是我的代码：
<div id="m_scents" class="field">
<label style="margin-bottom:10px;" for="m_scnts"></label>
<input class="autofill4" type="textbox" name= "q27[]" id="q" placeholder="Enter movie titles here" />
<input type="button" value="Movies by this title" id="btnMove" style="display:none;"/>
</div>
<script type="text/javascript">
var selected;
$(document).ready(function ()
$("input[id='selectType']").change(function()
if ($(this).val() == "byTitle")
$("#m_scents2").hide();
$("#btnMove").show();
$("#m_scents").show();
$("#q").focus();
$("#q").autocomplete(
minLength: 0,
delay:5,
source: "query.php",
focus: function( event, ui )
event.preventDefault();
return false;
,
select: function( event, ui )
window.selected = ui.item.movieName;
return false;
).data("uiAutocomplete")._renderItem = function( ul, item )
return $("<li></li>")
.data( "item.autocomplete", item )
.append( "<a>" + (item.posterLink?"<img class='imdbImage' src='imdbImage.php?url=" + item.posterLink + "' />":"") + "<span class='imdbTitle'>" + item.movieName + "</span>" + "<div class='clear'></div></a>" )
.appendTo( ul );
;
);
$('#btnMove').on('click', function (e)
popupCenter("movieBytitle.php","_blank","400","400");
);
</script>
这是movieBytitle.php：
<body>
<div id= "field"
</div>
<script type="text/javascript">
var selected = parent.window.opener.selected;
$.ajax(
url: 'childfilm.php',
datatype: "json",
data:p:selected,
success: function(response)
$("#field").html(response);
);
</script>
</body>
这是 childfilm.php：
<?php
if(isset($_GET['p']) && !empty($_GET['p']))
try
include('imdbConnection.php');
$sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
$sql->execute(array(':p' => '%'.$_GET['p'].'%'));
while($row = $sql->fetch(PDO::FETCH_ASSOC))
$option = '<a href=movie.php?title="' . $row['movieName'] . '">' . $row['movieName'] . '</a><br />';
$html .= $option;
catch(PDOException $e)
echo 'ERROR: ' . $e->getMessage();
echo $html;
exit;
?>
更新：
这是新的 childfilm.php（感谢@ghost 的帮助）：
if(isset($_GET['p']) && !empty($_GET['p']))
include('imdbConnection.php');
$sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
$sql->execute(array(':p' => '%'.$_GET['p'].'%'));
?>
<table>
<tr>
<th></th>
<th>Title</th>
<th>Year</th>
<th>Genre</th>
</tr>
<?php while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
<tr>
<td><img class='imdbImage' src='imdbImage.php?url="<?php echo $row['posterLink'];?>'</td>
<td><a href="movie.php?title=<?php echo urlencode($row['movieName']); ?>"><?php echo $row['movieName']; ?></a></td>
</tr>
<?php endwhile; ?>
</table>
这是 imdbImage.php:
<?php
header("Content-type: image/jpeg");
$url = rawurldecode($_REQUEST['url']);
echo file_get_contents($url);
?>
新问题：
这是结果（不过，图像没有正确显示）：
【问题讨论】：
是图像路径，以及其他信息，如电影年份，流派也保存在表格中吗？只需将其包含在获取中 你只需要编辑你在childfilm.php中构建的html。此外，在弹出窗口中使用 ajax 是多余的。您可以改为通过 get 参数发送所选参数，并直接在movieBytitle.php 中运行 php 代码。最后，弹出窗口经常被反广告软件阻止，所以最好避免
这里的实现同jsfiddle.net/9GbkL/5
@Ghost：是的，我有电影的图片链接 + 他们的年份和类型
我很想在这个网站完成后访问它。看起来很酷！
【参考方案1】：
如果您已经在表格中获得了这些信息，那么只需将其包含在获取中并以表格形式呈现：
<?php
if(isset($_GET['p']) && !empty($_GET['p']))
include('imdbConnection.php');
$sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
$sql->execute(array(':p' => '%'.$_GET['p'].'%'));
?>
<table>
<tr>
<th></th>
<th>Title</th>
<th>Year</th>
<th>Genre</th>
</tr>
<?php while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
<tr>
<td><img src="path/to/images/<?php echo $row['filename']; ?>" /></td>
<td><a href="movie.php?title=<?php echo urlencode($row['movieName']); ?>"><?php echo $row['movieName']; ?></a></td>
<td><?php echo $row['year']; ?></td>
<td><?php echo $row['genre']; ?></td>
</tr>
<?php endwhile; ?>
</table>
【讨论】：
感谢帮助，我现在就试试，并通知你结果。 @mOna 肯定没有希望结果很好。 对不起，如果这是基本的东西，但我不知道如何将表格数据（电影链接 + 图像）传递到 movieBytitle 页面..（例如，之前，我将所有行都放入$option ..) 现在它是如何工作的？ @mOna 等等，你能帮我看看这个吗，我不明白发生了什么。你现在想做什么？您正在尝试在<img src="<here>" 中传递网址？
其实我想要的是：当单击“按此标题播放的电影”按钮时，它将显示电影（电影链接）+每部电影旁边的小图像（如amazon.com/s/…）......但是什么我现在看到了，只有电影的链接......（我不知道的图像应该有问题）以上是关于将图像与链接集成的主要内容，如果未能解决你的问题，请参考以下文章
将奏鸣曲媒体与奏鸣曲格式化程序ckeditor集成的图像限制文件大小