0

我的想法是从 href 图像中获取相对路径，并在我单击时放置在脚本中。当我单击或使用箭头更改照片时，总是更改绝对路径。如何创建此变量？问候，费尔南多。

<body>
<script>
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        beforeShow: function () {
            if (this.title) {
                // New line
                this.title += '<br />';

                // Add FaceBook like button
                this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.MySite.com.br/**HREF FROM PHOTO**&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe></iframe>';
            }
        },
        afterShow: function() {
        },
        helpers : {
            title : {
                type: 'inside'
            }
        }  
    });
    </script>
<ul>
  <li><a class="fancybox" href="demo/1_b.jpg" data-fancybox-group="gallery" title="foto01"><img src="demo/1_s.jpg" alt="" /></a></li>
  <li><a class="fancybox" href="demo/2_b.jpg" data-fancybox-group="gallery" title="foto02"><img src="demo/2_s.jpg" alt="" /></a></li>
  <li><a class="fancybox" href="demo/3_b.jpg" data-fancybox-group="gallery" title="foto03"><img src="demo/3_s.jpg" alt="" /></a></li>
  <li><a class="fancybox" href="demo/4_b.jpg" data-fancybox-group="gallery" title="foto04"><img src="demo/4_s.jpg" alt="" /></a></li>
  <li><a class="fancybox" href="demo/5_b.jpg" data-fancybox-group="gallery" title="foto05"><img src="demo/5_s.jpg" alt="" /></a></li>
</ul>
</body>
</html>
4

2 回答 2

0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta property="og:title" content="XXX"/>
<meta property="og:url" content="http://www.bag.com.br/matilha/pracachorro"/>
<meta property="og:image" content="ABSOLUTE_IMAGE_URL"/>
<meta property="og:description" content="teste"/>
<meta property="og:site_name" content="pracachorro"/>
<meta property="og:type" content="product"/>
<meta property="fb:app_id" content="507941172576787"/>
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.9.0.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.4" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
</head>

<body>
<script>
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        beforeShow: function () {
            if (this.title) {
                // New line
                this.title += '<br />';

                // Add tweet button
                this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';

                // Add FaceBook like button
                this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
            }
        },
        afterShow: function() {
            // Render tweet button
            twttr.widgets.load();
        },
        helpers : {
            title : {
                type: 'inside'
            }
        }  
    });
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="product"> <a class="fancybox" href="http://www.bag.com.br/matilha/pracachorro/demo/1_b.jpg" data-fancybox-group="gallery" title="foto01"><img src="http://www.bag.com.br/matilha/pracachorro/demo/1_s.jpg"  width="150" height="150" /></a>
  <fb:like href="http://www.bag.com.br/matilha/pracachorro/demo/1_b.jpg" layout="button_count"
  show_faces="false" width="240" height="40"
  action="like" colorscheme="light"></fb:like>
</div>
<div class="product"> <a class="fancybox" href="http://www.bag.com.br/matilha/pracachorro/demo/2_b.jpg" data-fancybox-group="gallery" title="foto02"><img src="http://www.bag.com.br/matilha/pracachorro/demo/2_s.jpg"  width="150" height="150" /></a>
  <fb:like href="http://www.bag.com.br/matilha/pracachorro/demo/2_b.jpg" layout="button_count"
  show_faces="false" width="240" height="40"
  action="like" colorscheme="light"></fb:like>
</div>
</div>
<div class="product"> <a class="fancybox" href="http://www.bag.com.br/matilha/pracachorro/demo/3_b.jpg" data-fancybox-group="gallery" title="foto03"><img src="http://www.bag.com.br/matilha/pracachorro/demo/3_s.jpg"  width="150" height="150" /></a>
  <fb:like href="http://www.bag.com.br/matilha/pracachorro/demo/3_b.jpg" layout="button_count"
  show_faces="false" width="240" height="40"
  action="like" colorscheme="light"></fb:like>
</div>
</body>
</html>
于 2013-04-04T15:01:34.817 回答
0

您可以使用 XFMBL 为页面上的每个图像显示不同的喜欢。此链接有一个非常详尽的示例：http ://hillarsaare.com/multiple-facebook-like-buttons-on-one-page/

这是该站点的示例：

<div class="product">
  <fb:like href="YOUR_URL_WHICH_HAS_META_TAGS" layout="button_count"
  show_faces="false" width="240" height="40"
  action="like" colorscheme="light"></fb:like>
</div>

<div class="product">
  <fb:like href="ANOTHER_URL_WHICH_HAS_META_TAGS" layout="button_count"
  show_faces="false" width="240" height="40"
  action="like" colorscheme="light"></fb:like>
</div>
于 2013-04-03T20:53:07.530 回答