I'm currently working on the small gallery site for myself and to display each image I decided to use the LightBox v2 plugin. http://lokeshdhakar.com/projects/lightbox2/
But unfortunately, it is not simple as I would like. The plugin works, I mean, I can display images in the lightbox (I have the Prev/Next button, this is not the problem) but each image is shrinked in width and I really don't understand why!
Here an example of how it is currently looks like:
http://sdz-upload.s3.amazonaws.com/prod/upload/Capture%20d%E2%80%99e%CC%81cran%202013-07-08%20a%CC%80%2011.49.56.png
And here my code:
<h2>Par Catégorie</h2>
<?php
$reqcategorie = db_query('SELECT * FROM photos');
while($donneecategorie = $reqcategorie->fetch()) {
?>
<?php echo $donneecategorie['categorie'];?>
<?php
}
?>
If you already used this plugin and have encountered this issue, please tell me how you solved it.
PS: I'm using Twitter Bootstrap, is there any incompatibility between both of them?
Add the following css rule:
.lb-image{
max-width: inherit;
}
Bootstrap has default img max-width set to 100% and for some reason lightbox stops resizing.
--
Solution emailed to me by https://github.com/kiballion. Credit where credit is due.
Related
I hope someone can help me with my problem with tumblrs lightbox.
I only have very basic html knowledge and because of that, I thought, it might be a good idea to work with tumblr themes. Everything works fine, but if you click on a picture on my site, tumblrs lightbox shows up and its back button does not bring you back to my main site, instead it shows the picture on another site.
Thats annoying, but I do not know how to change the options of the tumblr lightbox back button?
http://andreasschmitten20062010.tumblr.com/
Is there anyone here, who knows something about tumblr and how to change this?
Also it would be great if you could move through the other pictures from the lightbox.
Thank you very much
Andre
Get rid of the {LinkOpenTag} and {LinkCloseTag} surrounding the image tag.
Eg.
{LinkOpenTag}
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{LinkCloseTag}
becomes
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
I am using wordpress for my website and I am trying to set up my pages so that a user has to click a button to view the content. Yes, very simple with show/hide etc but the button I Want the user to click is this http://www.facebook.com/plugins/like.php
To display that in my page i need to use an iframe which is where it gets tricky. I have set up the show/hide code so that when a user clicks the like button (or anywhere in the iframe) it will display the content. But, no such luck!
This is my code
<div id="imagebox" style="display:none;"><?php $image = wp_get_attachment_image_src(get_field('image'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('image')) ?>" /> </div>
<div onclick="ShowDiv()"><iframe src="http://www.facebook.com/plugins/like.php? href=http://www.facebook.com/BrandBang&" allowTransparency="true">
</iframe></div>
<script language="javascript">
function ShowDiv()
{
document.getElementById("imagebox").style.display = '';
}
</script>
I know that it is hard to use iframes to do what I am trying to do, but i am a total newbie when it comes to this stuff. Any help would be great!
Have tried giving your div an id="imagebox"?
EDIT:
This was already answered here.
But, I didn't realize at first sight that you're loading something in the iframe that is not coming from your own domain, so you're going to fall in a cross site scripting event, which is not allowed.
Afaik, you have to redesign some way your implementation.
For instance, you could retrieve the generated html from facebook using curl and then outputting in your own div. Something like that should work.
I created a fanpage and integrated a app with width 520px. Everything works fine but the context is 5px to 10px shifts to the right and so on there is a scrollbar shown at the end of page. How can I solve this.
I know scrollbars can be hidden with overflow:hidden and inside tag <body scroll=no> but this doesn´t solve the shift to the right.
You can try using the FB.Canvas.setAutoGrow method :
Please read the Facebook JS SDK Documentation of the FB.Canvas.setAutoGrow method. In that link is an explanation on how to use facebooks auto size functions to fix these sorts of problems.
The problem seems to be that facebook fanpages tabs have a html - padding with 8px!!!! to solve this I set in css: <body style="position:relative;left:-8px;">
I'm using the following code for my like button
<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>
Some users have experienced the like button not showing up. Noted in 3.6.17 but observed in other versions. I'm somewhat familier with the firefox iframe bug, but I was currious if anyone has any work arounds for the facebook like button.
Like buttons that are rendered with javascript (<div class="fb-like"/> and <fb:like/>) get height=0 if they are initially hidden (display:none).
To work around this, create the element with javascript after the container is displayed, and then run:
FB.XFBML.parse();
Example:
result.show();
var like_box = $(".fb-like-inactive", result);
like_box.removeClass("fb-like-inactive");
like_box.addClass("fb-like");
FB.XFBML.parse();
This CSS solved it for me
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
This is still an issue, as can be seen here (also contains fix):
http://codepen.io/wiledal/pen/cGnyq
Firefox does not draw the Facebook-like if the div is hidden at the time of parsing. In the example above I delay the showing of a div after different times. You can see that a like-button shown after 500ms does not get rendered in Firefox.
I managed a work around which does not cut off the comment dialog after liking, simply by using min-height and min-width instead of set values that was previously proposed.
.fb-like span, .fb-like iframe {
min-width: 100px !important;
min-height: 20px !important;
}
I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.
Can you try calling the like button like so:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like>
And let me know if you're still seeing issues.
Leaving an answer because I can't leave comments yet...
Oli's nice CSS hack looked like it worked initially:
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
but it clipped the comment box that tried to pop up when we actually clicked the like button.
Per's delayed parse solution seems to do the job; here's a bit more detail. In our case we had the like button in a drop down menu, which looked like:
<ul>
<li class="control_menu">
<span>menu name</span>
<ul style="display: none;">
<li><div class="fb-like-inactive" data-href=...></li>
...
</ul>
</li>
...
</ul>
with code that shows the drop down ul when the user hovers over the control_menu element. We used this code to handle the delayed parsing:
$(document).ready(function() {
$('.fb-like-inactive').closest('.control_menu').hover(function() {
var inactive = $(this).find('.fb-like-inactive');
if (inactive.length && (typeof FB != 'undefined')) {
inactive.removeClass('fb-like-inactive').addClass('fb-like');
FB.XFBML.parse(this);
}
});
});
It finds the fb-like-inactive buttons, then looks up the tree to find the containing control_menu elements, then attaches an event to the control_menu elements to detect when the user hovers over them. When it detects a hover for a particular menu element, it looks for inactive like buttons within that element, marks them as normal fb-like, and then parses just the content of that element.
I hope this saves someone some time.
I just spent an hour on this and on a much more basic level, you need to know that the Facebook buttons will not render when testing your page locally.
It may seems obvious but it will only work when rendering from a webserver.
Per's solution is based on the XFBML version of the fb button and I wasn't sure how to do this with the "html5 version" or if it is really possible but I found a CSS/JS solution that doesn't clip content instead so here it is:
html
<button class="like-button">I like this stuff</button>
<!-- This is a hidden like-box -->
<div class="social-share aural">...stuff...</div>
CSS:
html body .aural {
position: absolute;
font-size: 0;
left: -9999px;
}
jQuery:
$('body').on("click", '.like-button', function(e) {
var $socialShare = $('.social-share');
$socialShare.css({'font-size':'1em'});
var sw = $socialShare.width();
$socialShare.animate({left: sw-80}, 400);
});
You may have to use !important rule (in both css and js) or nest the .aural class depending on the rest of your css. If it doesn't work I'd suggest trying to change the default layout so it doesn't override .aural or nest .aural and as a last resort use !important..
I had the same problem but the culprit was setting tracking protection in about:config to true.
This tip turned me on to the idea initially:
Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster
My solution is completely different to any of the above.
I have a character animation in my page, and one of the elements has the id="body" (which is perfectly reasonable) however this seemed to kill the FB script.
As soon as I renamed my id, the share started working again; I can only presume there was some kind of conflict, as id'ed elements can be referenced as global variables.
I found this out through the usual process of removing elements until things worked, so I'm fairly sure it was this.
How to control the facebook like box stream part height alone. Its normal to reduce height of whole box but if tries to control it fans images are not shown.
The css .fan_box .page_stream{ ...,width:300px} to .fan_box .page_stream{...,width:150px}
i'm asking because the stream box inside iframe
There isn't a way to change the height. Facebook doesn't provide a way to change the height and there isn't a way to change the height using JavaScript and CSS.
Why can't I do it with JavaScript and CSS?
CSS just doesn't apply through an iFrame because thats how an iFrame works -- its basically a window to another page with its own CSS.
Javascript won't allow you to access the content of an iFrame if the URL of the iFrame is different than the page that contains the iFrame. Doing:
document.getElementById('iframeID').contentWindow.document
Will give you the following warning in Chrome.
Unsafe JavaScript attempt to access frame with URL... Domains, protocols and ports must match.
The reason for this is to prevent XSS. Here's more on the Same Origin Policy.
I saw this on the Like Box page and figured I'd respond that you can use the 'data-height' attribute:
data-height="250"
Worked for me. Here's my example:
http://www.skonet.com/Resources/Articles/Index.aspx
you can reduce the height of the encasing div, hide its overflow and if you want push the top of it underneath an absolutely positioned element with a higher z-index like so:
<div style="position:absolute;z-index:2;top:0;left:0;width:300px;height:130px;background-color:#c0c;opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";"></div>
<div style="height:140px;width:140px;overflow:hidden;background-color:#0c0; margin-top: 60px;color: #fff;padding: 30px;font-family:arial;">
facebook like box goes here - only the green part will be visible if you make the pink box white and take out the 0.5 opacity and the bottom will get cut off so you can just display whatever part you want
</div>
I suppose you guys still need it and this is the most acurate trick I can provide and its also promising to work with the every day changing of the facebook like box by facebook.
Its a bit tricky but will work for you guys..
create two seprate like box of the same page, and close them in seprate div right in my case
<div class="up1">
facbook like box 1 code
<div class="up2">
facbook like box 2 code
Now in the css
use position absolute to class up1
.up1 {
position:absolute;
z-index:99999;
background-color:white;
}
and in up2
.up2 {
padding-top:87px;
}
What it does it will put the box 1 over the box 2 hiding its facebook like and bla bla making it feel like you have one box that contain picture and streaming of your desired lenght
I was looking around cos I had a problem like this one. Facebook has no standard way of customizing the stream if the faces and header are checked.
The solution is to take them differently. If you need the stream as long as 1000px, just uncheck everything except the stream. This will change its height from the default 300px to whatever value you type in the height field.
See an example below:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="2000" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="true"></div>
Then if you still need the one with faces, get a new code and set the height differently, then uncheck the others. Below is an example:
<div class="fb-like-box" data-href="https://www.facebook.com/MadeinHeavenEvents" data-width="800" data-height="500" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
Don't forget to add the SDK before these codes.
I know it's a long time since this was posted, but here is the solution that helped me today
Yes the data-height to 250 will work as it reduce the outside iframe
Now try to set data-height to 1000 - it is still 300px height,
because the inner div inside the iframe hard coded to 300px and
you can not control that as it is in a cross domain iframe...
<div class="fb-like-box" data-href="http://www.facebook.com/example" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"></div>
Adjust the height in this code to what works best for you.