To create Share Buttons on Fancybox (Title)

Knaufi

unread,

Jul 8, 2012, 1:35:48 PM7/8/12

to fanc...@googlegroups.com

I had all the time watched in any forums but i didnt found anything about sharebuttons on fancybox.....

i have a bad option to realize....

You must type all input code in title of fancybox.

like this (for Facebook and Foldename + Count from Images):

index.php

<script type="text/javascript" src="./fancyboxskripts/jquery-1.7.1.min.js"></script>


<script type="text/javascript"
src="./fancyboxskripts/jquery.mousewheel-3.0.6.pack.js"></script>


<link rel="stylesheet" href="./fancyboxskripts/jquery.fancybox.css?v=2.0.5"
type="text/css" media="screen" />
<script type="text/javascript"
src="./fancyboxskripts/jquery.fancybox.pack.js?v=2.0.5"></script>


<link rel="stylesheet"
href="./fancyboxskripts/helpers/jquery.fancybox-buttons.css?v=2.0.5" type="text/css"
media="screen" />
<script type="text/javascript"
src="./fancyboxskripts/helpers/jquery.fancybox-buttons.js?v=2.0.5"></script>

<link rel="stylesheet"
href="./fancyboxskripts/helpers/jquery.fancybox-thumbs.css?v=2.0.5" type="text/css"
media="screen" />

<script type="text/javascript"
src="./fancyboxskript/helpers/jquery.fancybox-thumbs.js?v=2.0.5"></script>

<link rel="stylesheet"
href="./fancyboxskripts/helpers/fancybox-title-over.css?v=2.0.5" type="text/css"
media="screen" />



<script type="text/javascript">
var addthis_config = {
services_overlay:'facebook,twitter,email,print,more'
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=[ra-4fabf8b219eed32a]"></script>


<script type="text/javascript">

$(document).ready(function() {

$(".fancybox-thumbs").fancybox({
beforeShow : function() {
this.title = '<a href="' + this.href + '" class="addthis_button_facebook_like" addthis:url="' + this.href + '" addthis:title="' + this.title + '"></a><br>' + (this.title ? ' ' + this.title : '');
},
afterShow : function() {
addthis.button(
$(".addthis_button_facebook_like").get()
);
},
closeBtn : false,

prevEffect : 'none',

nextEffect : 'none',

helpers : {
buttons : {},

title : {

type: 'outside'

},

overlay : {

opacity : 0.8,

css : {

'background-color' : '#000'

}

},

thumbs : {

width : 50,

height : 50

}

}

});
});

galeri2.php

<?
$pic_amount = count($pixlie_table_file); //Gesamtanzahl der Bilder feststellen
foreach ($pixlie_table_file as $key => $picture){ ?>

<a
title="
<table id=galeri-fb valign=center align=center style=background-color:#000000;>
<tr>
<td align=left style=background-color:#000000;>
<li>Bild: <?php echo ($key + 1)." von ".$pic_amount?></li>
<li>Bezeichnung: <?php echo $picture['name']; ?></li>
<?php
If ( $Albumtag != "")
{ ?>
<li>Album: <?echo $Albumtag; ?></li>
<?
}
?>
</td>
</tr>
<tr>
<td id=galeritd2-fb> //here is a facebook like plugin as iframe

<iframe src=//www.facebook.com/plugins/like.php?href=<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_b<?php echo $picture['extension']; ? >&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=dark&font=segoe+ui&height=80 scrolling=no frameborder=0 style=border:none; overflow:hidden; width:450px; height:80px; allowTransparency=true></iframe>

</td>
</tr>
</table>"
rel="group"
class="fancybox-effects-d"
id="#myDivID"
href="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_b<?php echo $picture['extension']; ?>">

<img src="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_s<?php echo $picture['extension']; ?>" alt="<?php echo $picture['name']; ?>" />
</a>

<?php } ?>

I hope somwone will find a better option.....

If You create a big title the image size will be smaler :(

Somewon have a better option????? :)

JFK

unread,

Jul 8, 2012, 8:19:57 PM7/8/12

to FancyBox

you may wan to try
http://stackoverflow.com/a/11356501/1055987

On Jul 8, 1:35 pm, Knaufi <knaufi1...@googlemail.com> wrote:
> I had all the time watched in any forums but i didnt found anything about
> sharebuttons on fancybox.....
>
> i have a bad option to realize....
>
> You must type all input code in title of fancybox.
> like this (for Facebook and Foldename + Count from Images):
>

> *index.php*
> *
> *
>
> *

> *
> *
>
> *
> *
>
> *
> *
> $(document).ready(function() {
> *
> *
> *$(".fancybox-thumbs").fancybox({
> *
> beforeShow : function() {
> *
> *

> this.title = '<a href="' + this.href + '"
> class="addthis_button_facebook_like" addthis:url="' + this.href + '"
> addthis:title="' + this.title + '"></a><br>' + (this.title ? ' ' +
> this.title : '');

> *
> *
> },
> *
> *
> afterShow : function() {
> *
> *
> addthis.button(
> *
> *
> $(".addthis_button_facebook_like").get()
> *
> *
> );
> *
> *
> },
> *
> *
> closeBtn : false,
> *
> *
> *prevEffect : 'none',
> *
> *nextEffect : 'none',
> *
> *helpers : {
> *
> buttons : {},
> *
> *
> *title : {
> *
> *type: 'outside'
> *
> *},
> *
> *overlay : {
> *
> *opacity : 0.8,
> *
> *css : {
> *
> *'background-color' : '#000'
> *
> *}
> *
> *},
> *
> *thumbs : {
> *
> *width : 50,
> *
> *height : 50
> *
> *}
> *
> *}
> *
> *});
> *});
>
> *
>
> *galeri2.php*
>
> *<?*
> *$pic_amount = count($pixlie_table_file); //Gesamtanzahl der Bilder
> feststellen*
> *foreach ($pixlie_table_file as $key => $picture){ ?>*
> *
> *
> * <a*
> * title="*
> * <table id=galeri-fb valign=center align=center
> style=background-color:#000000;>*
> * <tr>*
> * <td align=left style=background-color:#000000;>*
> * <li>Bild: <?php echo ($key + 1)." von ".$pic_amount?></li>*
> * <li>Bezeichnung: <?php echo $picture['name']; ?></li>*
> * <?php *
> * If ( $Albumtag != "")*
> * { ?>*
> * <li>Album: <?echo $Albumtag; ?></li>*
> * <?*
> * }*
> * ?>*
> * </td>*
> * </tr>*
> * <tr>*
> * <td id=galeritd2-fb> //here is a facebook like plugin as iframe*
>
> * ** <iframe src=//www.facebook.com/plugins/like.php?href=<?php echo

> $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_b<?php echo
> $picture['extension']; ? >&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=dark&font=segoe+ui&height=80
>
> scrolling=no frameborder=0 style=border:none; overflow:hidden; width:450px;

> height:80px; allowTransparency=true></iframe>*
>
> * </td>*
> * </tr>*
> * </table>"*
> * rel="group"*
> * class="fancybox-effects-d"*
> * id="#myDivID"*
> * href="<?php echo

> $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_b<?php echo

> $picture['extension']; ?>">*
>
> * <img src="<?php echo

> $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_s<?php echo

> $picture['extension']; ?>" alt="<?php echo $picture['name']; ?>" />*
> * </a>*
> *
> *
> *
> *
> *
> *
> *<?php } ?>*
>
> *
> *

Knaufi

unread,

Jul 9, 2012, 8:25:37 AM7/9/12

to fanc...@googlegroups.com

okay, yes it works fine :) i have modify anything...

<head>

<style type="text/css">
a {outline: 0 none;}
#wrapper {

width: 800px;

margin: 0 auto;

position: relative;
}
.links {
position: absolute;
z-index: 99999;
top: 0;
right: 0;
background: #f2f2f2;
width: 250px;
height: 100%;
display: block;
}
.links .inner {
padding: 50px 10px 10px 15px;
font-size: 12px;
}
#fancybox-buttons ul {
margin: 0 15px 0 auto !important;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({

closeBtn : false,

openEffect : 'elastic',
openSpeed : 1000,

closeEffect : 'elastic',
closeSpeed : 1000,

closeClick : false,
hideOnOverlayClick: false,
hideOnContentClick: false,

padding : 0,

helpers : {
title : {

type: 'outside'
},

buttons: {},

overlay: {
opacity: 1,
css: {'background-color': '#000'}
}
},
afterShow : function(){

var description = "<div class='links'>"+$("#description > div").eq(this.index).html()+"</div>"

$('#fancybox-overlay').html(description);
},

nextEffect : 'fade',
prevEffect : 'fade'

}); // fancybox
}); // ready
</script>
</head>

<body style= "background-color:000000; color:ffffff;">
<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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

.......

and to call the images....

<div id="description" style="display: none;">
<div><div class="inner">

<table id=galeri-fb valign=center align=center style=color:000000;>
<tr>
<td align=left>

<li>Bild: <?php echo ($key + 1)." von ".$pic_amount?></li>

<li>Bezeichnung: <?php echo $picture['name']; ?></li>
</td>
</tr>
</table>
<div class="fb-like" data-href="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_b<?php echo $picture['extension']; ?>" data-send="false" data-width="200" data-show-faces="true"></div>
</div></div>
</div>

<a
title="<?php echo $picture['name']; ?>"
rel="group"
class="fancybox"
id="#myDivID"
href="http://knaufi.dyndns.org/webdav/Gastzugang/pixlie.php<?php echo $picture['link_get']; ?>_b<?php echo $picture['extension']; ?>">
<img src="http://knaufi.dyndns.org/webdav/Gastzugang/pixlie.php<?php echo $picture['link_get']; ?>_s<?php echo $picture['extension']; ?>" alt="<?php echo $picture['name']; ?>" />
</a>

If you wanna check this visit http://knaufi.dyndns.org/webdav/Gastzugang and type in "Benutzername" = "KM-Gast" to see images.

I saw this link in other forums but i was to stupid to check this :D

I have to look in the source of this page :) (http://stackoverflow.com/a/11356501/1055987)

Thank you JFK!

Knaufi

unread,

Jul 9, 2012, 8:48:37 AM7/9/12

to fanc...@googlegroups.com

or look here -> http://www.knauf-media.de/?&id=9

Reply all

Reply to author

Forward