Automatically add fancybox class to image links
Question
I'm using the Pulse CMS for designing a simple static website that needs to be editable. I'm using FancyBox for image highlighting and enhancing.
What I want is for all the images to automatically be associated with FancyBox without having to add the code manually.
Basically something like this
<img src="image.jpg">
should become
<a class="fancybox" href="image.jpg"><img src="image.jpg"></a>
I hope it's clear what I'm aiming for. I fiddled around using jQuery and PHP, but couldn't really figure it out. I don't even know if this is possible, maybe if not there are alternatives.
In response to JFK suggestion -- please tell what I'm doing wrong here:
<html>
<head>
<link rel="stylesheet" href="includes/jquery.fancybox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="includes/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="includes/jquery.fancybox.js" type="text/javascript"></script>
<script type="text/javascript">
$("img").on("click", function(){
$.fancybox($(this).attr("src"),{
// API options
padding : 0 // example
});
});
</script>
</head>
<body>
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt=""/>
</body>
</html>
5 answers
solution1
1 ACCPTED 2013-04-08 02:54:47
If what you want is all the images to automatically be associated with FancyBox , then maybe you don't even need to wrap - .wrap() - them with an anchor. A different approach would be to link them directly to fancybox on click like :
$("img").on("click", function(){
$.fancybox($(this).attr("src"),{
// API options
padding : 0 // example
});
});
In this way, you don't process anything until the actual image is clicked. This would be better in terms of performance (consider 100+ images being wrapped every page load)
See JSFIDDLE
NOTE : .on() requires jQuery v1.7+
EDIT :
Umair Abid 's comment about specificity is worth to consider because you may not like to open in fancybox ALL your page's images (which it would include your logo.) It would be a better idea to target those images in your specific content container so this line
$("img").on("click", function(){
... would work better like
$("#contentContainer img").on("click", function(){
solution2
0 2013-04-08 01:02:57
使用jQuery的.wrap（）函数用指向图像位置的定位标记包装页面中的所有图像
solution3
0 2013-04-08 01:05:42
$("img").wrap(function() {
return '<a class="fancybox" href="' + $(this).attr("src") + '"/>';
});
This should work.
EDIT : whoa typos out the wazoo
solution4
0 2013-04-08 01:08:35
I guess it is possible through jquery. First you need to give class on img tags which you want to convert into fancybox url, than use the following jquery code
$('img.attach_fancybox').each(function(){
var src = $(this).attr('src');
$(this).after('<a class="fancybox" href="'+src+'"><img src="'+src+'"></a>');
$(this).hide();
})
I haven't tested the code so let me know if it doesn't work
solution5
0 2013-04-08 01:09:41
Use
$("img").wrap(function() {
return "<a class='fancybox' href='" + $(this).attr("src") + "' />";
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.