草庐IT

PHP 和 JavaScript 产品/图像查看器

coder 2024-05-01 原文

我正在开发这个网页，它在一种图库中显示一个产品的多个图像。但是，我在尝试让缩略图在单击时显示为主图像时遇到了很大的麻烦。

这是指向相关页面的链接:http://www.carbondelight.co.uk./prodview.php?id=50

我将 bxslider (bxslider.com) 用于缩略图 slider ，我最初的计划是简单地编写一些 JavaScript，将主图像更改为相关的缩略图图像。尽管这就是我陷入困境的地方，因为我想不出实现这一目标的好方法。

我研究过将所有主要图像设置为显示的方法:无；禁止一张图片，然后像 Sohtanaka 在他的教程 (http://www.sohtanaka.com/web-design/css-multiple-image-viewer-thumbnails/) 中所做的那样，通过 javascipt 更改它们的显示属性，我研究了使用 JavaScript 更改主图像的 src 位置。

我要说的是，我不是 PHP 或 JavaScript 专家，所以我的代码在形状或形式上没有任何效率，所以我想专注于简单地解决手头的问题，而不是将所有代码更改为使其更有效率。但是，如果我必须重写一些查询才能完成这项工作，那么我会洗耳恭听。

我怎样才能使缩略图和主要图像正常工作？

注意:我已经清理了代码并删除了一些简单的样式类以使其更具可读性。如果有好处，我也可以包含 CSS。

这是我的代码:

if (isset($_GET['id']))
$id = cleanString($_GET['id']);

$sql = "SELECT * FROM partTable WHERE partID='$id'";
$result = performQuery($sql);

$sql2 = "SELECT car FROM carTable WHERE carID='$result[6]'";
$result2 = performQuery($sql2);

$sql3 = "SELECT category FROM categoryTable WHERE categoryID='$result[7]'";
$result3 = performQuery($sql3);

$sql4 = "SELECT medImg, lrgImg FROM imageTable WHERE partID='$id'";
$result4 = mysql_query($sql4);

$rows = mysql_num_rows($result4);

$sql5 = "SELECT smlImg FROM imageTable WHERE partID='$id'";
$result5 = mysql_query($sql5);

$rows5 = mysql_num_rows($result5);

$row = mysql_fetch_row($result4);
echo "<a id='single_image' href='$row[1]'><img src='$row[0]' /></a>"; 

for ( $j = 1 ; $j < $rows ; $j++)
{
    $row = mysql_fetch_row($result4);
    echo "<a id='single_image' href='$row[1]'><img style='display:none;' src='$row[0]'/></a>"; 
}


echo "<div id='slider1'>";

for ( $j = 0 ; $j < $rows5 ; ++$j)
{
    $row = mysql_fetch_row($result5);
    echo "<div class='pv-thumb'><a href='javascript:void(0)' onclick='superalert()'><img  src='$row[0]'  /></a></div>";
}

echo "</div>";

最佳答案

好的，这是一个 JavaScript 问题。为了让自己的生活更轻松，给自己弄一份 jQuery，然后你可以这样做:

// Wait for document ready
$(document).ready(function() {
    // Attach to all thumbnails (give all images a class of 'thumbnail')
    $('img.thumbnail').click(function() {
        // Let us assume your thumbs and medium images are thus:
        // Thumb: /admin/image/proSml/96.jpg
        // Medium: /admin/image/proMed/96.jpg

        // Reset source of main image based on thumbnail
        var thumbSrc = $(this).attr('src');
        var medSrc = thumbSrc.replace('proSml', 'proMed');
        $('#mainimage').attr('src', medSrc);
    });
);

关于PHP 和 JavaScript 产品/图像查看器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7979293/

JavaScriptPHP39resultsection

有关PHP 和 JavaScript 产品/图像查看器的更多相关文章

  1. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  2. 神州数码无线产品（AC+AP）配置 - 2

    注意：本文主要掌握DCN自研无线产品的基本配置方法和注意事项，能够进行一般的项目实施、调试与运维AP基本配置命令AP登录用户名和密码均为：adminAP默认IP地址为：192.168.1.10AP默认情况下DHCP开启AP静态地址配置：setmanagementstatic-ip192.168.10.1AP开启/关闭DHCP功能：setmanagementdhcp-statusup/downAP设置默认网关：setstatic-ip-routegeteway192.168.10.254查看AP基本信息：getsystemgetmanagementgetmanaged-apgetrouteAP配

  3. 阿里云RDS——产品系列概述 - 2

    基础版云数据库RDS的产品系列包括基础版、高可用版、集群版、三节点企业版，本文介绍基础版实例的相关信息。RDS基础版实例也称为单机版实例，只有单个数据库节点，计算与存储分离，性价比超高。说明RDS基础版实例只有一个数据库节点，没有备节点作为热备份，因此当该节点意外宕机或者执行重启实例、变更配置、版本升级等任务时，会出现较长时间的不可用。如果业务对数据库的可用性要求较高，不建议使用基础版实例，可选择其他系列（如高可用版），部分基础版实例也支持升级为高可用版。基础版与高可用版的对比拓扑图如下所示。优势 性能由于不提供备节点，主节点不会因为实时的数据库复制而产生额外的性能开销，因此基础版的性能相对于

  4. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  5. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  6. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  7. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

  10. ruby-on-rails - 如何播种图像的路径？ - 2

    Organization和Image具有一对一的关系。Image有一个名为filename的列，它存储文件的路径。我在Assets管道中包含这样一个文件:app/assets/other/image.jpg。播种时如何包含此文件的路径？我已经在我的种子文件中尝试过:@organization=...@organization.image.create!(filename:File.open('app/assets/other/image.jpg'))#Ialsotried:#@organization.image.create!(filename:'app/assets/other/i

随机推荐