Translate

من يرغب في ارسال

من يرغب في ارسال اي مقال يمكنه المراسله علي الاميل goreg12@gmail.com

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

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

Follow by Email

www.alarabiya.net

/www.islammemo.cc

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

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

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
test1test2test3test4

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.