PHP: May 2016

Step 1 – Add The Following Customized Code to Your Page:

Add this code inside the <head> of your page, just before the closing </head> tag:

<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
    a.fancybox img {
        border: none;{{SHADOW}}{{TRANSFORM1}}
    } {{TRANSFORM2}}
</style>

Note: If you're using WordPress, you can add this code to the head.php template file.

Add this code inside the <body> of your page, just before the closing </body> tag:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
    $(function($){
        var addToAll = {{ADDTOALL}};
        var gallery = {{GALLERY}};
        var titlePosition = '{{TITLEPOSITION}}';
        $(addToAll ? 'img' : 'img.fancybox').each(function(){
            var $this = $(this);
            var title = $this.attr('title');
            var src = $this.attr('data-big') || $this.attr('src');
            var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
            $this.wrap(a);
        });
        if (gallery)
            $('a.fancybox').attr('rel', 'fancyboxgallery');
        $('a.fancybox').fancybox({
            titlePosition: titlePosition
        });
    });
    $.noConflict();
</script>

Note: If you're using WordPress, you can add this code to the footer.php template file.

Step 2 – Enable Lightbox for Specific Images

To enable the lightbox effect for a given image, simply add class="fancybox" to the image's <img> tag. For example:

<img src="my-image.jpg" />

Becomes:

<img class="fancybox" src="my-image.jpg" />

For each lightbox-enabled image, you may also want to set some custom options:

Because you selected the 'all images' option above, no additional changes are needed. The lightbox effect will automatically be applied to all photos in your page. You may want to set some custom options, though:

Setting Big-Image Sources

By default, the same image that is included in your page will be shown in the lightbox, but at full size. Often, though, you will want to have a low-resolution version inline in your page, and display a higher-resolution version in the lightbox. To set a custom image source for lightbox display, set the data-big attribute on the <img> tag. For example:

<img class="fancybox" src="small-image.jpg" />

Becomes:

<img class="fancybox" src="small-image.jpg" data-big="big-image.jpg" />

Setting Captions

As exemplified in the first demo image above, you can optionally specify captions for your lightbox-enabled images. To control the caption displayed for a photo, set the title attribute on its <img> tag.

For example:
<img class="fancybox" src="my-image.jpg" />

Becomes:

<img class="fancybox" src="my-image.jpg" title="Image Caption Text" />

PHP

Wednesday, 4 May 2016

zoom effect image code

Step 1 – Add The Following Customized Code to Your Page:

Step 2 – Enable Lightbox for Specific Images

PHP Cron Job

Blog Archive

About Me