We Keep Coding

Wow slider and fancybox (lightbox) won't work together

Hi, my FancybBox code works but then I start adding wowslider code then only the wowslider works properly. How do I solve this?
Here is the link to the page:
http://makaticitycondo.com/execstud_greenbelthamilton.html
If you click on Inquire Now button, a lightbox iframe is supposed to appear. But instead redirects it to a new page.
How can we solve this?

In link specify the attribute data-fancybox-type="iframe"
Refer the link
HTML:
<a class="fancybox" data-fancybox-type="iframe" href="inqsend_ghes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/inquire.png',1)"><img src="http://makaticitycondo.com/images/inquired.png" name="Image2" width="204" height="120" border="0" id="Image2"></a>

How to get an iframe to show when hidden?

I have an image that I want the user to see. When the user clicks on this image I want the image to go away and have the video show in it's place. Can someone show me how to do this?
Here is the code I have so far.
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<a href="#">
<img src="../../../upload/1/img/video.jpg" style="display:none" />
</a>
<div id="video" style="display:inline">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
If someone could edit my post to clean the code up that would be great. I can't figure it out.
To describe the code a little bit:
This is what the code should look like after I click on the image. When you first see the page, the two display styles will be reversed.
Any help will be awesome.
Thanks

A general Idea can be like this:
$(function() {
$("img").click(function() {
$(this).css("display","none"); // will hide your image
$("body").append("<div id='video'></div>"); // will append div with id video, this div should have video code inside this.
});
});

You want to hide the video initially, so give it the style display:none. You also want to give your thumbnail image an id so you can reference it in jQuery. You can also remove the <a> tag from around the image (its not needed)
HTML
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<img id="thumbnail" src="../../../upload/1/img/video.jpg" />
<div id="video" style="display:none">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
JavaScript
$(document).ready(function(){
$("#thumbnail").click(function(){
$(this).hide()
$("#video").show()
})
})
I would also try to avoid adding CSS styles inline if you can

Image thumbnail is not loading and onmousehover my images move up when hovering over an image?

?I am having an issue with a website i uploaded to test. They all work work fine when they are checked locally in Dreamweaver cs6 but when uploaded they do this, Roll over the images you will see the problem, when hovering over Texas longhorn image there is a problem and the Michigan state image isn't loading Anyone see my error.
Here is the code that matters Thanks for any help And the link to the site page http://odintest.co.nf/product_select.html
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div id="main_img">
<img id="img" src="images/placeholder.jpg"/>
</div>
<div id="thumb_img">
<img src='images/notredamelogo.JPG' width="200" height="150" onmouseover='changeImage("images/notredame.JPG");'>
<img src="images/ohiostatelogo.jpg" onmouseover='changeImage("images/ohiostate.jpg");'>
<img src='images/michiganstatelogo.jpg' onmouseover='changeImage("images/michiganstate.jpg");'>
<img src='images/floridagatorslogo.jpg' onmouseover='changeImage("images/floridagators.jpg");'>
<img src='images/texaslonghornslogo.jpg' onmouseover='changeImage("images/texaslonghorns.jpg");'>
</div>

I don't know what problem you're describing, but I'm guessing a hover delay. Use a javascript preloader or load them in a div with styles along the lines of {position: absolute; left: -999em;} to keep them offscreen. This makes the images available immediately on hover, where normally you'd see a delay while they're downloaded.
The image at http://odintest.co.nf/images/texaslonghorns.jpg doesn't seem to exist on the server.

Well I see 2 issues.
For me the "notredamelogo.JPG" did not load. Probably because of "JPG". Try "jpg" instead.
Main image does not load for texaslonghorns. That might be because the image does not exist in that directory and/or the image name or extension is not right.

Fancybox not working with images from Twitter API

With Fancybox 2 the example below works flawlessly (left out other code)
<a class="fancybox" href="https://si0.twimg.com/profile_images/2169856486/avatar.jpg" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
but the code below load the image on a separate page
<a class="fancybox" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
The problem seem to be with the image URL the Twitter API supplies which returns a (301) redirect to the actual location of the full image. Is there any way i can get Fancybox to work with images that are supplied using a redirect and that the popup window still has the size of the served image.
Help would be appreciated.
Frank

Since the second code/link doesn't contain an image extension (jpg, gif, png), fancybox cannot determine what type of content is trying to open so you need to tell it.
Either do :
One: Add the type option to your custom script
$(".fancybox").fancybox({
type: "image"
});
Two : add the data-fancybox-type attribute to your link
<a class="fancybox" data-fancybox-type="image" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title"><img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" /></a>

Images showing as broken when they shouldn't

I do not understand why the images on my site shows up as broken, if you could have a quick look at: http://www.lamcallum.com Is there someone that can solve this mystery? Any replies would be appreciated...
UPDATE: Issue is resolved.

Give your <img src="1pixelsquare1.gif"> //grey color image then it will work perfectly fine.
Your Code for each box
<div class='fade' onMouseOver="JSFX.fadeIn('button')" onMouseOut="JSFX.fadeOut('button')">
<img name="button" class="imgFader" width="100" height="100" border="0">
</a> //extra coded - remove it
</div>
Every box Img should have the "src" like this
<img name="button" class="imgFader" src="1pixelsquare1.gif" width="100" height="100" border="0">

It appears that on initial load, your images do not have a source. Which would explain why they are broken. Once mouse-over-ed they do.
ETA: More detail. The image tags do not have anything in the src property. Either in code behind, the html you have coded or js. If you post your original code I can help more.