I am currently working on a website in which a user will answer some questions in a form, a sql query is performed, and the results are returned to a table in a new page. The number of results can range anywhere from 1 to 10,000 depending on the form criteria. I'm attempting to create a hyperlink for each returned result on one of the returned variables called FolderID that when clicked will create a pop-up window with 15 images displayed as a carousel. The location of the 15 images is unique to each result returned. I've gone through the W3Schools examples of BS modal and carousel and understand how they work. My question: is there an efficient way to code this? Below is what I have put together so far but I don't know how I would set the full path of the img src. As far as I'm aware from what I've read, the img src path can't be concatenated in html so would this need to be performed with php and then echo the code back inside the Wrapper for slides section? I'm at a loss right now on where to start so any feedback is appreciated. Additionally, if it helps to know, each of the images to be displayed are named the exact same thing (image1.png,image2.png,...image15.png), the only difference is the folder number in which they reside (such as C:\temp\1, C:\temp\2, C:\temp\3). Please let me know if you have any questions and I'll answer them as quickly as possible. Thanks.
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
<li data-target="#carousel-example-generic" data-slide-to="8"></li>
<li data-target="#carousel-example-generic" data-slide-to="9"></li>
<li data-target="#carousel-example-generic" data-slide-to="10"></li>
<li data-target="#carousel-example-generic" data-slide-to="11"></li>
<li data-target="#carousel-example-generic" data-slide-to="12"></li>
<li data-target="#carousel-example-generic" data-slide-to="13"></li>
<li data-target="#carousel-example-generic" data-slide-to="14"></li>
</ol>
<!-- Wrapper for slides -->
<!-- this is where I don't know how I would change the source names -->
<!-- point to the corresponding folder location -->
<div class="carousel-inner">
<div class="item active">
<img src="image1.png">
</div>
<div class="item">
<img src="image2.png">
</div>
<div class="item">
<img src="image3.png">
</div>
<div class="item">
<img src="image4.png">
</div>
<div class="item">
<img src="image5.png">
</div>
<div class="item">
<img src="image6.png">
</div>
<div class="item">
<img src="image7.png">
</div>
<div class="item">
<img src="image8.png">
</div>
<div class="item">
<img src="image9.png">
</div>
<div class="item">
<img src="image10.png">
</div>
<div class="item">
<img src="image11.png">
</div>
<div class="item">
<img src="image12.png">
</div>
<div class="item">
<img src="image13.png">
</div>
<div class="item">
<img src="image14.png">
</div>
<div class="item">
<img src="image15.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>In case anyone comes across this problem and needs a potential solution, the way I did it was inside the tag I initiated a <?php and then echoed out the other div statements so that the src pathnames could be concatenated. Good luck to all.