I have a CSS lightbox gallery on my website, however it loaded the thumbnails and the large images at the same time.
Below are the contents of my various files;
HTML:
<div class=galerie>
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
<img data-src="/images/large-image.jpg">
</div>
CSS:
.lightbox{display:none;position:fixed;z-index:10001;width:100%;height:100%;text-align:center;top:0;left:0;background:black;background:rgba(0,0,0,0.8)}
.lightbox img{max-width:100%;max-height:100%}
.lightbox:target{display:block;outline:none}
I've added a script (jQuery):
<script>
$("a.galimg").click(function() {
$(".lightbox").each(function() {
$(this).find("img").attr("src", $(this).find("img").attr("data-src"));
});
});
</script>
And now the large files are loaded only after I click a thumbnail.
The problem is that they all load at once, and I want only the clicked one to load at a time.
Is there a way to do this?
I know the each function does that, is there any other function I could use?
I'm not sure why you want to do something like this (would be easier if you post a link to your site) but i'll try to help.
Just don't use 'each' function. So your code should look something like this:
$("a.galimg").click(function() {
var imgID = $(this).attr('href');
$(imgID).attr("src", $(this).data('srcbig'));
});
And for HTML:
<div class=galerie>
<img src=/images/thumbnail.jpg /><img src="" alt="remember about me">
</div>
You could even delete the second 'a href' and image and just create it dynamically. It all depends on how your lightbox library works and what you need.
Attr sets an attribute, if you're trying to use it, I would go with something like this. I'm not sure what you're trying to set the attribute to, but this is the syntax:
<script>
$("a.galimg").click(function() {
$(this).attr("data-src", "your desired data attribute");
})
});
</script>
http://www.w3schools.com/jquery/html_attr.asp
I am working on a website using Meteor. On one of the pages, I would like some of the images and divs at the top to be animated onto the page.
I have achieved this by adding:
Template.home.rendered=function(){
$('.animateblock').addClass('animated');
};
The added class changes some of the css properties, giving me the desired effect.
The problem I am having is that if I go to a different page of the site and then revisit the page with the animations, it doesn't reset. The class is only ever added once, and I haven't been able to figure out a way to have it removed when another page is visited.
My html code is as follows:
<div class="textAnimate animateblock">
<img src="/home/100.png" class="animateblock percent100" alt="100%">
<img src="/home/antibiotics.png" class="animateblock antibiotic" alt="Antibiotic Free">
<img src="/home/natural.png" class="animateblock natural" alt="All Natural">
<div class="horomoneAnimateContainer">
<div class="animateblock horomoneAnimate">
<img src="/home/horomone.png" class="horomone" alt="Horomone Free">
</div>
</div>
</div>
<div class="stampAnimate animateblock">
<img src="/home/tasty-stamp.png" class="tasty" alt="Tasty Certified">
</div>
I have tried a few different methods, such as adding a removeClass before the addClass, hoping that would fix it, but it did not.
Template.home.rendered=function(){
$('.animateblock').removeClass('animated');
$('.animateblock').addClass('animated');
};
I also tried creating a Template.destroyed section like so, but that didn't work either:
Template.home.destroyed=function(){
$('.animateblock').removeClass('animated');
};
I am using Meteor 1.2.0.1 and am also using iron router, but haven't been able to find a solution to add and remove classes with it. Any suggestions are appreciated!
I do something like this to call in jQuery on template loads:
Template.Messages.onCreated(function() {
var self = this;
self.autorun(function() {
self.subscribe('messageDB', function() {
$('.loader').delay(300).fadeOut('slow', function() {
$('.transition-wrapper').delay(200).fadeIn('slow');
});
});
});
});
Meteor Chef has a great resource on loading patterns here.
EDIT: Did some more digging around and emberJS doesn't allow inline script execution. How would I go about creating a slideshow? Do I create a component?
I've only started out with emberJS. I've followed the guides on the website by Ember and looked on here to learn, but I've found myself in a bit of a dead end and I need your help!
This is the situation:
I want to add a slideshow to one of my templates. Now, to the best of my abilities I have added the slideshow .js and .css using 'BOWER INSTALL' and then edited my 'ember-cli-build.js' to reference the app.import for those two dependencies.
It's a basic website pages such as 'About Me', 'Services', 'Contact Us'. Nothing fancy. Say I want to add this slideshow to the 'Services' page, at first when I visit the site it loads up with no issues but when I switch between the templates/pages using {{#link-to}} function it disappears and won't load again.
Can anyone explain how I should add inline scripting on templates?
Sorry for the beginners question.
In order for me to run the slide show I need to execute the following script after the DOM elements on the page.
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
The HTML is as follows:
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://placehold.it/350x150/0889d8/000000" />
</li>
<li>
<img src="http://placehold.it/350x150/c1a4f0/ffffff" />
</li>
<li>
<img src="http://placehold.it/350x150/8b4513/000000" />
</li>
</ul>
</div>
I tried to use the slick addon, but ran into issues with it. So I created another ember addon that wraps the jquery unslider plugin. Check out ember-cli-unslider.
See the simple demo.
The un-slider component expects an array of slides. Within its block you must define the HTML content used for each slide.
{{#un-slider slides=model as |slide|}}
<img src="{{slide.url}}"/>
{{/un-slider}}
In the above example, model could look like this:
[
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 1&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 2&w=600&h=400' },
{ url: 'https://placeholdit.imgix.net/~text?txtsize=33&txt=slide 3&w=600&h=400' }
];
You can use an ember addon that already does that: ember-cli-slick
Install it using :
ember install ember-cli-slick
You can use it in your template like this:
{{#slick-slider autoplay=true arrows=false}}
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
<div class="box"> <img src="https://static2.businessinsider.com/image/4f3433986bb3f7b67a00003c/a-parasite-found-in-cats-could-be-manipulating-our-brains.jpg"> </div>
{{/slick-slider}}
If you want to learn how to make a slideshow component look at the source code here:
https://github.com/laantorchaweb/ember-cli-slick/blob/master/addon/components/slick-slider.js
This is just a wrapper component for the slick.js plugin . You would do the same for the flexslider plugin.
I'm using Fancybox to display inline content (a div with an image linked to a new page). The div and image display fine in the modal, but when the image is clicked to go to the new page, I get "The requested content cannot be loaded. Please try again later." error.
The FancyBox javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
And applies to the following clip of HTML:
<li class="fancybox-outer">
<a id="inline" href="#hover-image_0" class="fancybox">
<img src="http://website.com/file/id:63" style="margin-top: 32px" />
</a>
<p>1G2A</p>
<div style="display: none;"><div id="hover-image_0"><img src="http://website.com/file/id:64/ext:.png" class="img" /></div></div>
</li>
<li class="fancybox-outer">
<a id="inline" href="#hover-image_1" class="fancybox">
<img src="http://website.com/file/id:60" style="margin-top: 32px" />
</a>
<p>17</p>
<div style="display: none;"><div id="hover-image_1"><img src="http://website.com/file/id:61/ext:.png" class="img" /></div></div>
</li>
Does anyone see what might be causing the issue or what I need to correct?
Thanks!
Update: 1/19/2012 - I performed the same test on my server as the first answer (http://estorkdelivery.com/example/example.html) and found that I got the same response back. So it seems it's something with my server.
I still need help with this issue. Anyone have any ideas?
Thanks!
Update: 1/28/2012 - I've been working to find a solution for this problem, but I've run out of time and have gone with a completely different solution. I'm keeping this problem open in case anyone else runs across the same error or ultimately finds a solution. Thanks!
Your approach has many issues:
First bear un mind that fancybox gets its content from the href attribute of any selector bound to it so the link
<a class="fancybox" href="{target}" ...
should be bound to fancybox via the following script in order to work
$('.fancybox').fancybox();
Pretty obvious but in your approach, the link inside the opened fancybox (which targets to yahoo for instance) is not bound to fancybox itself; it will try to fire Fancybox for sure again but with no indication of what the content should be this time, hence the error "The requested content cannot be loaded. Please try again later." in other words, the link (inside the inline content) <a href="http://yahoo.com" ... is not bound to fancybox.
The only way that links inside fancybox can work and load content dynamically (without being bound to fancybox) is when the current content is an external html document and fancybox type was set to iframe (not your case)
Second, you opened an image so fancybox set the type to image by default, but then you are pretending to load a different type of content on the same box (yahoo for instance), which would require to set type to iframe and other options like width and height.
Third, since you are using inline content, please be aware of an existing bug in v1.3.x and its workaround to avoid further issues, you can learn more here
Last, I am not just lecturing here, it's more like the explanation of what is going on with your issue .... but the good news is that you just need to add some more lines of code to make it work the way you want:
1: you need to create a fancybox script for each type of content you want to open the second time (additionally to your existing one), so in your example you want to click the image inside fancybox and that should open yahoo ... then create this script
$('.fancyframe').fancybox({
'type':'iframe',
'width': 600, //or whatever you want
'height': 300
});
2: within your hidden inline content set that class to the link, so this code:
<div style="display: none;">
<div id="hover-image_0">
<img src="1_b.jpg" class="img" />
</div>
</div>
now should look like
<div style="display: none;">
<div id="hover-image_0">
<a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
</div>
</div>
Do the same for each hidden inline content. If you want to open another type of content in fancybox, just create a script accordingly. The rest of your code is OK (doesn't bother me to fire fancybox on hover)
SIDE NOTES: sites like google, yahoo, jquery and some others won't open in fancybox. Also make sure you have the proper DOCTYPE for fancybox to work properly (your sample page doesn't have any). See Unable to load google in iframe in fancybox for explanation.
I think I've figured out what's causing this issue, at least for me.
The problem seems to occur when you've got a class on one of your elements that is the same as the popup class.
For instance:
<a class="popup" href="#">Open the popup</a>
And you have something in your popup with the same class name, for instance:
<div class="popup">some text</div>
You'll get the error. Try changing the div class to something like popup-window - that should fix your error
In your example page, it works for me if I don't click. When you click, what page are you supposed to be taken to? Do you want it to just go to the next image?
In my personal preference, I don't care for the activation on hover. It gets really confusing, especially when most people go to instinctually click on an image. But in your case it opens on hover, then they click instinctually, then you get the error.
Do you get this same error when you're just using the functionality as it normally applies?
If you want, try to give each image a gallery name instance like so: rel="gallery" and see what happens. You should get the next/prev arrows showing up and working like you would expect.
But honestly, I would get rid of the hover functionality altogether. Or at least get rid of the mouseout() That's probably the most bothersome part.
Just use this to call the fancybox actions:
$("a[rel=gallery]").fancybox();
That way you can get rid of all of those classes that are probably causing the issues.
I hope that helps.
I just ran into this issue as well.
As it turns out, the href url is EXTRA case sensitive. (if that is possible)
Regardless double, triple check your href urls to insure that you have the case exactly correct.
my solution was:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".fancybox").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'titleShow' : false,
'showCloseButton': true,
'titlePosition' : 'inside',
'transitionOut' : 'none',
'title' : '',
'width' : 640,
'height' : 385,
'href' : this.href,
'type' : 'iframe',
'helpers' : {
'overlay' : {'closeClick': false}
}
});
return false;
});
});
</script>
If some of the images are showing and others are not, even though the markup is identical, then check this:
Try to lowercase all the letters in the filename and in the html. Fancybox seems to be quite case sensitive.
Check if the image has all the permissions allowed. I noticed my pictures didn't work properly on mobile because on my computer, everybody's permission was set to "no permission". I changed this to "read only" and it worked like a charm!
I just re-created your test on my local machine and it works fine for me (I ran this from the demo folder of the FancyBox install) :
<html>
<head>
<title>jQuery Fancybox Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox().hover(function () {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave(function () {
$("#fancybox-overlay").click();
});
});
</script>
<li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox">
<img src="1_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Yahoo</p>
<div style="display: none;">
<div id="hover-image_0">
<a href="http://www.yahoo.com">
<img src="1_b.jpg" class="img" />
</a>
</div>
</div>
</li>
<li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox">
<img src="2_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Google</p>
<div style="display: none;">
<div id="hover-image_1">
<a href="http://www.google.com">
<img src="2_b.jpg" class="img" /></a></div>
</div>
</li>
</body>
</html>
I having the same problem with Fancybox. You cannot have spaces or special character in href and div id. Use an URL slug if you are using page titles.
I was checking out all the possibilities and ran into the EXTRA case sensitivity issue as #BrettBumeter mentioned.
In fact, it is "so much case sensitive", I had to revrite the URL (href) path to my images from *.jpg to *.JPG (or whatever your file type extension might be).
Altering this solved my issue.
Don't apply the fancybox class to your LI element, do it to your A element.
I, after taking the above advice, changed ".png" to ".PNG" in the href. NOTE that the file names are a lower case extension but it only works with upper case extension in the href (rest of filename same)
Hope this helps.
My problem was giving inappropriate path to image e.g;
<a data-fancybox="gallery" href="../dist/imgs/nature/n1.png">
<img src="../dist/imgs/nature/n1.png"></a>
While the images loaded well locally, It could not do online.
Correcting the path solved the problem.
<a data-fancybox="gallery" href="imgs/nature/n1.png">
<img src="imgs/nature/n1.png"></a>
If you are trying to make Fancybox work with dynamic content, you may check this.
I was using the following code:
<a class="video__overlay" data-fancybox="gallery" href="<?= $blog_url ?>"></a>
My issue was that I was generating $blog_url dynamically, looking at a specific text file line, so a \n was being added at the end of $blog_url, without me noticing this.
So, I used trim() and everything works as expected.
I'm trying to create a website with tabbed browsing and have followed a tutorial to make this. But the problem is that the code I'm currently is using doesent work as expected.
HTML-code:
http://pastebin.com/CG146NS3
CSS-code: http://pastebin.com/4VCuAwJm
JavaScript: http://pastebin.com/sZhhQs6v
The tutorial I followed: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
The problem:
When I click one of the tabs the #content goes away with a slideUp and .load loads the content but it doesent place the content in #content.
You have some duplicate #ids.
Remember when you do:
var toLoad = $(this).attr('href')+' #content';
// other execution
function loadContent() {
$('#content').load(toLoad,function(){
$('#content').slideDown('normal');
});
you are actually loading a page fragment #content into #content in your page. So you end up with this:
<div id='content'>
<div id='content'>Random Data</div>
</div>
Okay, based on your comment..Just make sure that you actually have a DIv with ID #content in your random html files.