时间戳

首页 > 解决方案 > 如何使用查询字符串加载某个图像？

javascript - 如何使用查询字符串加载某个图像？

问题描述

如果我理解正确，我可以使用查询字符串并对其进行解析以加载某些信息。我将如何使用它来加载某个图像？

https://codepen.io/anon/pen/qYXexG

<div id="gallery">
  <div id="panel">
    <img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_01_large.jpg" />
  </div>
  <div id="thumbs">
        <img src="http://robgolbeck.com/demos/image-swap/image_01_thumb.jpg" alt="1st image description" />
        <img src="http://robgolbeck.com/demos/image-swap/image_02_thumb.jpg" alt="2nd image description" />
</div>

JS

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

例如，这里有两张图片，下方有大拇指可以加载更大的图像。如何执行http://www.example.com/?image=1来预选拇指 1 和http://www.example.com/?image=2来预选拇指 2？

我看到一个查询字符串是这样的：

<?php
$parts = parse_url($url);
parse_str($parts['query'], $query);
echo $query['email']; 
?>

但我不知道如何将其与图像联系起来。

标签： javascripthtmlcss

解决方案

Most simple way would be: 

<img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_<?php echo $_GET['image'] ?: '01'; ?>_large.jpg" />

Note that you should use ?image=01 instead of ?image=1.

Otherwise you should do something like:

<?php 
     echo $_GET['image'] 
          ? 
          ( 
               $_GET['image'] < 10 
               ? '0'.$_GET['image'] 
               : $_GET['image'] 
          ) 
          : '01';
?>

It can be used within #largeImage like this:

<img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_<?php echo $_GET['image'] ? ( $_GET['image'] < 10 ? '0'.$_GET['image'] : $_GET['image'] ) : '01'; ?>_large.jpg" />

推荐阅读