How to add the Zoom effect on our own website - facebook

I would like to have the effect like Facebook Theatre Mode on my website. But where to find the sample? I need one, the effect is when we click on the photo from the photo album then another pop-out layer on the top of the website. It is something like this:
http://www.youtube.com/watch?v=31FG9yONqVo
https://chrome.google.com/webstore/detail/elioihkkcdgakfbahdoddophfngopipi
But I only get the code to disable it and not full code.![A white pop-up layer display above the web page. Anyone has any idea how to do this or any example for me to follow? Truly need help and appreciate much for helping!][1]

You can take help from the below scripts or adapt as per your need...
http://www.intenseblog.com/design/8-amazing-javascript-image-zoom-scripts.html

Related

Wordpress slider with filters & thumbnails outwith the slider

I am looking to create a slider within wordpress that is a little out of the norm and was wondering if anyone could give me advice on how to go about it.
I'd like a slider for a meet the team page on our website.
I am hoping the slider could work as normal but have filters on the left for departments and thumbnails below and outwith the slider with each employee on there.
I would like these thumbnails to be clickable and for the matching slide to appear when the thumbnail is clicked.
Can anyone suggest a plugin or a method to create this kind of thing?
Thanks in advance for your help.
Well i think you are referring to isotope jquery plugin. It filters down items based on the selected tag. Its actually free but you will have to create modify it for your needs. If you are using bootstrap you can get the idea of implimentation from here.
http://theme.stepofweb.com/Atropos/v1.5/HTML/page-team.html
Here is a paid wordpress plugin that can do that for you.
http://codecanyon.net/item/meet-the-team-wordpress-plugin/full_screen_preview/4983412

Content Slideshow Plugin

Does anyone have any suggestions as to what wordpress plugin I can use to create a similar type of slideshow plugin as the ones that are used on Refinery29? Here is a link to an example...
http://www.refinery29.com/rooftop-bars-nyc/slideshow#slide-1
What I like about this particular slideshow/gallery is that the images don't auto-resize to fit into a fixed gallery box, the slides are numbered, there is a full-screen option.
I also like that each slide is a new URL - better click-through rate I would assume.
This is another example that I like as well...
http://www.wellandgoodnyc.com/2013/06/03/7-stunning-summer-yoga-escapes/
If anyone can provide any suggestions (free or premium plugins), I would be forever grateful!
Thank you!
jquery carousel lite is easy to implement and adapt to your needs;
http://www.gmarwaha.com/jquery/jcarousellite/
for more heavyweight stuff you could use jquery carousel
http://sorgalla.com/projects/jcarousel/

Trying to delete white space in Facebook Like box

I a working on a client's website and decided to add a "Facebook Like Box" (example). I was working in the Facebook Developers page. I am a Joomla developer (2.5x platform) I am trying to figure out how to delete the white space from the title of the like box WAY down to where my pictures are... Any suggestions on how to do this or where I need to go into Facebook to correct this??
I tried to re-size the height, BUT once I did that to make it smaller, it cut off my pictures.
Your help in this matter would be greatly appreciated.
EDIT: ok, stack overflow does not understand the URLs so you'll have to copy and paste or use the short link.
That's a frame, short link: http://on.fb.me/152cjgH
http://www.facebook.com/plugins/likebox.php?api_key=&locale=en_US&sdk=joey&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Df108e873a75ab52%26origin%3Dhttp%253A%252F%252Fwww.ordwaybuildingsupply.com%252Ff211d31607a9c7e%26domain%3Dwww.ordwaybuildingsupply.com%26relation%3Dparent.parent&height=558&header=false&show_faces=true&stream=true&width=200&href=http%3A%2F%2Fwww.facebook.com%2Fhome.php%3Fclk_loc%3D5%23!%2FOBS75%3Ffref%3Dts&colorscheme=light
The big white space is the stream so change the values you're requesting, namely
remove &stream=true
and change &height=558 to &height=300 or something
http://on.fb.me/152co4e >
http://www.facebook.com/plugins/likebox.php?api_key=&locale=en_US&sdk=joey&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D18%23cb%3Df108e873a75ab52%26origin%3Dhttp%253A%252F%252Fwww.ordwaybuildingsupply.com%252Ff211d31607a9c7e%26domain%3Dwww.ordwaybuildingsupply.com%26relation%3Dparent.parent&height=300&header=false&show_faces=true&width=200&href=http%3A%2F%2Fwww.facebook.com%2Fhome.php%3Fclk_loc%3D5%23!%2FOBS75%3Ffref%3Dts&colorscheme=light

Facebook hide content from non-fans in a unique way

I need to build a tab looking like this one:
https://www.facebook.com/auto.co.il/app_134594493332806
I know how to add an image and a comment box and i know of several "plain" ways to hide the content from non-fans, but i came across the above tab and i really like the way it shows thee content yet you cant engage it until you press the like button.
Any help please?
Thanks in advance.
Oren
Your link didn't work for me, but you can place a absolutely positioned div with a high z-index above the rest of your content to prevent the user from clicking on anything.
Update: Now that the link has been updated I see that they are doing exactly what I described above. In chrome if you right-click the background and select "inspect element" you will see the following computed style for the div:
rgba(0,0,0,0.796);
display:block;
height:1612px;
width:810px;
The content is blacked out simply with a div with a black background and some opacity. Just for fun, you can overcome their like gate (without liking) via chrome's JS console by selecting the iframe context and then entering the following:
$('.like_float_c').detach();
... now call youself a 'hacker' ;)

Facebook XFBML like button will not resize width - using Joomla and K2

I just installed the Facebook Like button XFBML plugin on my blog site, which uses K2 and Joomla (I copied the code directly from facebook developers.) The problem is that the plugin is too wide - it's the default 450px wide. Even when I enter 400px, and redo it, it stays 450 px wide. I can't seem to get it to resize for some reason. This is a big problem, because the right side of the comment box is hidden (I have a column on the ride hand side that covers it.) So, you can't push the "post" button. I've searched google and your database, but I can't find any posts about a similar problem. And I'm not sure where to go for help. Here is a link to an article on my site so you can see what I mean:
http://www.artdotlife.com/art/studio-blog/entertaining-baby/item/148-if-snow-white-and-the-seven-dwarfs-were-released-today-it-would-incite-mobs-of-angry-mothers-little-people-and-screenwriters-here%E2%80%99s-why
Thanks!
Ok, your using Joomla, no problem. When I look at the code all I see is . Using Firebug I can see that the comments plugin is runnin at 550px.
When you edit this module do you turn the editor off? I would try that and make sure you add the width variable to the comments tag as it's not showing up.
Comments also requires an href tag to work properly if I'm not mistaken. Not the issue with the width but just a heads up.