/camera-carousel

camera-carousel

Primary LanguageHTML

camera-carousel

#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

master file (index.html)

<!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">&lt;!--IMAGE SLIDER-1 WORK START --&gt;</span>

<span class="nt">&lt;div</span> <span class="na">data-src=</span><span class="s">"images/background/slider_1.jpg"</span><span class="nt">&gt; &lt;/div&gt;</span>

<span class="c">&lt;!--IMAGE SLIDER-1 WORK END--&gt; </span>

<span class="c">&lt;!--IMAGE SLIDER-2 WORK START --&gt;</span>

<span class="nt">&lt;div</span> <span class="na">data-src=</span><span class="s">"images/background/slider_1.jpg"</span><span class="nt">&gt; &lt;/div&gt;</span>



 <!--IMAGE SLIDER-2 WORK END--> 


<span class="nt">&lt;/div&gt;</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>

noConflict file (camera-noConflict.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