Im stuck with a little problem with fancyBox v2.
I want to launch fancyBox on button click. Once clicked, it will load all the images from the list (from the src attribute of the ).
I have created this jsfiddle to show what I am trying to do: http://jsfiddle.net/fPFZg/
jQuery(document).ready(function($) {
$('button').on('click', function() {
$.fancybox();
});
});
Can anybody see how this would be possible?
I had the same question and found the following to be a simpler method:
HTML
<button class="fancybox" value="Open Fancybox">Open Fancybox</button>
<div class="hidden" id="fancybox-popup-form">
(your Fancybox content goes in here)
</div>
jQuery
$('.fancybox').click(function () {
$.fancybox([
{ href : '#fancybox-popup-form' }
]);
});
CSS
.hidden { display: none; }
Further Reading
Fancybox Docs (click the "API Methods" tab, then read up on the first method, which is called "Open").
you can use it like this:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '1st title'
},
{
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '2nd title'
}
], {
padding : 0
});
Your code doesn't work because this $.fancybox(); doesn't tell fancybox what to open so does nothing.
What I would do, if you don't want to edit every link in your html, is:
1). add an ID to the <ul> tag so we can use that selector like
<ul id="images">
2). bind fancybox to all <a> anchors that are child of your element #images like
var fancyGallery = $("#images").find("a"); // we cache the selector here
fancyGallery.attr("rel","gallery").fancybox({
type: "image"
});
notice that we are adding a rel attribute on the fly to all anchors so they will be part of the same gallery
3). bind a click event to the button (I would recommend you to give it an ID too so it won't mess with other possible buttons in the future) that triggers the existing fancybox script as above, so with this html
<button id="fancyLaunch">Launch Fancybox</button>
use this script
$('#fancyLaunch').on('click', function() {
fancyGallery.eq(0).click(); // triggers a click
});
notice that we used the method .eq() to launch the gallery from the first item (first index in javascript is always 0)
Summarizing, your whole script may look like this :
jQuery(document).ready(function($) {
var fancyGallery = $("#images").find("a");
fancyGallery.attr("rel","gallery").fancybox({
type: "image"
});
$('#fancyLaunch').on('click', function() {
fancyGallery.eq(0).click();
});
});
See JSFIDDLE
Your html:
<ul>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
Your jQuery:
$(document).ready(function() {
$('button').on('click', function() {
$.fancybox($("a.fancybox"));
});});
Related
The code below works to make one copy of the image clicked. I am needing the code below to work for multiple images.
For example if I click 5 images on the screen, the same 5 images should generate at the bottom of the page. The user should be able to select 5 out of 10 images. Any thoughts? Thanks!
JS:
function changeImage() {
var imgSrc = 'http://placehold.it/150';
if (document.getElementById('myImage').src === imgSrc) {
document.getElementById('new').src = imgSrc;
}
}
HTML
<a href="#" onClick="changeImage()">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200">
You can use JQuery clone() function
$('img').click(function() {
$('body').append($(this).clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50/000000/ffffff">
<img src="http://placehold.it/50x50/1C90F3/ffffff">
<img src="http://placehold.it/50x50/F2BB7C/ffffff">
you can use jquery to do that
HTML
<a href="#" id="my-image">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200" />
JS
$('#my-image').click(function(){
//setting attribute src to be equal as src from #myImage
$('#new').attr('src', $('#myImage').attr('src'));
//returning false in order to avoid default action
return false;
});
So that is it :)
Just remember to put this code after your html or into
$(document).ready(function(){ ..... });
I hope this helps.
I have this piece of code :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<p class="demo">test </p>
<a href="xx" class="focusme">
<img src="images/testimage.gif" alt="" >
</a>
<a href="xx" class="focusme">
<img src="images/testimage.gif" alt="">
</a>
</div>
<script type="text/javascript" src="js/jquery.2.1.4.min.js"></script>
<script>
$(function () {
$(".focusme").focus(function(){
$(this).img.invert();
});
});
</script>
</html>
What I want to do is to invert the images when the <a> tag got focus, but I'm stuck to register the focus and blur event for them.
Here is what I'm trying to achieve :
for example, the html :
<a href="xx" class="focusme">
<img src="images/testimage.gif" alt="" id="img1">
</a>
So at this point, it's easy to access the img above because it has an ID :
$("#img1").invert();
but what i want is :
$(function () {
$(".focusme").focus(function(){
var img = $(this).img;
img.invert();
});
});
P/s : the invert() function is from a seperated js file, and is working well if I manually call it like this :
$("#img1").invert();
How can this be done?
Use the focus on <a> and use find() for the image
$(function () {
$("a.focusme").focus(function(){
$(this).find('img').invert();
});
});
The problem is that <img> tags cannot be focused by default. However, you can allow them to be focused by setting the tabIndex property.
$(".focusme").each(function(i) {
$(this).attr('tabIndex', i + 1)
})
After adding that, your code will be executed when you click on the images, and when you tab between them.
example: http://codepen.io/anon/pen/xZzzOm?editors=1010
I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});
Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});
If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");
Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});
I'm using this javascript to open a div containing an image when clicking on a text
http://jsfiddle.net/BfMDL/1/
my script :
$(document).ready(function() {
$('.image_trombi').hide();
$('.titre').click(function() {
$('.image_trombi').slideUp();
$(this).next().slideToggle();
return false;
});
});
my html
<div>image 1<div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-9.jpg" class="trombi_anim"/></div>
<div>image 2<div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-5.jpg" class="trombi_anim"/></div>
<div>iamge 3<div class="image_trombi"><img src="http://lorempixel.com/output/sports-q-c-200-200-5.jpg" class="trombi_anim"/></div>
It works perfectly, but I would like the div to close after clicking again on the link.
So, click on "image1", open image 1, and click again on "image1" close image 1...
and so on...
use only slideToggle() as you are doing slideToggle() you don't need to slideUp() that image container.
$('.titre').click(function() {
$(this).next().slideToggle();
return false;
});
Fiddle Demo
Here is a simple demo of an accordion effect that i made a year ago.
JS
(function() {
var menu = $('#acordion'),
contents = menu.find('.acordion-content').hide();
menu.children('li').click( function() {
contents.slideUp(200);
$(this).children('.acordion-content:hidden').slideDown(200);
});
})();
HTML
<ul id="acordion">
<li>
<div class="acordion-title">Cosa1</div>
<img class="acordion-content" src="" />
</li>
<li>
<div class="acordion-title">Cosa2</div>
<img class="acordion-content" src="" />
</li>
<li>
<div class="acordion-title">Cosa3</div>
<img class="acordion-content" src="" />
</li>
I have this piece of html from flickr badge:
<div class="flickr_badge_image" id="flickr_badge_image1">
<a href="[setlink]">
<img src="[imagelink].jpg" alt="A photo on Flickr" title="Road" height="75" width="75">
</a>
</div>
<div class="flickr_badge_image" id="flickr_badge_image2">
<a href="[setlink]">
<img src="[imagelink].jpg" alt="A photo on Flickr" title="Road" height="75" width="75">
</a>
</div>
<div class="flickr_badge_image" id="flickr_badge_image3">
<a href="[setlink]">
<img src="[imagelink].jpg" alt="A photo on Flickr" title="Road" height="75" width="75">
</a>
</div>
Whenever I click, the [setlink] will be opened. How do I prevent the click through, and open up fancybox with a SLIDESHOW, when I click the link. Thanks.
EDIT (moved from comments)
I did this :
$(".flickr_badge_image a").fancybox({
beforeLoad: function() {
this.title = $(this.element).find('img').attr('alt');
this.href = $(this.element).find('img').attr('src');
}
})
also
$('.flickr_badge_image a img').fancybox();
and
$('.flickr_badge_image a').fancybox();
First, bear in mind that the fancybox gallery will consist of the elements in your badge ONLY, not all your photos from your photostream. To make a fancybox gallery, you need to set the same rel attribute to each (<a>) element of the gallery using the .attr() method like :
$(".flickr_badge_image a").attr("rel", "gallery")
Second, [setlink] doesn't have any image extension so you need to tell fancybox that the content are images. Force the content type to image with the API option type: "image"
Third, you can hack the correct URL of each target image from the src attribute of the img tag in the thumbnail, so for instance :
<img src="http://farm1.staticflickr.com/32/102691513_68290d6cdc_t.jpg" width="75" height="100" title="a corner" alt="A photo on Flickr" >
Notice the name of the image has the suffix _t (thumbnail). If we remove the suffix _t then we have the big image path of the corresponding thumbnail, so from the example above
href="http://farm1.staticflickr.com/32/102691513_68290d6cdc.jpg"
... is the path to the big image that we want to display in fancybox.
We could use the javascript's method replace() to remove the suffix like
.replace(new RegExp("_t", "i"), '');
Your complete code should look like (no need preventDefault) :
$(".flickr_badge_image a").attr("rel", "gallery").fancybox({
type: "image",
beforeLoad: function() {
this.href = $(this.element).find('img').attr('src').replace(new RegExp("_t", "i"), '');
}
});
See it working in this JSFIDDLE
EDIT : to set the title use :
this.title = $(this.element).find('img').attr('title');
Updated fiddle
Try:
$(function() {
$(".flickr_badge_image a").click(function(ev) {
ev.preventDefault();
$(this).fancybox(...);
})
});
ev.preventDefault() - prevents default browser behaviour for specified event. http://api.jquery.com/event.preventDefault/