I am trying to display an specific image from different types of links using dropdown option.
What I want to do:
I have 6 different types of links these links needs to be added into dropdown option. After the desired Option (category) is chosen from dropdown, Textbox will appear in the textbox I want to write specific image name for example 1,2,3,4,5,6,7,8, etc... then desired image will be displayed.
www.example.com/Category-1/images/8.png
www.example.com/Category-2/Imagess/3.png
www.example.com/Category-3/Imagess/5.png
www.example.com/Category-4/images/4.png
www.example.com/Category-5/images/7.png
www.example.com/Category-6/images/11.png
I need a some sort of JavaScript or jQuery Function to do this. I did some research with no luck.
If it's possible to create some type of function that performs above I would really appreciate that.
The code below shows images from only specific URL.
What I've tried:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4"><br>
<span>Please Choose desired Category</span>
<select class="SelectID">
<option value="1">Category-1</option>
<option value="2">Category-2</option>
<option value="3">Category-3</option>
<option value="4">Category-4</option>
<option value="5">Category-5</option>
<option value="6">Category-6</option>
</select>
</div>
<script type="text/javascript">
$(function() {
$('#btnShow').click(function() {
$("#imgMain").attr("src", $("#txtImageUrl").val());
$('#imgMain').width(200); // Units are assumed to be pixels
$('#imgMain').height(200);
})
})
</script><br>
<div>
Img URL:<input type="text" id="txtImageUrl" />
<input type="button" id="btnShow" value="Show Image" />
</div>
<br />
<img id="imgMain" />Here we are dynamically building the image URL based on the form. I've added some rudimentary validation also to point you in the right direction.
Please make sure to set your base URL and path correctly.
$(function() {
var category, folder, url;
$(".SelectID").change(function() {
category = $(this).val();
});
$("#folder").change(function() {
folder = $(this).val();
});
$("#txtImageUrl").keyup(function() {
url = $(this).val();
});
$('#btnShow').click(function() {
if (category && folder && url) {
$("#imgMain").attr("src", 'http://www.example.com/Category-' + category + '/' + folder + '/' + url + '.png').width(200).height(200);
} else {
console.log('You must choose a category and folder and set a url.');
}
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-4"><br>
<span>Please Choose desired Category</span>
<select class="SelectID">
<option value="3">Category-1</option>
<option value="4">Category-2</option>
<option value="5">Category-3</option>
<option value="6">Category-4</option>
<option value="7">Category-5</option>
<option value="8">Category-6</option>
</select>
</div>
<div class="col-md-4"><br>
<span>Please Choose desired Folder</span>
<select id="folder">
<option value="images">images</option>
<option value="Images">Images</option>
</select>
</div>
<br>
<div>
Img URL:<input type="text" id="txtImageUrl" />
<input type="button" id="btnShow" value="Show Image" />
</div>
<br />
<img id="imgMain" />