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/
Related
I'm looking for a way to dynamically feed and image matched to a specific trigger in the URL
Example:
Url:http://domain.com?tv=panasonic
<img src="../images/tv/panasonic.jpg" width="275" height="367" alt=""/>
Url:http://domain.com?tv=sony
<img src="../images/tv/sony.jpg" width="275" height="367" alt=""/>
So someway I need to swap out panasonic.jpg with sony.jpg etc, is this possible?
TV is a GET parameter, so you can do this:
$tv = 'default';
$chosenTv = isset($_GET['tv']) ? $_GET['tv'] : '';
if (in_array($chosenTv, ['sony', 'panasonic'])) {
$tv = $chosenTv;
}
Then later:
<img src="../images/tv/<?php echo $tv; ?>.jpg" width="275" height="367" alt=""/>
Feel free to change the 'default' image to be whatever you want if TV wasn't specified in the URL.
I have a page of about 15-20 YouTube videos I’d like to dynamically update the img src to point to the YouTube hosted thumbnails. From a logic perspective, I want to find every DIV with a class of “videos”, get the ID of that class and update the image source with the dynamically inserted value, e.g., http://img.youtube.com/vi/DbyNtAQyGs/0.jpg in the first example. All IDs are unique because they are the YouTube video IDs and there is only one img tag under each “videos” class.
This code would run on page load so it would have to be pretty fast to ensure the values are set before the browser passes the each img tag in the DOM. Hoping I can get one of those one liners instead of vars and multiple lines.
<div id="DbyNtAQyGs" class="videos">
<img src="" width="212" height="124" />
</div>
<div id="Fh198gysGH" class="videos">
<img src="" width="212" height="124" />
</div>
Current Code
$('.videos img').attr('src', 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id')); + '/0.jpg');
You can use:
$('.videos img').attr('src', function() { return 'http://img.youtube.com/vi/' + $(this).closest('div').attr('id') + '/0.jpg'; })
Loop through the .videos elements:
$('.videos').each(function(){
var $this = $(this),
_id = $this.attr('id'); // Capture the ID
// Construct the img src
$this.find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg');
});
Bonus: chain in the click event for your anchor:
$this.find('a').click(function(e){
e.preventDefault();
loadPlayer(_id);
}).find('img').attr('src', 'http://img.youtube.com/vi/' + _id + '/0.jpg');
So you can simplify your markup:
<div id="DbyNtAQyGs" class="videos">
<img src="" width="212" height="124" />
</div>
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 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.
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"));
});});