Tuesday, July 2, 2013

Easy Ways to Make Slide Image Gallery

Blog tips this time is the Easy Way to Make Slide Image Gallery. This slide has a loading relatively fast, funny, and Image Gallery is very controlled or slideshow to have a pause option button.
This slide using JQuery, JavaScript and CSS and HTML and dynamic thanks to encouragement by one blogger was able to make compatible blogger widget that will display the posting features, photos, pictures etc in a beautiful way. See the example below:


How to make it very easy, you just install it via the Edit HTML, and add the element of HTML / Java Script in blogger sidebar. Please listen and practice these tips:.
<style type="text/css">
#simplegalleryOW {
    //CSS for sample Gallery
position: relative;
    visibility: hidden;
    border: 5px solid black;
    margin: auto;
}

#simplegalleryOW .gallerydesctext {
    //CSS for description DIV of Example 1 (if defined)
text-align: left;
    padding: 2px 5px;
    font-family: calibri;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/image-gallery.js">
</script>

<script type="text/javascript">
var mygalleryOW=new simpleGallery({
 wrapperid: "simplegalleryOW", //ID of main gallery container,
 dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [
 
       ["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],        ["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],        ["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"],        ["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],        ["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"]
 ],
 autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
 persist: true,
 fadeduration: 1000, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 },
 onslide:function(curslide, i){ //event that fires after each slide is shown
  //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
  //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
 }
})
</script>
<div id="simplegalleryOW"></div>​  
  1. First of all resize your images to a fixed dimension = To change the dimensions of the slide you just need to change the code 300, 200, where 300 is the width and 200 is high.
  2. CHANGE IMAGE LINK HERE with the image url itself pal
  3. Replace # with the link or url buddy who wants to add to a particular image.
  4. CHANGE IMAGE DESCRIPTION HERE with a description of the photo. This picture image will appear at the top when the user hovers the mouse cursor over it. If you do not want to add any description then simply remove IMAGE DESCRIPTION HERE.
  5. If you want to change the image of the auto play then simply change true to false.
  6. To change the time interval between the previous and the next slide please edit 2500.
  7. To change the font of the description please change the font Calibri with its own name, to see the various font letters please klick HERE.
That's all the time Blog Tips How To Make Easy Slide Image Gallery. Hopefully useful for bloggers who need. regards

Blogger

Author: Sendi Karlita Location: Pangkalpinang, Bangka Belitung

Article Easy Ways to Make Slide Image Gallery, Published by Sendi Karlita on the day Tuesday, July 2, 2013. Hopefully this article can add your insights. Sendi Karlita a is a writer who wants to be successful in the virtual world. Try, and keep trying. May God give consent. regards

0 comments:

Post a Comment

Enter your email address:

Delivered by FeedBurner

 

© 2013 BLOG AMAZONE ZONA - Designed by Mukund | ToS | Privacy Policy | Sitemap

About Us | Contact Us | Write For Us