We Keep Coding

Trying to add smooth Image transition between background images

This is the code I currently have:
$('ul.whats_new_ul li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.whats_new_ul li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
if(tab_id == 'Messages'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/whts_new.jpg)' );
}else if(tab_id == 'gift'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/gift_back.jpg)' );
}else if(tab_id == 'locators'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/locater.jpg)' );
}else if(tab_id == 'menu'){
$('#what_new_back').css('background-image', 'url(img/mobile-app/global/menu_back.jpg)' );
}
});
to see it clearer in action - this link here - under section What's New
I wondering how do I add a smooth transition between clicks and make sure the background image has the slideUp animation when each tab is clicked?

See this please:
Animate background image change with jQuery
It is not possible to animate the background itself, but it is possible to animate the element containing the background.

Without your HTML and CSS I can't give you a correct response but I think that this demo can help you
http://css3.bradshawenterprises.com/cfimg/
Basically you can't animate backgrounds, you need to use divs or imgs and animate them.
"Demo 6 -Fading between multiple images on click"
<div id="cf7" class="shadow">
<img class='opaque' src="/images/Windows%20Logo.jpg" />
<img src="/images/Turtle.jpg;" />
<img src="/images/Rainbow%20Worm.jpg;" />
<img src="/images/Birdman.jpg;" />
</div>
You can use a wrapper (#backgrounds, #content), use position:absolute and z-index.
Something like
<div style="position:relative">
<div id="content" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:20">
...
</div>
<div id="backgrounds" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:10">
<img .../>
<img .../>
...
</div>
</div>

onmouseenter and onmouseleave flashing when show/hide a div, how to manage?

I have a list of divs, each div contain an image, hovering this image a div must appears. This div will disappear on mouse leave. This is my javescript code:
function Open(id){
var div="#but_container_crs_box_"+id;
$(div).show();
}
function Close(id){
var div="#but_container_crs_box_"+id;
$(div).hide();
}
this his the html that is placed inside each div of the list:
<div id="but_container_crs_box_1" class="but_container_crs" style="display:none;">ShowHide content</div>
<img src="images/photo.jpg" alt="" class="img_box" onmouseenter="javascript:Open(<?php echo $i;?>);" onmouseleave="javascript:Close(<?php echo $i;?>);" >
On mouse hover the div flash beetween hide and show state, how i can manage it? I want only 1 call when mouseenter and only 1 call when mouseleave on each div of the list

The reason is when you hover the image and the div is displayed it is pushing the image down, causing a mouseout event to fire, inturning hiding again, and repeating to display a continuous flicker.
one way of stopping this is to position the image.
for example:-
function Open(id) {
var div = "#but_container_crs_box_" + id;
$(div).show();
}
function Close(id) {
var div = "#but_container_crs_box_" + id;
$(div).hide();
}
img{
position:absolute;
top:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="but_container_crs_box_1" class="but_container_crs" style="display:none;">ShowHide content</div>
<img src="http://www.axialis.com/adm_comment/module/gentlesource_module_smiley/smiley_16/angry.png" alt="" class="img_box" onmouseenter="javascript:Open(1);" onmouseleave="javascript:Close(1);">

rollover one image in a DIV to get another to show up in a separate DIV

Im building a website where there is a photo of a girl and to the side are a group of glasses that you can try on over her face. Right now I have it so that when you rollover one of the glasses in the group they are highlighted, but I also want a pair to show up over the photo in separate DIV when you click it.
This is what i have for just the rollover:
function rollOver()
{
document.getElementById("helm").src ="images/helmOver.jpg";
}
function rollOut()
{
document.getElementById("helm").src ="images/helmStatic.jpg";
}
</script>
<div id="framestyle">
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()"/>
</div>
This is the div and image I want to show up over the photo when a pair are clicked:
<div id="glasses">
<img src="images/faceGlasses.png">
</div>
***How do i get the image in the second div to only show up when the image/rollover is clicked in the first div?

I would add
function clickedGlasses(glassesImage) {
document.getElementById("glasses_overlay").src = glassesImage;
document.getElementById("glasses_overlay").style.display = "block";
}
To your script tag at the top, and then
<img id="glasses_overlay" src="blank.png" style="display:none;">
Into your "glasses" div alongside the "faceGlasses" image (you'll need to position this over the top of the other div, either absolutely, or relatively)
And finally, change your "helm" img to
<img class="frame" src="images/helmStatic.jpg" id="helm" border="0" width="71" height="40" onmouseover="rollOver()" onmouseout="rollOut()" onclick="clickedGlasses('images/helmOverlay.png')" />

Colorbox and Image Resize

I have a gallery where I want the User to Open a Picture with Colorbox. (Then send the Picture with a Mail or Print it etc.)
This Site must be programmed dynamically because it has to work on an IPad too.
Now to the actual Problem:
This div should be shown in the Colorbox:
<div style = "display:none">
<div id="inline" style="height:100%; width:auto">
<img src="#" id="inline_img" style="max-height:90%; max-width:100%"/>
<div id="buttons">
<button > test </button>
<button > test1 </button>
<button > test2 </button>
</div>
</div>
</div>
And this is the Javascripit function where the div opens up in the colorbox.
$(function(){
//$('.element a').colorbox({});
$('.element a').click(function(){
// Using a selector:
$('#inline_img').attr('src',$(this).find("img").attr('src'));
$.fn.colorbox({
inline:true,
href:"#inline",
maxHeight:'90%',
maxWidth:'90%'
});
return false;
});
$('.element a').colorbox({
onComplete : function() {
$(this).colorbox.resize();
}
});
But the Colorbox always is much bigger than the Picture itself. The Colorbox must be as big as the Image and in the center of the screen.

I'm use the following code and resolve problem.
$('.colorBox').colorbox({
scalePhotos: true,
maxWidth: '100%'
});

That result makes sense to me. You gave colorbox a display:block element with no defined width and asked it to estimate the size, which of course will be 100% of the available width.

How do I use popover from Twitter Bootstrap to display an image?

The canonical example for Twitter Bootstrap's popover feature is sort of a tooltip on steroids with a title.
HTML:
hover for popover
JS:
<script>
$("#blob").popover({offset: 10});
</script>
I'd like to use popover to display an image. Is this possible?

Very simple :)
hover for popover
var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';
$("#blob").popover({ title: 'Look! A bird!', content: img, html:true });
http://jsfiddle.net/weuWk/

Sort of similar to what mattbtay said, but a few changes. needed html:true. Put this script on bottom of the page towards close body tag.
<script type="text/javascript">
$(document).ready(function() {
$("[rel=drevil]").popover({
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
html: 'true', //needed to show html of course
content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
Then HTML is:
mischief

simple with generated links :)
html:
<span class='preview' data-image-url="imageUrl.png" data-container="body" data-toggle="popover" data-placement="top" >preview</span>
js:
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
http://jsfiddle.net/A4zHC/

This is what I used.
$('#foo').popover({
placement : 'bottom',
title : 'Title',
content : '<div id="popOverBox"><img src="http://i.telegraph.co.uk/multimedia/archive/01515/alGore_1515233c.jpg" /></div>'
});
and for the HTML
<b id="foo" rel="popover">text goes here</b>

Here I have an example of Bootstrap 3 popover showing an image with the tittle above it when the mouse hovers over some text. I've put in some inline styling that you may want to take out or change.....
This also works pretty well on mobile devices because the image will popup on the first tap and the link will open on the second.
html:
<h5>Template Preview 1 <i class="fa fa-external-link"></i></h5>
<h5>Template Preview 2 <i class="fa fa-external-link"></i></h5>
<h5>Template Preview 3 <i class="fa fa-external-link"></i></h5>
js:
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
https://jsfiddle.net/pepsimax_uk/myk38781/3/