http://jspears8.mydevryportfolio.com/gallery1.html
I uploaded to my school portfolio in hopes of giving a real vision of what is taking place. The the first fancybox element you open doesn't work. I'm using a prebuilt fancybox css. I've tried several others. In my actual page, it loads an empty fancybox and will load anything cycled through, but that first click when you wander to the page is blank white each time.
What am I doing wrong? This is the gallery below.
<div id="gallery">
<img src="images/thumbs/AlatheusEberwolf_t.jpg" width="94" height="94" alt="Alatheus Eberwolf">
<img src="images/thumbs/Quentin_II_t.jpg" width="94" height="94" alt="Quentin II">
<img src="images/thumbs/RolithAlinaEngaged_t.jpg" width="94" height="94" alt="Rolith and Alina Get Engaged!">
<img src="images/thumbs/RolithAlinaMarried_t.jpg" width="94" height="94" alt="Rolith and Alina Get Married">
<img src="images/thumbs/Spear-of-the-Ancients_t.jpg" width="94" height="94" alt="Spear of the Ancients">
<img src="images/thumbs/Tep_Itaki_t.jpg" width="94" height="94" alt="Tep Itaki">
</div>
Javascript
$(document).ready(function() {
$('#gallery a').fancybox({
overlayColor: '#0CF',
overlayOpacity: .3,
transitionIn: 'elastic',
transitionOut: 'elastic',
easingIn: 'easeInSine',
easingOut: 'easeOutSine',
titlePosition: 'outside' ,
cyclic: true
});
}); // end ready
In a quick review of your page I can see the following:
You call twice jQuery (_js/jquery-1.7.2.min.js and _js/jquery.js)
Your call to the jQuery must be before the fancybox call
Take a look at the <head> tag in your HTML:
<meta charset="utf-8">
<title>Course Project</title>
<link type="text/css" rel="stylesheet" href="_css/layout.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js">
<script src="_js/jquery-1.7.2.min.js">
<script src="_js/jquery.easing.1.3.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
<script src="_js/jquery.js" type="text/javascript">
<script src="_js/interface.js" type="text/javascript">
<style type="text/css">
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="dockstyle.css">
<style type="text/css">
<link type="text/css" rel="stylesheet" href="navstyle.css">
Your fancybox example works fine if you have only:
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script src="_js/jquery-1.7.2.min.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
So I believe some javascript methods are overiding.
I hope this helps
Related
Hey to all Prestashop developers! I would like some advice about that matter.
I downloaded the fancybox feature to implement it into the Prestashop´s product.tpl page.
So far, when I enter the product page and click on the zoom magnifier, a pop-up window appears and displays a 404 error URL not found.
Here is the code that I needed to put into the product page (product.tpl). Right after the <img> tag I call on the javascript function:
{if $have_image}
<span id="view_full_size">
<a class="fancybox" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'fancybox')}">
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"
{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}"
height="{$largeSize.height}" />
<span class="span_link no-print"></span>
</a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</span>
{else}
<span id="view_full_size">
<img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}"/>
<span class="span_link"></span>
</span>
{/if}
The scripts and styles are linked to a folder that I named fancybox and are located at the root directory of the theme. I added them at the beginning after this line of code {include file="$tpl_dir./errors.tpl"}
{if $errors|#count == 0}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="{$fancybox_dir}/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
I have done a lot of research here in Google and in Prestashop's forums but no luck.
My version of Prestashop is 1.5.6.2.
I would be really grateful if you could help me with any solution on the problem.
Thanks,
Orestis
I'm trying to imitate this jsfiddle: http://jsfiddle.net/kevin11189/uZCC6/1269/ however the thumbnails are not appearing.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Gallery</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="">
<style>
.hidden {
display: none;
}
</style>
<!-- Add jQuery library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script>
$('.fancybox-thumbs').fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
closeBtn : true,
arrows : true,
nextClick : true,
helpers : {
thumbs : {
width : 40,
height : 40
}
}
});</script>
</head>
<body>
<a class="fancybox-thumbs" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>
<a class="fancybox-thumbs hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>
<a class="fancybox-thumbs" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>
<a class="fancybox-thumbs hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>
</body>
</html>
jsfiddle: http://jsfiddle.net/3bbkjdcc/
i added the same resources as in the working jsfiddle but it didn't work.Any help?
You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug.
Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js
Check this: JSFiddle, I forked your JSfiddle and edited the external sources.
I thought I had the same problem as in these two posts:
Fancybox width not applying
fancybox width doesn't apply
But I have been through the solutions on both and still the issue remains.
Essentially When I click on the image link the width and height properties are ignored and instead a box circa 30 x30 is shown. The video is loading and the close windows button etc all work.
I'm using I.E 8 / 9
My code is as follows:
<b>
<%# Page Language="C#" %>
<html dir="ltr">
<head runat="server">
<META name="WebPartPageExpansion" content="full">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled 1</title>
<meta name="Microsoft Theme" content="Lacquer 1011, default">
<!-- J Query Includes -->
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/JavaScript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/JavaScript/jquery.SPServices-0.7.1a.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="http://mynationwideteam/sites/financial_performance/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://mynationwideteam/sites/financial_performance/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script>
$(document).ready(function() {
$(".fancyvideo").fancybox({
width : 600,
height : 498,
fitToView : false,
autoSize : false,
type : 'swf'
});
});
</script>
</head>
<body>
<a class="fancyvideo" ID="vid1" href="http://www.youtube.com/v/92c3dX-AoXs"><img src="images/Templates/Financial_Performance/banner001.jpg" width="475" height="69" style="border-style: solid; border-width: 2px"></a>
</body>
</html>
</b>
Try to force the with of your content, for example you can do somethink like this (in the file that you want to include):
<div style="width:600px">
//your fancy content
</div>
It's working for me!
Unless you're using an older version having that property, autoSize doesn't exist. Try with autoDimensions: false and/or autoScale: false
I am trying to open a fancybox iframe with HTML content inside for now It is just a simple html document with text but it will eventuallly be a form however when i click to test it, it simply opens up the other HTML document. how do I make it so that it opens up the html doc in an iframe. here is my html with the includes and button link that should open up the HTML in the fancybox:
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="/js/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/source/jquery.fancybox.pack.js"></script>
<script language="javascript" type="text/javascript" src="/js/source/vpb_script.js"></script>
<body>
<div id = "signup"><div><center><a class = "fancybox fancybox.iframe" href="form.html"> <img src="images/sign-up.png" width="216" height="65" /></a></center></div></div>
</div>
</div>
<script type=”text/javascript”>
$(document).ready(function() {
$(".fancybox").fancybox({
width : '70%',
height : '70%’
});
});
</script>
</body>
</html>
Please help :)
You have an incorrect single quote at the end of the height attribute. You're using some sort of weird raised comma instead of a single quote and it's causing a javascript error.
See this fiddle where I've gotten it working. http://jsfiddle.net/manishie/DRvyq/
html:
<a class="fancybox" data-fancybox-type="iframe" href="http://disney.com">Iframe</a>
javascript:
$(document).ready(function () {
$(".fancybox").fancybox({
width: '70%',
height: '70%'
});
});
I am using handlebars for templating on a simple mobile webpage with swipejs. I made a prototype of the webpage without the templating engine and it worked great. I then researched the web for a good templating engine and found handlebars.
I embedded the body of my webpage into a script tag, so handlebars can work. Everything works fine except swipejs (which I'm using for images).
Here's a summarized version of my HTMl:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no" />
<link media="Screen" href="styles.css" type="text/css" rel="stylesheet" />
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
<script src="scripts/jquery.js"></script>
<script src="scripts/handlebars.js"></script>
<script src="scripts/app.js"></script>
<script src='scripts/swipe.js'></script>
<!--[if IEMobile]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
<![endif]-->
</head>
<body>
<script id="description-script" type="text/x-handlebars-template">
<h1>Main Title</h1>
<div id="pictures">
<div id="slider" class="swipe">
<div class="swipe-wrap">
<div><center><img style="width:95%;height:auto;" src="image link 1"/></center></div>
<div><center><img style="width:95%;height:auto;" src="image link 2"/></center></div>
<div><center><img style="width:95%;height:auto;" src="image link 3"/></center></div>
</div>
</div>
</div>
<h2>Description</h2>
<div id="description">
{{description}}
</div>
</script>
<script>
//swipe script
window.mySwipe = Swipe(document.getElementById('slider'),
{
auto: 3000,
speed: 300
});
</script>
</body>
Thank you in advance for the help. Will I have to use a different templating engine or is there something in here that I'm forgetting?
You probably need to bind the swipe event after the template has been rendered. Or try binding it to the entire 'body' element rather than #slider.
document.getElementById('slider')
will fail as it will return null whilst slider sits in the following script tag
<script id="description-script" type="text/x-handlebars-template">
You'll need to move your Swipe(...) code to immedately after you render the description-script template in app.js.
Something like:
// Compile the template
var template = Handlebars.compile($('#description-script').html());
// Render the template
// This makes the #slider DIV appear in the DOM
var data = { description: 'Photos' };
$('body').append(template(data));
// Start Swipe
window.mySwipe = Swipe($('#slider').get(0), {
auto: 3000,
speed: 300
});
See the following JSFiddle (forked from #TommyBs): http://jsfiddle.net/b4ta3/2/