If I understand correctly, I can utilize a query string and parse it to display certain information. How would I apply that concept to load a specific image?
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'));
});
For instance, there are two images displayed with thumbs below to load a larger version. How could I implement something like http://www.example.com/?image=1 to pre-select thumb 1 or http://www.example.com/?image=2 to pre-select thumb 2?
I have noticed a query string format similar to this:
<?php
$parts = parse_url($url);
parse_str($parts['query'], $query);
echo $query['email'];
?>
However, I am unsure how to integrate this approach with the images.