I want my Facebook sharer in Fancybox to catch alt of an image and place it as Title of link.
With this code below, I'm getting "undefined" title, and the rest is fine.
What's wrong with it?
$(".fancybox").fancybox({
beforeShow : function() {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
beforeShow: function () {
if (this.title) {
// New line
this.title += '<br />';
// Add tweet button
this.title += 'Tweet ';
// Add FaceBook like button
this.title += 'Facebook ;'
}
},
afterShow: function() {
// Render tweet button
twttr.widgets.load();
},
helpers : {
title : {
type: 'inside'
}
}
});
This is the code for images:
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<div class="hidden">
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
<a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a>
</div>
Basically hidden class is used to hide all images except the one on the top, however they are still browsable through Fancybox.
ANOTHER EDIT:
I have added div over the first image in order to test it
<div class="fancybox"><a class="fancybox" title="Title displayed under image" alt="alttext" href="Link to big image" rel="group"><img alt="alttext" src="Thumb" /></a></div>
What happens - If I will leave the alert, it pops up with proper title.
However, when I click on image, only picture shows up without social buttons.
The alt attribute of an image is not available from inside Fancybox and can't be passed to it either (without adapting fancybox.js). That's why this.alt in your second call to beforeShow() returns undefined.
You would need to use another method to pass the desired string to your Facebook link. If the alt text is the same as the title text, how about doing something like:
if (this.title) {
// pass original title to new variable
var originalTitle = this.title;
// New line
this.title += '<br />';
// Add tweet button
this.title += 'Tweet ';
// Add FaceBook like button ## using originalTitle
this.title += 'Facebook ;'
}
The alt attribute is not allowed in anchor tags - is there any reason for it being there?
This may be a misuse of the http://api.jquery.com/element-selector/.
If the tag is a child (nth level) of an element with the .fancybox class, and you are trying to get the 'alt' attribute of that tag, then I would try omitting the element command.
var alt = $(this).find('img').attr('alt');
Here is an example:
http://jsfiddle.net/benashby/avGk6/
Note: if the img you are after is a 1st level child of the fancybox div, it would be easier on the cliet to use the http://api.jquery.com/children/ command or some derivation of it.
Related
add src of image using jquery append function. i am using a variable in foreach loop and i wants to append image src . how do i do that.
my jquery code
$.each(data.products, function(key,val) {
$("div#yourwishlist").append('<div class="col-sm-6 col-md-4"><article class="box"><figure><a class="hover-effect" title="" href="#"><img width="300" height="160" alt="" src="'+val('thumb')+'"></a></figure><div class="details"><a class="pull-right button uppercase" href="" title="View all">select</a><h4 class="box-title">'+val['name']+'</h4><label class="price-wrapper"><span class="price-per-unit">$170</span>avg/night</label></div></article></div>');
console.log(val['name']);
});
this code is not working in my case ...
Hitesh you can add src attribute to an image like:
$.each(data.products, function(key,val) {
$("div#yourwishlist").append('<img width="300" height="160" alt="" src="'+ val +'">');
});
// here val contains the path of image in it
how to add tooltip image to more than one buttons. i would like to create images that appear on mouse over the buttons, each button have separate images to popup.
I placing the buttons below; on hover they popup a image over it.
<div>button 1</div>
<div>button 2</div>
<div>button 3</div>
You can add different jquery tooltip image to the different button. In that case you need to mention which image you want to add in which button. I have added image url to data-image attribute for each button. Finally you need to call tooltip function for each button.
Don't forget to add title attribute to a tag.
HTML:
<div>
button 1
</div>
<div>
button 2
</div>
<div>
button 3
</div>
js:
$('div a').each(function(){
var imageUrl = $(this).data('image');
$(this).tooltip({ content: '<img src="'+ imageUrl +'" />' });
});
jsfiddle link
You can also call tooltip function following way-
$( document ).tooltip({
items: "div a",
content: function() {
return '<img src="'+ $(this).data('image') +'" />';
}
});
jsfiddle link
You can use JqueryUI tooltip to create Customizable, themeable tooltips.
Here is a fiddle that has 3 buttons and a random image will popup when hovered on it.
HTML:
<a id="id1" href="#" title="">button 1</a>
<a id="id2" href="#" title="">button 2</a>
<a id="id3" href="#" title="">button 3</a>
Javascript with JqueryUI:
$( "#id1" ).tooltip({ content: '<img src="http://loremflickr.com/320/240?random=1" />' });
$( "#id2" ).tooltip({ content: '<img src="http://loremflickr.com/320/240?random=2" />' });
$( "#id3" ).tooltip({ content: '<img src="http://loremflickr.com/320/240?random=3" />' });
I'm not sure whether this is what you're looking for?!
I am trying to display a thumbnail image with every thumb class, but currently I am getting the output below where the images are looping inside the href instead. The order of div, href and img must not change. It looks something like this jsfiddle but this isn't fully working of course...
currently getting:
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
<img src="">
<img src="">
</div>
required output:
<div class ='thumb'>
<a href="#" rel="1">
<img src=>
</a>
</div>
<div class ='thumb'>
<a href="#" rel="1">
<img src="">
</a>
</div>
my loop:
var thumbnails = [];
$.each(data.productVariantImages,function(key, val){
thumbnails.push(val.imagePath);
});
for(var thumb in thumbnails) {
$('.thumb').append($('<img>').attr({
"src":[thumbnails[thumb]]
}));
}
am i looping it wrongly?
edit:
The thumbnails are part of a dynamic gallery where basically every time a user choose a different option in a dropdown list, the sources for the thumbs are supposed to change accordingly.
current html:
<div class="thumbnail"><?php
foreach($skuDetails['productVariantImages'] as $variantImage){
if(isset($variantImage) && $variantImage['visible']){
?>
<div class="thumb">
<a href="#" rel="1">
<img src="<?php echo $variantImage['imagePath']; ?>" id="thumb_<?php echo $variantImage['id']; ?>" alt="" />
</a>
</div> <?php }}?>
</div>
sample array of thumbnails:
["http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
"http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png"]
sample output:
<div class="thumbnail">
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
<div class="thumb">
<a href="#" rel="1">
<img src="http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples.png" id="thumb_323" alt="">
</a>
</div>
</div>
You need to use .each function on .thumb. Something like:
$(document).ready(function(){
$('.thumb').each(function(){
$(this).append($('<img>').attr({"src":[thumbnails[thumb]],}));
});
});
your loop is focused on wrong element. You append img tag to the thumb class. So, the img tags inside the same element. You should create div has thumb class inside the loop, and append it to the thumbnail div. That must like
var div = $(".thumbnail");
$.each(imageArray, function(index, value){
var elem = "<div class='thumb'><a href='#' rel='1'></div>";
div.append($elem);
$('.thumb').append("<img />").attr("src", value);
});
It may be wrong but you should watch the thumbnail element. I cannot write the code to test. But I think the logic must be like this.
If you want that exact structure, I made a demo using plain JavaScript. Enter a number and the thumbClone() function will generate that many. You could probably adapt this function with your existing code easily. I'm in rush, it probably needs refactoring, sorry. :-\
DEMO
function thumbClone(qty) {
var main = document.getElementById('main');
var aFig = document.createElement('figure');
var aLnk = document.createElement('a');
var aImg = document.createElement('img');
aLnk.appendChild(aImg);
aImg.src = "http://placehold.it/84x84/000/fff.png&text=THUMB"
aFig.appendChild(aLnk);
aLnk.setAttribute('rel', '1');
main.appendChild(aFig);
aFig.className = "thumb";
console.log('qty: ' + qty);
var thumb = document.querySelector('.thumb');
for (var i = 0; i < qty; i++) {
var clone = thumb.cloneNode(true);
thumb.parentNode.appendChild(clone);
}
}
You need to use each loop which will get each class rather than getting only one class below is syntax of each loop
$(selector).each(function(){
// do your stuff here
)};
in your case
$('.thumb a').each(function(){
// do your stuff here
$(this).append($('<img />').attr('src',[thumbnails[thumb]]);
)};
Looks like you need to create the entire div structure for each image.
Lets create the below structure dynamically using the max length of the image array and add the image src .
var thumbDivStart = "<div class ='thumb'><a href="#" rel="1">";
var thumbDivEnd = "</a></div>";
var thumbDiv = "";
for (i = 0; i < imageArray.length; i++) {
thumbDiv = thumbDivStart + "<img src="+imageArray[i]+"/>"+
thumbDivEnd;
//Here you can append the thumbDiv to the parent element wherever you need to add it.
}
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"));
});});
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/