Why my fancybox doesn't work when I replace div id=book0... and add jquery.load like that in my page:
<div id="book0" class="withoutborder0"></div>
<div id="book1" class="withoutborder1"></div>
<div id="book2" class="withoutborder2"></div>
<div id="book3" class="withoutborder3"></div>
<div id="book4" class="withoutborder4"></div>
$('#book0').load('import.html #book0img');
$('#book1').load('import.html #book1img');
$('#book2').load('import.html #book2img');
$('#book3').load('import.html #book3img');
$('#book4').load('import.html #book4img');
Here is my page with jquery.load
http://www.booclin.ovh/tom/365/book.html
Here is the link and the code of my page without jquery.load who works fine
http://www.booclin.ovh/tom/365/bookb.html
code
$("img").error(function() { $(this).parent().remove(); });
$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox();
console.clear();
$('#logohomepage').click(function() {
$('body').css({ 'overflow': 'auto' });
});
function showDiv() {
document.getElementById('logohomepage').style.display = "none";
document.getElementById('allgalleries').style.display = "block";
}
$("#launcherbook0, #launcherbook0b, #launcherbook0c").on("click", function(){
$("a.fancyboxgallerybook0").eq(0).trigger("click");
});
$("#launcherbook1, #launcherbook1b").on("click", function(){
$("a.fancyboxgallerybook1").eq(0).trigger("click");
});
$("#launcherbook2, #launcherbook2b").on("click", function(){
$("a.fancyboxgallerybook2").eq(0).trigger("click");
});
$("#launcherbook3, #launcherbook3b").on("click", function(){
$("a.fancyboxgallerybook3").eq(0).trigger("click");
});
$("#launcherbook4, #launcherbook4b").on("click", function(){
$("a.fancyboxgallerybook4").eq(0).trigger("click");
});
$("#launcherinfo, #launcherinfob").on("click", function(){
$("#infofull").eq(0).trigger("click");
});
$(".fancybox-lock").bind("mousewheel", function() { return false; });
$( function( ){
$( "#closegallerybook0, #closegallerybook1, #closegallerybook2, #closegallerybook3, #closegallerybook4, #infofull" ).on( "click", function(){ $.fancybox.close(); return false; });
});
$(".fancyboxthumbnailsgallerybook0, .hidemenubook0").click(function(){
$(".secondleftpartbook0").show();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook0").click(function(){
$(".secondleftpartbook0").hide();
$("#book0").show();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook1, .hidemenubook1").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").show();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook1").click(function(){
$(".secondleftpartbook1").hide();
$("#book0").hide();
$("#book1").show();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook2, .hidemenubook2").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").show();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook2").click(function(){
$(".secondleftpartbook2").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").show();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook3, .hidemenubook3").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").show();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});
$("#closegallerybook3").click(function(){
$(".secondleftpartbook3").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").show();
$("#book4").hide();
$("#infofull").hide();
});
$(".fancyboxthumbnailsgallerybook4, .hidemenubook4").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").show();
$(".partmenuhideninfo").show();
});
$("#closegallerybook4").click(function(){
$(".secondleftpartbook4").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").show();
$("#infofull").hide();
});
$(".hidemenuinfo").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").hide();
$("#infofull").show();
});
$("#infofull").click(function(){
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
});
function toggleOverlay () {
var overlay = document.querySelector("div");
overlay.classList.toggle('hide-overlaymenu');
document.body.style.overflow = "hidden";
}
$('#menumodalclose').click(function() {
$('body').css({
'overflow': 'scroll'
});
});
$(function() {
var salt = Math.floor(Math.random() * 1000),
time;
function load_script() {
$('#backgroundhomepage').remove();
$.getScript("index/js/backgroundhome.js?s=" + salt, function() {
$('script:last').attr('id', 'myscript');
salt = Math.floor(Math.random() * 1000);
time = setTimeout(function() {
load_script();
}, 5 * 1000);
});
}
load_script();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/js/modernizr.custom.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/book/fancybox.js"></script>
<script id="backgroundhomepage" src="http://www.booclin.ovh/tom/365/index/js/backgroundhome.js"></script>
<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/css/style.css">
<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.css" type="text/css">
<div class="hide-overlaymenu">
<div class="overlaymenu">
<div class="overlaymenu-content">
<div class="buttonmenuinside-container">
<a id="menumodalclose" class="buttonmenuinside" onclick="toggleOverlay()">
<i class="fa fa-toggle-off"></i>
<i class="fa fa-toggle-on"></i>
<img style="height:20px; width:20px; opacity:0.5;" src="http://www.starkasia.com/wp-content/uploads/icons/menuclose.png" alt="">
</a>
</div>
<div class="menucontent">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0" data-fancybox-group="book0" href="javascript:void(0);">
BOOK0</a>
<br/><br/><br/>
<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/>
<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2" data-fancybox-group="book1" href="javascript:void(0);">BOOK 2</a><br/>
<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3" data-fancybox-group="book1" href="javascript:void(0);">BOOK 3</a><br/>
<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4" data-fancybox-group="book1" href="javascript:void(0);">ARCHIVE</a><br/>
<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfo" href="javascript:void(0);">INFO</a>
</div>
</div>
</div>
</div>
<div id="logohomepage" style="display:inline;" onclick="showDiv()">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0b" data-fancybox-group="book0" href="javascript:void(0);">
<span style="width: 100%; max-width:120px; position: absolute; top: 100px; left:-100%; right:-100%; margin:auto;">
CLICK ME</span>
</a>
</div>
<div id="allgalleries" style="display:none;">
<div class="leftpart">
<div class="firstleftpart">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0c" data-fancybox-group="book0" href="javascript:void(0);">BOOK 0</a>
<br/><br/><br/>
<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/>
<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);">BOOK 2</a><br/>
<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3b" data-fancybox-group="book3" href="javascript:void(0);">BOOK 3</a><br/>
<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4b" data-fancybox-group="book4" href="javascript:void(0);">ARCHIVE</a><br/>
<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfob" href="javascript:void(0);">INFO</a>
<br/><br/><br/>
</div>
<div style="display:none;" class="secondleftpartbook0">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook0" class="opengallerybook0" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook1">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook1" class="opengallerybook1" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook2">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook2" class="opengallerybook2" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook3">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook3" class="opengallerybook3" href="javascript:;">
THUMBNAILS</a>
</div>
<div style="display:none;" class="secondleftpartbook4">
<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>
<a style="font-size: 8px;" href="javascript:;"> | </a>
<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>
<br/>
<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook4" class="opengallerybook4" href="javascript:;">
THUMBNAILS</a>
</div>
<a class="iconfirstleftpart" style="cursor:pointer" onclick="toggleOverlay()">
<img style="height:20px; width:20px;" src="http://www.starkasia.com/wp-content/uploads/icons/menu.png" alt=""></a>
</div>
<div class="rightpart">
<div id="globalgalerie">
<div id="book0" class="withoutborder0">
<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" title="">
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" title="">
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" alt=""/>
</a>
</div>
<div id="book1" class="withoutborder1">
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" title="">
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" alt=""/>
</a>
<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" title="">
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" alt=""/>
</a>
</div>
<div id="book2" class="withoutborder2">
<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" title="">
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" alt=""/>
</a>
<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" title="">
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" alt=""/>
</a>
</div>
<div id="book3" class="withoutborder3">
<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" title="">
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" title="">
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" alt=""/>
</a>
</div>
<div id="book4" class="withoutborder4">
<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" title="">
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" alt=""/>
</a>
<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" title="">
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" alt=""/>
</a>
</div>
<div id="infofull">
<span class="spanbold">INFO</span><br/><br/>
BLABLABLA
</div>
</div>
</div>
</div>
.load() method is assynchroneous...
Meaning it has a delay to get the response.
This delay is long enought for the script to execute completely before a response is received.
Moreover, you are initiating your FancyBox instances before calling the loads.
So the elements (ancors) you provide for it are obviously missing.
So a solution is to modify this line:
$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox();
as a function:
function fancyInit(x){
$("#book"+x).find("a.fancyboxgallerybook"+x).fancybox();
}
Then use the .load() callback:
$('#book0').load('import.html #book0img',fancyInit(0));
$('#book1').load('import.html #book1img',fancyInit(1));
$('#book2').load('import.html #book2img',fancyInit(2));
$('#book3').load('import.html #book3img',fancyInit(3));
$('#book4').load('import.html #book4img',fancyInit(4));
The callback exectutes when .load() as completed successfully.
Related
Thanks #Kathara Your help is greatly appreciated
I have created the video layout with a picture in picture mode option click the video move to the background works fine, but I need to move the whole video wrap into the main video wrap not only the video, with the card image name, and dropdowns also moved on within the video list and also changing the id attribute of videoWraping element how to modify it?
here is my demo code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="container-fluid m-0" id="videos m-0">
<div class="row vh-100 align-items-end align-items-lg-center m-0" >
<div class="col-12 offset-lg-8 col-lg-4 text-center text-lg-end ">
<div id="VisualMedia">
<div class=" main-video mainVideoWrap" id="cardvideo_localstream">
<video id="video-main" class="video1" src="https://www.dropbox.com/s/ve0apo59semvv70/example-video-1.mp4?raw=1 " muted autoplay loop type="video/mp4" ></video>
<div class="card-img-overlay p-0 " id="mainCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videoBg
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" >
<i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a>
</li>
</ul>
</div>
</div>
<div id="mainlogo">
<img src="./client_img.png" alt="logo" class="img-fluid rounded float-end" />
</div>
</div>
</div>
<!-- <div class="row vh-100 align-items-end align-items-lg-center m-0"> -->
<div class=" video-list listofvideos">
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted autoplay loop type="video/mp4" ></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist1
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted ></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist2
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false" >
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted autoplay loop type="video/mp4"></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist3
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false" >
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a>
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#"><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-person-x m-1"></i>Remove</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="position-relative videoWrap" id="cardvideo_remotestream">
<video src=" https://www.dropbox.com/s/se8r4svvnt2qpfu/example-video-2.mp4?raw=1 " muted autoplay loop type="video/mp4"></video>
<div class="card-img-overlay p-0 " id="imgCard">
<div>
<span class="text-capitalize user-name">
<i class="icon-user pe-1"></i>videolist4
</span>
<div id="dropDown" class="dropdown float-end">
<button class="btn btn-sm btn-danger me-3 mt-2 dropdown-toggle" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false"
>
<i class="icon-dot"></i>
</button>
<ul id="drop" class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu" >
<li>
<a id="dropdown_items" class="dropdown-item" href="#" ><i class="bi bi-mic-mute m-1"></i>Start Audio</a >
</li>
<li> <a id="dropdown_items" class="dropdown-item" href="#"
><i class="bi bi-camera-video-off m-1"></i>Stop Video</a >
</li>
<li>
<a id="dropdown_items" class="dropdown-item" href="#"
><i class="bi bi-person-x m-1"></i>Remove</a >
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
<!-- row column -->
</div>
</div>
</div>
</div>
</body>
<script src="./bootstrap/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</html>
style.css
body{
margin: 0;
transition: all 0.3s ease;
}
/* main video */
.main-video video{
transition: all 0.3s ease-in-out;
position: absolute;
object-fit: cover;
height: 100vh;
width: 100%;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
}
.main-video #mainlogo{
position: fixed;
bottom: 2rem;
right: 1rem;
}
.main-video #mainlogo img{
width: 40px;
}
#main-video{
transition: all 0.3s ease-in-out;
}
.videoWrap{
position: relative;
max-width: 320px;
display: inline-block;
}
.videoWrap #logo{
position: absolute;
bottom: 2rem;
right: 1rem;
}
.videoWrap #logo img{
width: 40px;
}
.video-list video{
transition: all 0.3s ease-in-out;
max-width: 320px;
margin: 0 1rem 1rem 0;
border-radius: 1.25rem;
z-index: 2;
}
.user-name{
color: #fff;
float: left;
padding: 0.125rem 0.25rem;
background: #000;
border-radius: 0.5rem;
margin: 0.5rem 0 0 1rem;
}
#media screen and (max-width:768px){
.videoWrap,
.video-list video{
max-width: 217px;
}
}
#media only screen and (min-device-width: 200px) and (max-device-width: 992px) and (orientation:landscape) {
.videoWrap,
.video-list video{
max-width: 150px;
}
.videoWrap, #dropDown {
margin: -0.8rem 0.2rem -1.8rem -0.3rem;
left: 31px;
bottom: 4px;
}
.videoWrap .user-name{
margin: -0.8rem 0.2rem -1.8rem -0.3rem;
left: 31px;
bottom: 4px;
}
}
#media screen and (max-width:480px){
.videoWrap,
.video-list video{
max-width: 149px;
bottom: 4rem;
}
.videoWrap #logo{
bottom: 1.5rem;
}
.videoWrap #logo img{
width: 30px;
}
}
jsfile
// using jQuery
var initVideoSwapping = function() {
// check if there is an element first
if ($('.video-list #imgCard').length > 0 && $('#video-main').length > 0) {
$('.video-list .videoWrap').on('click', function() {
var $thisVideoWrapId = $(this).find('.videoWrap');
var $mainVideoWrapId= $('.main-video')
$mainVideoWrapId.attr('id', 'cardvideo_remotestream')
$thisVideoWrapId.attr('id', 'cardvideo_localstream')
// video change
var $thisVideo = $(this).find('video');
var $mainVideo = $('#video-main');
// clone the two elements to change them
// without modifying the original element
var $thisVideoClone = $thisVideo.clone();
var $mainVideoClone = $mainVideo.clone();
// exchange the ids
$thisVideoClone.attr('id', 'video-main');
$mainVideoClone.attr('id', '');
// insert the clones before the originals
// and remove the originals
$thisVideoClone.insertBefore($mainVideo);
$mainVideo.remove();
$mainVideoClone.insertBefore($thisVideo);
$thisVideo.remove();
});
}
}
$(function() {
initVideoSwapping();
});
main-videoWrap <--> video-list videoWrap, video-list videoWrap<--> main-videoWrap
How to append to move and add the video element with a single click using JavaScript or jQuery?
I have looked into the code you have provided and found a few bugs.
Replace:
$('#main-video').length with $('.main-video').length
var $mainVideo = $('#video-main'); with $mainVideo = $('#video-main');
In also restructured your code so that the clicked video is used as main and removed from the DOM. Please use it and test let me know if works as you would want. If not, just comment on this answer and I will see if I can make some improvements.
// using jQuery
var initVideoSwapping = function () {
// check if there is an element first
if ($('.video-list .videoWrap').length > 0 && $('.main-video').length > 0) {
$('.video-list .videoWrap').on('click', function () {
var $thisVideoWrapId = $(this).find('.videoWrap');
var $mainVideoWrapId= $('.main-video');
if ($mainVideoWrapId.attr('id') !== 'cardvideo_remotestream') {
$mainVideoWrapId.attr('id', 'cardvideo_remotestream');
} else {
$mainVideoWrapId.attr('id', 'cardvideo_localstream');
}
if ($thisVideoWrapId.attr('id') !== 'cardvideo_localstream') {
$thisVideoWrapId.attr('id', 'cardvideo_localstream');
} else {
$thisVideoWrapId.attr('id', 'cardvideo_remotestream');
}
var $thisVideo = $(this).find('video');
var $thisVideoSrc = $thisVideo.attr('src');
var $mainVideo = $('#video-main');
var $mainVideoSrc = $mainVideo.attr('src');;
// Replace main video source with clicked video source
$mainVideo.attr('src', $thisVideoSrc);
// Replace clicked video with main video source
$thisVideo.attr('src', $mainVideoSrc);
});
}
}
$(function () {
initVideoSwapping();
});
I have the following HTML code:
$(document).ready(function() {
calculate_width();
$('#moveleft').click(function() {
var loga = $('#marki #loga');
if ($('#marki .container').width() + Math.abs(parseInt(loga.css('margin-left'))) < loga.width()) {
loga.animate({
'margin-left': "-=100px"
});
}
});
$('#moveright').click(function() {
var loga = $('#marki #loga');
if (parseInt(loga.css('margin-left')) < 0) {
loga.animate({
'margin-left': "+=100px"
});
}
});
});
function calculate_width() {
var szerokosc = 0;
$('#loga a img').each(function() {
szerokosc += $(this).outerWidth(true);
});
$('#marki #loga').width(szerokosc);
}
#marki .container {
height: 50px;
overflow: hidden;
white-space: nowrap;
position: relative;
}
#marki #loga {
font-size: 0px;
}
#marki a {
display: inline-block;
margin: 0 30px 0 0;
line-height: 50px;
text-decoration: none;
}
#marki a:last-of-type {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marki">
<div class="container">
<div id="loga">
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
</div>
</div>
</div>
<div style="padding:20px;">
<button id="moveright" style="float:left;"><<</button>
<button id="moveleft" style="float:right;">>></button>
</div>
As you can see, when I click >> button $('#marki #loga') gets 'margin-left' property to -+ 100px.
But I want to achieve, that I can scroll until the last image. But the calculation:
$('#marki .container').width() + Math.abs(parseInt(loga.css('margin-left'))) < loga.width()
is false when there are three images left to show.
What I'm calculating wrong? The list of images is getting dynamically, so I can't use the const width of images.
Actually, you want to stop scrolling when the loga div's right side has reached the container right side.
In terms of maths, this condition is that the absolute value of the margin-left property + the container width is equal to the loga div, which is exactly what you have done, so this is not the problem here.
The issue is that your loga div have a 3400px width, and you have 17 <a> blocks with 225px width each. But 17 * 225 = 3825, which is why you have those missing blocks when the code reach 3400px. There is 425px missing. Just remove the fixed width of the loga div should do the trick
I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>
This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
I have a ul and each li inside it has a trash icon and when I press the trash I want to know if its the first icon in the ul. What I'm trying always returns false. I also tried
$(this).parents('li').is(':first');
with no luck
$("ul#sortable").on("click", ".removethumb", function (event) {
event.preventDefault();
$isThumbPrimary = $(this).is(':first');
});
<ul id="sortable" style="list-style-type: none; padding-left: 0px;">
#foreach (var image in Model.ViewImages.OrderBy(i => i.Ordering)) {
<li id="#image.YogaSpaceImageId" class="col-sm-6 col-md-4 imagethumbs" data-yogaspaceid="#Model.YogaSpaceId">
<div class="thumbnail" style="background-color: lightgrey;">
<a id="#image.YogaSpaceImageId" class="close removethumb" href="#" style="padding-top: 2px; position: absolute; z-index: 3000;"><span class="glyphicon glyphicon-trash" aria-hidden="true" style="padding: 5px;"></span></a>
#{ var base64 = Convert.ToBase64String(image.ImageThumbnail); var thumbSrc = String.Format("data:image/gif;base64,{0}", base64); var base64Modal = Convert.ToBase64String(image.Image); var imgSrcModal = String.Format("data:image/gif;base64,{0}", base64Modal);
var imageId = "pop" + image.YogaSpaceImageId; var imagesourceId = "imagesource" + image.YogaSpaceImageId; } #*
<a class="image" id="#imageId" href="" data-toggle="modal" data-target="#myModal">
<img id="#imagesourceId" src="#thumbSrc" data-imagesrc="#imgSrcModal" alt="image not found" width="203" height="136" />
</a>*#
<a class="image" id="#imageId" href="" data-toggle="modal" data-target="#myModal" style="width: 100%; height: 100%; position: relative;">
<img id="#imagesourceId" src="#thumbSrc" data-imagesrc="#imgSrcModal" alt="image not found" style="width: 100%; height: 100%" #*width="203" height="136" *# />
</a>
</div>
</li>
}
</ul>
:first should be :first-child
$("ul#sortable").on("click", ".removethumb", function(event) {
event.preventDefault();
//$isThumbPrimary = $(this).is(':first');
alert($(this).is(':first-child'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="sortable">
<li class="removethumb">one</li>
<li class="removethumb">two</li>
<li class="removethumb">three</li>
</ul>
Given the nesting of your elements I think you actually need $(this).closest('li').is(':first-child')
$("ul#sortable").on("click", ".removethumb", function(event) {
event.preventDefault();
event.stopPropagation();
alert($(this).closest('li').is(':first-child'))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="sortable">
<li class="removethumb">
<div class="thumbnail">
<a class="removethumb" href="#">one</a>
</div>
</li>
<li class="removethumb">
<div class="thumbnail">
<a class="removethumb" href="#">two</a>
</div>
</li>
<li class="removethumb">
<div class="thumbnail">
<a class="removethumb" href="#">three</a>
</div>
</li>
</ul>
Responsive Design: Below 768px , my banner images are very stretched. I tried height=auto, but IE9 didn't display them at all then.
So, how can I make the height not stretch and look decent?
I'm using: Bootstrap 3.1.1, jQuery 1.11, and FlexSlider (the images in question are in a FlexSlider Carousel)
My web page is at:
http://www.amleo.com/
My HTML is:
<section class="slider">
<div class="container White_BG">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
<!--Slider Start-->
<div class="flexslider" id="mainslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 1200%; margin-left: -1514px;">
<li class="clone" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
<img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
</a>
</li>
<li class="" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
<img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
</a>
</li>
<li style="width: 757px; float: left; display: block;" class="flex-active-slide">
<a href="http://www.amleo.com/polysample/a/29_31/" target="_blank" title="OW Poly Sample">
<img src="http://cdnll.amleo.com/images/art/1433_ow-plus-web.jpg" width="770" height="322" title="OW Poly Sample" alt="OW Poly Sample">
</a>
</li>
<li style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/quickorder.aspx" title="Quick Order Form">
<img src="http://cdnll.amleo.com/images/art/1441-quick-order-content-web.jpg" width="770" height="322" title="Quick Order Form" alt="Quick Order Form">
</a>
</li>
<li style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
<img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
</a>
</li>
<li class="clone" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
<img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
</a>
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging">
<li><a class="">1</a></li>
<li><a class="flex-active">2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ol>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="#">Previous</a></li>
<li><a class="flex-next" href="#">Next</a></li>
</ul>
</div>
<!--Slider End-->
</div>
<!--Side Banner-->
<div class="col-md-3 hidden-md hidden-sm hidden-xs visible-lg" style="border:4px;padding-left:0px!important;">
<a href="http://www.amleo.com/careers/a/66/" title="AM Leonard Careers">
<img src="http://cdnll.amleo.com/images/art/Career_ad_2014.jpg" width="379" height="321" alt="AM Leonard Careers">
</a>
</div>
<!--End Side Banner-->
</div>
</section>
In flexslider.css it reads:
.flexslider .slides img { ... }
It looks like you need to add height: auto; and then use javascript to remove the height attribute that the slider is applying to the images.
Something along the lines of:
jQuery('.slides img').attr('height', '');
Use
.flexslider .slides img{ width:auto;}
If you do not want to stretch an image.