Σε αυτό το im tutorial θα εξηγήσω πώς μπορείτε να προσθέσετε το κομψό γκαλερί φωτογραφιών jQuery με descr-
iption effect.It σημαίνει ότι μπορείτε να προσθέσετε Η περιγραφή εμπορικό κέντρο
, σύμφωνα με την εικόνα σας. Περιγραφή περιλαμβάνονται επίσης
animation.So μοιάζει περισσότερο attractive.Im χρησιμοποιώντας Jquery
και CSS3 για αυτό gallery.Follow φωτογραφία αυτά βήμα για να
προσθέσετε στο blog σας.
1. Συνδεθείτε στο λογαριασμό blogger και κάντε κλικ στο drop down.
4. Επικόλληση κάτω από ένα από τα παρακάτω κωδικό.
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
//Speed of the slideshow
var speed = 5000;
//You have to specify width and height in #slider CSS properties
//After that, the following script will set the width and height accordingly
$('#mask-gallery, #gallery li').width($('#slider').width());
$('#gallery').width($('#slider').width() * $('#gallery li').length);
$('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
//Assign a timer, so it will run periodically
var run = setInterval('newsscoller(0)', speed);
$('#gallery li:first, #excerpt li:first').addClass('selected');
//Pause the slidershow with clearInterval
$('#btn-pause').click(function () {
clearInterval(run);
return false;
});
//Continue the slideshow with setInterval
$('#btn-play').click(function () {
run = setInterval('newsscoller(0)', speed);
return false;
});
//Next Slide by calling the function
$('#btn-next').click(function () {
newsscoller(0);
return false;
});
//Previous slide by passing prev=1
$('#btn-prev').click(function () {
newsscoller(1);
return false;
});
//Mouse over, pause it, on mouse out, resume the slider show
$('#slider').hover(
function() {
clearInterval(run);
},
function() {
run = setInterval('newsscoller(0)', speed); });});
function newsscoller(prev) {
//Get the current selected item (with selected class), if none was found, get the first item
var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');
//if prev is set to 1 (previous item)
if (prev) {
//Get previous sibling
var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
//if prev is set to 0 (next item)
} else {
//Get next sibling
var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
}
//clear the selected class
$('#excerpt li, #gallery li').removeClass('selected');
//reassign the selected class to current items
next_image.addClass('selected');
next_excerpt.addClass('selected');
//Scroll the items
$('#mask-gallery').scrollTo(next_image, 800);
$('#mask-excerpt').scrollTo(next_excerpt, 800); }
</script>
<style>
#slider {
/* You MUST specify the width and height */
width:660px;
height:275px;
position:relative;
overflow:hidden;
-moz-box-shadow: 0px 0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
overflow:hidden;
}
#gallery {
list-style:none;
margin:0;
padding:0;
z-index:0;
width:900px;
overflow:hidden;
}
#gallery li {
float:left;
}
#mask-excerpt {
position:absolute;
top:0;
left:0;
z-index:500;
width:100px;
overflow:hidden;
}
#excerpt {
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
list-style:none;
margin:0;
padding:0;
z-index:10;
position:absolute;
top:0;
left:0;
width:100px;
background-color:#000;
overflow:hidden;
font-family:arial;
font-size:14px;
color:#fff;
}
#excerpt li {
padding:5px;
}
.clear {
clear:both;
}
#btn-prev {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 9px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
#btn-prev:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
#btn-prev:active {
border-top-color: #238acf;
background: #238acf;
}
#btn-next {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 4px 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 9px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
#btn-next:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
#btn-next:active {
border-top-color: #238acf;
background: #238acf;
}
</style>
<div id="debug"></div>
<div id="slider">
<div id="mask-gallery">
<ul id="gallery">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXRt54pMjuYv6nFlP5CIQ0XmQMOEFFdrr_aSmhFIc8tRGx7igVIjEpkUElRr_CdJcpASwEPm7EojK4QNqjG7ocCkC6PUTE7o7DFnn-TKZ50gHVn4cBqcgSnz15nh8DXUNkyADhCDcGNE/s1600/btrix_image2" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0rc6Ve_l56erEo9TqHFXRQvShVBEbUDczj-3Ce-KmO-cpyCLYIEZrgZCiOSuUbpo1ODRVbyIt0ZyC702aM-KxBtkPMCTUbYhohanVXsn8na6lp4LNx8n_ez33xOICyU-cG_tFOqp4nc/s1600/btrix_image1.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoZVygJG-eIEzCfi4KDle4uT3UG2FiYfLuS6sxvoFP8uZ5ufMDHXNEOOw7sOOf1a4sXBsprzp04cFm9EP6DL8BfSH-IMnbBTwGNqtiBXy5e3TyHy_8Tb4zutLRGN5ZZ9KDoSCH9-mTbM/s1600/btrix_image3.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqOunD3rH8N0RiR66YE17AjNnYpmwi9eBWfsaz69VpzUgqIqaUla2tlyNt5lS7Pb4uAFG0aWljWNG0evdFhRr6KgxIOLeZgOLWefSa1r4IiSYCHDIWzWyn2fW5JLOVe0l-LmJvo2J01c0/s1600/btrix_image5.jpg" width="660" height="275" alt=""/></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj2b8FboZIY1mHNMOsXhkOBI8tDExGFCpjvVpzzCfnnq489SDlTwFyb6VDKxCXmURRxU3NB6-HpZ2pyt3PoW0X1eQFYohhakespokG5P8o1D05najc34uDpT0xBPBYtQXcl2BmH4SLHcM/s1600/btrix_image4.jpg" width="660" height="275" alt=""/></li>
</ul>
</div>
<div id="mask-excerpt">
<ul id="excerpt">
<li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
<li>tristique senectus et netus et malesuada fames ac turpis egestas.</li>
<li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> </ul>
</div>
</div>
<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
<a href="#" id="btn-prev">prev</a>
<a href="#" id="btn-next">next</a>
</div>
<div class="clear"></div>
Μπορείτε να αλλάξετε τις φωτογραφίες από την αλλαγή διευθύνσεων URL εικόνας Μπορείτε να αλλάξετε discription εικόνα αλλάζοντας κόκκινο χρώμα κειμένου.
7. Τώρα αποθηκεύσετε το HTML / «Javascript.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου