How To Practice A Photograph Gallery On Blogger Using Jquery (Prettyphoto Plugin)
Create a photograph gallery slideshow on your spider web log using jQuery. This tin last used to showcase your amazing photographs every bit a slideshow. Separate titles, descriptions tin last given. Sharing buttons are also possible amongst this popup show.
This is non express to photos alone. We tin showcase our videos, photos, codes, iframe(loading other websites within your website) in addition to many others. We tin intermix videos, photos in addition to others in addition to come across them inwards a unmarried window every bit a slideshow.
View the demo below. This is a ii epitome slideshow. Click whatsoever i of the below button. H5N1 popup box volition appear. There are navigation buttons inwards popup box for the usage of slideshow.
pic1 in addition to pic2
More demos are at that topographic point on this page.
First plough off the Blogger default Lightbox outcome past times going Settings > Posts in addition to comments, nether posts at that topographic point is that pick to plough it off.
How to implement this plugin on Blogger
This plugin tin last implemented inwards whatsoever websites including blogger. To implement on blogger follow the below procedure. First become to Template in addition to and thus Edit HTML.Find
</b:skin> in addition to click on the arrow to expand the code. Add the next code merely afterwards the higher upwardly code.(#)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <link charset='utf-8' href='http://bloggerhow.googlecode.com/hg/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/> <script charset='utf-8' src='http://bloggerhow.googlecode.com/hg/jquery.prettyPhoto.js' type='text/javascript'/> If yous convey already the jQuery library inwards your Template, skip the blood-red colored code.Before going to adjacent step, nosotros postulate to cheque whether
$(document).ready(function(){ is introduce inwards your template or not. If it is at that topographic point add together next code merely afterwards the higher upwardly code.(#)
$("a[rel^='prettyPhoto']").prettyPhoto(); If the $(document).ready(function(){ is non introduce inwards your template, in addition to thus notice <body add together the next code merely below.(#)
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script>Now salve the template. You are create to usage this plugin.
How to usage this plugin
From immediately on yous tin usage this plugin. This tin last used amongst whatsoever link. Only status is yous should add together arel='prettyPhoto' tag amongst link. I am giving yous roughly examples on how to usage this plugin inwards your posts.Using amongst an inline link
Demo for this type is available inwards my blog. You tin come across many (#) links. These are pictorial illustration of tutorial. Below is an example. This method has an disadvantage. Title for each epitome is non possible inwards this method. But nosotros tin laissez passer private descriptions.<a href="IMAGE ADDRESS HERE" rel='prettyPhoto' title='ADD DESCRIPTIONS OF THE PICTURE HERE'>LINK TEXT</a> Using for epitome gallery amongst championship in addition to descriptions
For this nosotros postulate thumbnail of each picture. If yous are using Picasa for uploading pictures, this is really easy. See the below painting exhibit for illustration. From there, yous volition teach both thumbnail links(lowest size) in addition to total resolution(highest size) epitome links. |
| Get the link from picasa |
Don't usage the total resolution painting exhibit link for creating link. If yous convey many pictures inwards your post, the loading volition increase.
Use the next format to implement a photograph gallery inwards your blog.<a href="fullscreen_image_1.jpg" rel="prettyPhoto[1]" title="how to create a photograph gallery on blogger using jQuery (prettyPhoto plugin)"><img src="thumbnail_image_1.jpg" width="width of thubmnail" height="some height" alt=" Create a photograph gallery slideshow on your spider web log using jQuery how to create a photograph gallery on blogger using jQuery (prettyPhoto plugin)" /></a> <a href="fullscreen_image_2.jpg" rel="prettyPhoto[1]" title="how to create a photograph gallery on blogger using jQuery (prettyPhoto plugin)"><img src="thumbnail_image_2.jpg" width="width of thubmnail" height="60" alt=" Create a photograph gallery slideshow on your spider web log using jQuery how to create a photograph gallery on blogger using jQuery (prettyPhoto plugin)" /></a> <a href="fullscreen_image_3.jpg" rel="prettyPhoto[1]" title="how to create a photograph gallery on blogger using jQuery (prettyPhoto plugin)"><img src="thumbnail_image_3.jpg" width="width of thubmnail" height="60" alt=" Create a photograph gallery slideshow on your spider web log using jQuery how to create a photograph gallery on blogger using jQuery (prettyPhoto plugin)" /></a>Replace the blood-red colored text amongst thumbnail links in addition to light-green colored amongst total resolution links.
rel='prettyPhoto[1]' should last same for all the pictures inwards a gallery. If yous desire roughly other gallery inwards the same post, alter the prettyPhoto[1] to prettyPhoto[2] or roughly other name.Additional configurations
In default, sharing buttons volition last at that topographic point amongst popup box. You tin disable it past times adding below light-green colored code within the bracket every bit below.<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false}); }); </script>There are many customizations are available. See this page for a total list. If yous convey whatsoever incertitude inwards customization, allow me know.
How to teach inwards piece of job on Older postal service images
If yous convey large publish of posts, yous cannot edit your sometime posts to add together rel tag for each in addition to every images. Instead usage this uncomplicated jquery business office inwards your template. It volition add together the rel tag to all epitome links.. Find$(document).ready(function(){ inwards your Template in addition to add together below code merely afterwards it. $('a > img').parent().attr('rel', 'prettyPhoto'); Check it. All done. If yous are lazy plenty to add together rel tag inwards your posts, this script create that too. That way for futurity in addition to past. Enjoy..
0 Response to "How To Practice A Photograph Gallery On Blogger Using Jquery (Prettyphoto Plugin)"
Post a Comment