Take the 2-minute tour ×

I am trying to understand the technology which many news websites use please have a look at this website


if you click any news item then the particular thing gets zoomed and viewer can read the news as far as I can understand they have done some programming by which a gif image is opened up in a new pop up, can some one help to understand as what thing is used here javascript,html, php or what exactly? I have seen this feature in a lot of websites I want to know how it is achieved? I am looking from the code side of the things if some one can advise me any function call which does this I am a programmer but into C I am new to web kind of things.

share|improve this question
For the record, this is overall a horrible way to present content. If you look in the source, there's no actual text. It really is just a bunch of images getting zoomed. If you have no intent of being indexed by search engines, I suppose that's acceptable, but it generally isn't. –  Su' Nov 22 '12 at 10:26
add comment

3 Answers

up vote 3 down vote accepted

Regarding the way this is done, as mentioned above, it is Jquery. Jquery is just a Javascript library that helps you add some frontend functionality that would be quit cumpersome to do by writting all the necessary Javascript. Visit jquery.com or search for jquery tutorials and you will on your way.

The specific functionality is generally referred to as Lightbox or Thickbox (because of 2 jquery plugins that do this). Search for "lightbox jquery" and you will find a lot of articles on how to achieve what you want.

A couple I found: fancybox, Lightbox, Colorbox (my favorite)

To give you an idea. Using Lightbox plugin you can do it with the following code:

<!-- include jquery and lightbox --> 
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
<!-- include lightbox css --> 
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

<!-- the image you want to activate the zoom in --> 
<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

<!-- javascript you need --> 
<script type="text/javascript">
$(function() {
    $('a').lightBox(); // Select all links in the page

After saying all that. PLEASE don't copy that sites way of displaying news. It is rather annoying and in the future you will see that it does more harm than good. You need to have your news in text format so a user can read then the way they like, a search engine can find them. If you need a good example of a news site visit bbc.co.uk and get inspired by that. best of luck :)

share|improve this answer
add comment

You can see when right clink through mouse and understand the source of the page. U find the script tag in your head section.

share|improve this answer
add comment

It's JavaScript/JQuery.

Look in the source and you can read all the JS files they use.

share|improve this answer
For whatever it's worth, they're also loading mootools on that site. Which is probably yet another bad idea. (cf. my comment above on the question.) Nothing wrong with mootools, but using two JS libraries is almost certainly unnecessary. –  Su' Nov 22 '12 at 10:29
add comment

Your Answer


