C Language , Html5 , Css3 ,Bootstrap , Php , Advance Php , Wordpress By Gaurav Yadav (9058108950): April 2017

Tuesday, 18 April 2017

How to change the color of header bar and address bar in mobile (Responsive )

You need to add a <meta> tag in your <head> containing name="theme-color", with your HEX code as the content value. For example:

<meta name="theme-color" content="#999999" />


You actually need 3 meta tags to support Android, iPhone and Windows Phone
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">

Monday, 10 April 2017

BOOTSTRAP GALLERY CODE

HTML CODE HERE

<div class="row">

<div class="col-lg-12">

<h1 class="page-header">Thumbnail Gallery</h1>

<div class="col-lg-3 col-md-4 col-xs-6 thumb">

<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" data-target="#image-gallery">

<img class="img-responsive" src="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" alt="Short alt text">

</a>

</div>

<div class="col-lg-3 col-md-4 col-xs-6 thumb">

<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">

<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">

</a>

</div>

<div class="col-lg-3 col-md-4 col-xs-6 thumb">

<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" data-target="#image-gallery">

<img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" alt="Another alt text">

</a>

</div>

</div>

<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

<h4 class="modal-title" id="image-gallery-title"></h4>

</div>

<div class="modal-body">

<img id="image-gallery-image" class="img-responsive" src="">

</div>

<div class="modal-footer">

<div class="col-md-2">

<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>

</div>

<div class="col-md-8 text-justify" id="image-gallery-caption">

This text will be overwritten by jQuery

</div>

<div class="col-md-2">

<button type="button" id="show-next-image" class="btn btn-default">Next</button>

</div>

</div>

</div>

</div>

</div>

JS CODE HERE
$(document).ready(function(){

loadGallery(true, 'a.thumbnail');

//This function disables buttons when needed
function disableButtons(counter_max, counter_current){
$('#show-previous-image, #show-next-image').show();
if(counter_max == counter_current){
$('#show-next-image').hide();
} else if (counter_current == 1){
$('#show-previous-image').hide();
}
}

function loadGallery(setIDs, setClickAttr){
var current_image,
selector,
counter = 0;

$('#show-next-image, #show-previous-image').click(function(){
if($(this).attr('id') == 'show-previous-image'){
current_image--;
} else {
current_image++;
}

selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});

function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}

if(setIDs == true){
$('[data-image-id]').each(function(){
counter++;
$(this).attr('data-image-id',counter);
});
}
$(setClickAttr).on('click',function(){
updateGallery($(this));
});
}

});