Q1) Is it possible to use JQuery on page load to detect the file name of an image and then dynamically position it on the page with CSS?
Q2) What is the most efficient way to achieve this without embedding iframe code inside a specific div.icon element?
In the context of an ecommerce website, I have a play button icon that will be placed within a product description. When clicked, this icon should display a YouTube video directly inside the product-image div box. The positioning of the icon next to the image navigation icons allows users to easily access the video while browsing through product images.
Below is the code I've implemented:
HTML:
<div class="container">
<div class="product-image"><img src=
"http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg"
alt=
"http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg" /></div>
<div class="image-nav"></div>
<div class="icon">
<iframe width="480" height="220" src=
"http://www.youtube-nocookie.com/embed/jvTv_oatLA0?rel=0" frameborder="0"
allowfullscreen=""></iframe>
</div>
</div>
CSS:
div.container
{
margin:10px 10px auto;
border:1px solid orange;
}
div.product-image
{
height:220px;
width:480px;
border:1px solid red;
margin:30px;
}
div.image-nav
{
border:1px solid black;
width:500px;
height:100px;
margin:30px;
}
div.icon
{
background-image: url("http://i46.tinypic.com/zmmbo8.png");
background-repeat: no-repeat;
height: 50px;
left: 540px;
position: relative;
top: -104px;
width: 50px;
cursor:pointer;
}
div.icon iframe
{
display:none;
position:relative;
top:30px;
}
div.product-image iframe
{
position: absolute;
top: 42px;
left:42px;
}
JQ:
var $video=$('div.icon iframe');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
$('.product-image').append($video);
});
jsfiddle: http://jsfiddle.net/t7qMF/2/