Saturday, July 16, 2011

Image Slide Show with Typing text effect, Jquery Tutorial for imagegallery, Typing text effect in Jquery, jQuery Image Galleries & Sliders

Last time I share some of Image gallery and slideshows for Image rotators having auto run and clicked event using Jquery.

also share another jquery slideshow and image gallery onhover effect having left scroller and right scroll depending on your mouse cursor position.


Today I am going to share one more simple image gallery with name of image and its description.  Using nice effect of typing to showing image name and its description.

Its easy to implement in your blog or site.

Here I am providing the Jquery tutorial for implementing the image gallery.

HTML Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>
 PROMPT:: we envision. we deliver
</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/animation1.css" rel="stylesheet" type="text/css" />
<script src="http://web15346.38.ocpwebserver.com/meltbook/CSS/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="css/scripts.js" type="text/javascript"></script>    
</head>
<body>
<div class="mid_ani">
<div id="header">
            <div class="wrap">
                <div id="slide-holder">
                    <div id="slide-runner">
                        <a href="">
                            <img id="slide-img-2" src="images/1.jpg" class="slide" alt="Prompt" /></a> <a href="">
                                <img id="slide-img-3" src="images/4.jpg" class="slide" alt="Prompt Solution" /></a> <a href="">
                                    <img id="slide-img-4" src="images/3.jpg" class="slide" alt="Prompt Solution Inc" /></a>
<a href="">
                            <img id="slide-img-5" src="images/0.jpg" class="slide" alt="Prompt Slide" /></a>
                        <div id="slide-controls">
                            <p id="slide-client" class="text">
                                <strong>post: </strong><span></span>
                            </p>
                            <p id="slide-desc" class="text">
                            </p>
<p id="slide-nav">
                            </p>
                        </div>
                    </div>
                    <!--content featured gallery here -->
                </div>

                <script type="text/javascript">
                    if (!window.slider) var slider = {}; slider.data = [
                                    { "id": "slide-img-2", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-3", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-4", "client": "nature beauty", "desc": "add your description here" },
                                    { "id": "slide-img-5", "client": "nature beauty", "desc": "add your description here"}];
                </script>

</div>
        </div>
        <!--/header-->
    </div>
</body>
</html>


scripts Code
window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
  +'\nError description: \t'+desc
  +'\nPage address:      \t'+page
  +'\nLine number:       \t'+line
 );*/
}

$(function(){
 $('a').focus(function(){this.blur();});
 SI.Files.stylizeAll();
 slider.init();

 $('input.text-default').each(function(){
  $(this).attr('default',$(this).val());
 }).focus(function(){
  if($(this).val()==$(this).attr('default'))
   $(this).val('');
 }).blur(function(){
  if($(this).val()=='')
   $(this).val($(this).attr('default'));
 });

 $('input.text,textarea.text').focus(function(){
  $(this).addClass('textfocus');
 }).blur(function(){
  $(this).removeClass('textfocus');
 });

 var popopenobj=0,popopenaobj=null;
 $('a.popup').click(function(){
  var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
  var pobj=$('#'+pid);
  if(!pobj.length)
   return false;
  if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
   popopenobj.hide(50);
   $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
   popopenobj=null;
  }
  return false;
 });
 $('p.images img').click(function(){
  var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
  $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
 
  $(this).parent().find('img').removeClass('on');
  $(this).addClass('on');
  return false;
 });
 $(window).load(function(){
  //$.each(css_ims,function(){(new Image()).src=_siteRoot+'../images/'+this;});
  $.each(css_cims,function(){
   var css_im=this;
   $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
    (new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
   });
  });
 }); 
 $('div.sc-large div.img:has(div.tml)').each(function(){
  $('div.tml',this).hide();
  $(this).append('<a href="#" class="tml_open">&nbsp;</a>').find('a').css({
   left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
  }).click(function(){
   $(this).siblings('div.tml').slideToggle();
   return false;
  }).focus(function(){this.blur();}); 
 });
});
var slider={
 num:-1,
 cur:0,
 cr:[],
 al:null,
 at:10*1000,
 ar:true,
 init:function(){
  if(!slider.data || !slider.data.length)
   return false;

  var d=slider.data;
  slider.num=d.length;
  var pos=Math.floor(Math.random()*1);//slider.num);
  for(var i=0;i<slider.num;i++){
   $('#'+d[i].id).css({left:((i-pos)*1000)});
   $('#slide-nav').append('<a class="num" id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
  }

  $('img,div#slide-controls',$('div#slide-holder')).fadeIn();
  slider.text(d[pos]);
  slider.on(pos);
  slider.cur=pos;
  window.setTimeout('slider.auto();',slider.at);
 },
 auto:function(){
  if(!slider.ar)
   return false;

  var next=slider.cur+1;
  if(next>=slider.num) next=0;
  slider.slide(next);
 },
 slide:function(pos){
  if(pos<0 || pos>=slider.num || pos==slider.cur)
   return;

  window.clearTimeout(slider.al);
  slider.al=window.setTimeout('slider.auto();',slider.at);

  var d=slider.data;
  for(var i=0;i<slider.num;i++)
   $('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
  
  slider.on(pos);
  slider.text(d[pos]);
  slider.cur=pos;
 },
 on:function(pos){
  $('#slide-nav a').removeClass('on');
  $('#slide-nav a#slide-link-'+pos).addClass('on');
 },
 text:function(di){
  slider.cr['a']=di.client;
  slider.cr['b']=di.desc;
  slider.ticker('#slide-client span',di.client,0,'a');
  slider.ticker('#slide-desc',di.desc,0,'b');
 },
 ticker:function(el,text,pos,unique){
  if(slider.cr[unique]!=text)
   return false;

  ctext=text.substring(0,pos)+(pos%2?'-':'_');
  $(el).html(ctext);

  if(pos==text.length)
   $(el).html(text);
  else
   window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
 }
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
 htmlClass:'SI-FILES-STYLIZED',
 fileClass:'file',
 wrapClass:'cabinet',
 
 fini:false,
 able:false,
 init:function(){
  this.fini=true;
 },
 stylize:function(elem){
  if(!this.fini){this.init();};
  if(!this.able){return;};
  
  elem.parentNode.file=elem;
  elem.parentNode.onmousemove=function(e){
   if(typeof e=='undefined') e=window.event;
   if(typeof e.pageY=='undefined' &&  typeof e.clientX=='number' && document.documentElement){
    e.pageX=e.clientX+document.documentElement.scrollLeft;
    e.pageY=e.clientY+document.documentElement.scrollTop;
   };
   var ox=oy=0;
   var elem=this;
   if(elem.offsetParent){
    ox=elem.offsetLeft;
    oy=elem.offsetTop;
    while(elem=elem.offsetParent){
     ox+=elem.offsetLeft;
     oy+=elem.offsetTop;
    };
   };
  };
 },
 stylizeAll:function(){
  if(!this.fini){this.init();};
  if(!this.able){return;};
 }
};


Animation1 CSS Code
a img {
border : 0;
}

div.wrap a,div.wrap a:hover
{
    color:#fff;
}
div.wrap {
width : 980px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 980px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 683px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 235px;
background : url(../images/ani.png) no-repeat left top ;
}
div#header div#slide-holder {
z-index : 40;
width : 980px;
height : 236px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
top : 1px;
left : 1px;
width : 975px;
height : 224px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 0px;
width : 973px;
height : 30px;
display : none;
position : absolute;
background : url(../images/images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display:none;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 5px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 17px;
display : inline;
margin : 2px 5px 0 0;
font-size : 0px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
color:#fff;
line-height:22px;
margin : 0 5px 0 0;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(../images/images/silde-nav1.png);
}
div#nav ul li a {
background : url(../images/images/nav.png) no-repeat;
}

No comments: