[英]Change image-link after button click
I'm using Bing image search API in my blog. 我在博客中使用Bing图片搜索API。 The response of my request:
我的请求的回复:
stdClass Object
(
[d] => stdClass Object
(
[results] => Array
(
[0] => stdClass Object
(
[__metadata] => stdClass Object
(
[uri] => https://api.datamarket.azure.com/Data.ashx/Bing/Search/Image?Query='Kitchen'&Market='en-us'&$skip=0&$top=1
[type] => ImageResult
)
[ID] => a40b8c85-8a6b-45a8-bce2-c07b16a942e6
[Title] => Our Kitchen Remodel is Complete!!! @ A Well Dressed Home
[MediaUrl] => http://awelldressedhome.com/wp-content/uploads/2010/10/Kitchen-31.jpg
[SourceUrl] => http://awelldressedhome.com/496-our-kitchen-remodel-is-complete/
[DisplayUrl] => awelldressedhome.com/496-our-kitchen-remodel-is-complete
[Width] => 4000
[Height] => 3000
[FileSize] => 5062458
[ContentType] => image/jpeg
And I get 50 results(50 different images and URLs) in this response. 在此响应中,我得到了50个结果(50个不同的图像和URL)。 I have a php code which give me the link of first image in my response:
我有一个php代码,可在响应中给我第一张图片的链接:
<?php
$context = stream_context_create($data);
$response = file_get_contents($requestUri, 0, $context);
$response=json_decode($response);
$response = $response->d->results[0]->MediaUrl;
echo "<pre>";
print_r($response);
echo "</pre>";
echo '
<td>
<img src="'.$response.'" height="100" weight="100">
</td>
';
echo("</ul>");
?>
Also I made a simple button, which gives me this first image which I got earlier from my response: 我还做了一个简单的按钮,它给了我第一张我从响应中得到的第一张图片:
<div class="form-group">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML ="<?php echo "<img src=".$response." height='100' width='100'/>"?>"
}
</script>
</div>
So the question is: How can I get new image each time when I click my button? 所以问题是:每次单击按钮时如何获得新图像? Sorry for my English and thanks for help.
对不起,我的英语,谢谢您的帮助。
You will first need to make sure to write your url's into javascript: 您首先需要确保将您的网址写入javascript:
<?php
$urlList = array();
foreach($response->d->results as $r){
$urlList[] = $r->MediaUrl;
}
?>
<script>
var urls = <?php echo json_encode($urlList); ?>;
</script>
and then you can use those url's in your function: 然后您可以在函数中使用这些网址:
<div class="form-group">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
var currentIndex = 0;
function myFunction(){
document.getElementById("demo").innerHTML = "<img src='" + urls[currentIndex++ % urls.length] + "' height='100' width='100'/>";
}
</script>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.