#HTML
<div class="fluid_container">
<div class="camera_wrap" id="camera_wrap">
<!--IMAGE SLIDER-1 WORK START -->
<div data-src="images/background/slider_1.jpg"> </div>
<!--IMAGE SLIDER-1 WORK END-->
<!--IMAGE SLIDER-2 WORK START -->
<div data-src="images/background/slider_1.jpg"> </div>
<!--IMAGE SLIDER-2 WORK END-->
</div>
</div>
#JAVASCRIPT
<script>
function camera()
{
jQuery('#camera_wrap').camera({
height: '40%',
loader: 'bar',
pagination: false,
thumbnails: false,
playPause: false,
});
}
function cameraFullScreen()
{
jQuery('#camera_wrap').camera({
height: 'auto',
loader: 'bar',
pagination: false,
thumbnails: false,
playPause: false,
hover: false,
fx: 'random'
});
fullCameraSettings();
}
function fullCameraSettings()
{
var h=jQuery(window).height(),
fc=jQuery('.fluid_container'),
cw=jQuery('#camera_wrap');
fc.css({
'bottom': '0',
'height':h,
});
cw.css({
'bottom': '0',
'height': '100%',
'left': '0',
'margin-bottom': '0!important',
'position': 'relative',
'right': '0',
'top': '0'
});
}
</script>
<script>
jQuery(function(){
<!--comment camera script which you do not want to run-->
/*FULL SCREEN CAMERA*/
cameraFullScreen();
jQuery(window).resize(function(){
fullCameraSettings();
});
/*FIXED HEIGHT CAMERA*/
//camera();
});
</script>
#noConfilct Method
<!doctype html> <html> <head> <meta charset="utf-8"> <link href="vendor/css/camera.css" rel="stylesheet"> </head><body> <div class="fluid_container"> <div class="camera_wrap" id="camera_wrap">
<span class="c"><!--IMAGE SLIDER-1 WORK START --></span> <span class="nt"><div</span> <span class="na">data-src=</span><span class="s">"images/background/slider_1.jpg"</span><span class="nt">> </div></span> <span class="c"><!--IMAGE SLIDER-1 WORK END--> </span> <span class="c"><!--IMAGE SLIDER-2 WORK START --></span> <span class="nt"><div</span> <span class="na">data-src=</span><span class="s">"images/background/slider_1.jpg"</span><span class="nt">> </div></span><!--IMAGE SLIDER-2 WORK END-->
<span class="nt"></div></span></div> <script type='text/javascript' src='vendor/scripts/jquery.min.js'></script> <script type='text/javascript' src='vendor/scripts/jquery.mobile.customized.min.js'></script> <script type='text/javascript' src='vendor/scripts/jquery.easing.1.3.js'></script> <script type='text/javascript' src='vendor/scripts/camera.min.js'></script> <script> function camera() { jQuery('#camera_wrap').camera({ height: '40%', loader: 'bar', pagination: false, thumbnails: false, playPause: false, }); } function cameraFullScreen() { jQuery('#camera_wrap').camera({ height: 'auto', loader: 'bar', pagination: false, thumbnails: false, playPause: false, hover: false, fx: 'random' });
<span class="na">fullCameraSettings()</span>;} function fullCameraSettings() { var h=jQuery(window).height(), fc=jQuery('.fluid_container'), cw=jQuery('#camera_wrap');
fc.<span class="na">css(</span>{ 'bottom': '0', 'height':h, }<span class="na">)</span>; cw.<span class="na">css(</span>{ 'bottom': <span class="nt">'0'</span>, 'height': <span class="nt">'100%'</span>, 'left': <span class="nt">'0'</span>, 'margin-bottom': <span class="nt">'0!important'</span>, 'position': <span class="nt">'relative'</span>, 'right': <span class="nt">'0'</span>, 'top': <span class="nt">'0'</span> }<span class="na">)</span>;} </script> <script> jQuery(function(){ <!--comment camera script which you do not want to run-->
<span class="c">/*FULL SCREEN CAMERA*/</span> <span class="na">cameraFullScreen()</span>; jQuery(<span class="s">window</span>).<span class="na">resize(function()</span>{ <span class="na">fullCameraSettings()</span>; }<span class="na">)</span>; <span class="c">/*FIXED HEIGHT CAMERA*/</span> <span class="c">//camera();</span>});
</script> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Camera Carousel</title> </head><body> <div id="slider"></div>
<script src="js/jquery-1.11.1.min.js"></script>
<script> jQuery(function(){ jQuery.ajax({ type:"GET", url:"index.html", data:"", success: function(data){ $('#slider').html(data); } }); }) </script> </body> </html>
#view demo View Demo