epsco: Simplex Design blog : Create a gallery inside your post using Justified Gallery

عنواين الرئيسيه

كشف حقيقة التربح غير المشروع لجمعيات الاسكان التعاونى وتوظيف الاموال ؟ جمع الاموال لمشروع بناء وهمى على ارض محل نزاع قضائى على الملكيه ؟-رسالة من أحد ضحايا كشف الفساد المالى والإدارى -فراد أسرة النائب العام متوغلون في إدارة شركات مكتظة بالفساد المالي -المهندس شريف سوسة رئيسا لشركة بدر الدين للبترول. -إهدار4 ملايين جنيه بشركة بدر الدين للبترول -فساد بـ4 ملايين جنيه بشركات البترول بمطروح-مذكره التي اثارت غضب بعض الافراد من شركه بدر الدين...

السبت، 16 أغسطس 2014

Simplex Design blog : Create a gallery inside your post using Justified Gallery

Link to SimplexDesign - free blogger template

Create a gallery inside your post using Justified Gallery

Posted: 15 Aug 2014 08:34 AM PDT

Are you photographer or photo blogger whose blog specific in pictures ? Do you often have blog posts with many pictures inside and it's look messy ?
I have a personal blog which sharing thoughts and experiences. There are many pictures inside each post and it's very hard to read. After that, I found a Jquery plugin name Justified Gallery and it helped me a lot. All the pictures in a post are now organized in a small "gallery" block.

You can take a look here

How to do this ?

1. Download 4 files :justifiedGallery.css, jquery.justifiedGallery.js, colorbox.js,colorbox.css then upload to your own hosting. One of the best option is to use Google Drive as a hosting.
2. Open a posts which you want to insert gallery and then switch to edit HTML mode
3. Paste these lines at the begining of post

<link href='your own hosting/justifiedGallery.css' media='all' rel='stylesheet' type='text/css'/>
<script src='your own hosting/jquery.justifiedGallery.min.js' type='text/javascript'></script>
<link href='your own hosting/colorbox.css' media='screen' rel='stylesheet' target='_blank'/>
<script language='javascript' src='your own hosting/colorbox.js'></script>

4. Continue writing the post, in the place where you want to insert a gallery, upload pictures to Blogger, and then add them all to the post content.
5. Edit the code of pictures which inserted to make them look like that


<div class="colorboxEx">
<a title="Title 1" href="https://www.blogger.com/path/to/myimage1_original.jpg">
    <img alt="Title 1" src="path/to/myimage1_t.jpg" />
  </a>
  <a title="Title 2" href="https://www.blogger.com/path/to/myimage2_original.jpg">
    <img alt="Title 2" src="path/to/myimage2_t.jpg" />
  </a>
  <!-- other images... -->
</div>

6. Finish the post and add this code at the end of your post


<script>
  jQuery(document).ready(function () {
   jQuery(".colorboxEx").each(function (i, el) {
    jQuery(el).justifiedGallery({rel: 'gal' + i}).on('jg.complete', function () {
     jQuery(this).find('a').colorbox({
      maxWidth : '80%',
      maxHeight : '80%',
      opacity : 0.8,
      transition : 'elastic',
      current : ''
     });
    });
   });
  });
 </script>

Save the post and see the result. You can see your post look very clean and clear.