Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

http://www.shritimes.com/

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
2  
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

3 Answers 3

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.js"></script>
<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
});
</script>

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

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

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.