Hello,
I am no HTML wizard…
I am trying to make the Shapediver iFrame load with the press of a button. This will save credits by not loading the model every time some stray troll comes along, and enable me to have the SD model directly on my sales page.
Which I have accomplished, but it looks rather… crappy. Plus I would like to have the button go away after it has been pushed.
My dream scenario would be if I could have a nicely formated button including an image and some text, which will load the iframe onclick and hide the button afterward.
This code fucks up my page, and stops the load of images… but it works.
Here is my code so far:
<p align="center">
<button id="button">Start Interactive Design</button>
<div id="iframeHolder"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#button').click(function(){
if(!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" width="100%" height="625" src="https://viewer.shapediver.com/v2/2.20.2/iframe/remote.html?modelViewUrl=eu-central-1&ticket=TicketID&brandedMode=false&showControlsInitial=true" referrerpolicy="origin" allowfullscreen scrolling="no" style="overflow-x: hidden; overflow-y: hidden; border-width: 0;"></iframe>');
}
});
});
</script>
Edit:
This code here breaks my page, but if I remove it the button does not work…
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
Br HC