$( ".clicky-class-name" ).click(function() {
var iframeStyle = '<?php the_field('style_id');?>';
var iframe = "https://yoururl?style=";
var loadColorAtr = '&color=';
var colorCode = $(this).data('color-code');
var loadStyle = iframe + iframeStyle + loadColorAtr + colorCode;
//alert(loadStyle);
$('#iframe-id').attr('src', loadStyle);
});
//We start off with a primary url we are going to add values to: var iframe
//We are also including a php data from a field called 'style_id' for this example we will call it shirt
//The class 'clicky-class-name' has a data attribute called 'data-color-code' that needs to be placed after the loadColorAtr which is &color=
//The HTML Strucutre would look like: <div class="clicky-class-name" data-color-code="black">Black</div>
//<iframe id="iframe-id" src="">
//So the source we get for the iframe after the click would be: https://yoururl?style=shirt&color=black
jQuery on click method to change an iframe's url source concatenated on data from a php field, and color acquired from a class's data attribute.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.