Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Τετάρτη, Νοεμβρίου 25

0

imgBox – Για να παρουσιάσετε τις εικόνες σας με στυλ !!!

Δημιουργείστε, παρουσιάστε και δημοσιεύστε τη δουλειά σας με στυλ.
Μαγνητίστε τα βλέμματα στις εικόνες σας με το imgBox ! …

Παρακάτω θα δείτε 4 διαφορετικούς   τρόπους για να παρουσιάσετε τις φωτογραφίες σας με στυλ… επαγγελματικό!

Ας δούμε πρώτα τι είναι το imgBox


  • imgBox  είναι ένα jQuery Plugin
     
  • Με κομψή και φιλική σχεδίαση – σε στυλ Mac

     
  • Υποστηρίζονται όλα τα μεγάλα browsers ,συμπεριλαμβανομένου και τον IE6 +

  • Πολύ εύκολη εγκατάσταση

Πως να το χρησιμοποιήσουμε :


  Πρώτα απ’ όλα κατεβάστε το zip αρχειο εδω και αποσυμπιέστε το  και ανοίξτε το αρχείο “ imgbox “  , όπως  βλέπετε στην εικόνα παρακάτω :



  Στο αρχείο “ imgbox “ θα βρείτε  κάποια εικονίδια , 2 αρχεία JavaScript και 1 CSS αρχείο .

  Ανεβάζετε τα εικονίδια και τα 2 JavaScript  αρχεία , στο δικό σας free file hosting and sharing site ( αν δεν ξέρετε κάποιο site , τότε ρίξτε μια ματιά εδώ ) .



Τώρα ανοίγουμε το  imgbox CSS και ψάχνετε μέσα στο  CSS να βρείτε κάτι σαν τις παρακάτω γραμμές :
' imgbox-spinner.gif '  ,  ' imgbox-close.png '  ,  imgbox-bg-n.png  ,  imgbox-bg-ne.png ……
Και τις αλλάζετε με τα URL  των αντιστοίχων αρχείων σας  και αποθηκεύετε  .
Τώρα ανεβάζετε και το imgbox CSS  στο δικό σας free file hosting and sharing site  και πάμε στο τελικό στάδιο .

Πώς να το εγκαταστήσετε :


  Κατ' αρχάς, σιγουρευτείτε ότι υπάρχει μια δήλωση XHTML DOCTYPE  στην κορυφή της σελίδας σας .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


  Κάνουμε login στο blogger λογαριασμό μας  , επιλέγουμε  Διάταξη “ >> “ Επεξεργασία HTML “ >> “ Επέκταση προτύπων γραφικών στοιχείων “  . [ Πριν κάνουμε οποιαδήποτε ενέργεια , πάντα κάνουμε  Λήψη πλήρους προτύπου ]  και ψάχνουμε να βρούμε το  </head> , κολλάμε  ακριβώς πριν από αυτό , τον  παρακάτω κώδικα :



<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
<link rel="stylesheet" href="imgbox/imgbox.css" />
<style type="text/css">
#images a {
margin-right: 14px;
}
#images a img {
border: 1px solid #888;
padding: 3px;
vertical-align: top;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
$("#image";).imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});
});
</script>



Αλλάζετε το imgbox/imgbox.css με το url του αντίστοιχου αρχείου σας .   Σε περίπτωση που θέλετε να προσθέσετε και αλλά στυλ σας δίνω κάτω 4 διαθέσιμα στυλ , τα οποία μπορείτε να τα χρησιμοποιήσετε και τα 4 μαζί αν θέλετε .

Διαθέσιμες επιλογές :

Έχετε 4 διαφορετικούς τρόπους να τροποποιήσετε τις τοποθετήσεις:

1ος Τρόπος
$("#image").imgbox();


Δείτε το DEMO εδώ



2ος Τρόπος

$("#image").imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});


Δείτε το DEMO εδώ



3ος Τρόπος

$("#image").imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});

Δείτε το DEMO εδώ



4ος Τρόπος

$("#image").imgbox({
'speedIn' : 0,
'speedOut' : 0
});

Δείτε το DEMO εδώ

Τρόπος να χρησιμοποιήσετε κε τα 4 στυλ μαζί :



<script type="text/javascript">
$(document).ready(function() {
$("#image1").imgbox();
$("#image2").imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});
$("#image3").imgbox({
'speedIn' : 0,
'speedOut' : 0
});
$("#image4").imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});
});
</script>

Η Ενεργοποίηση  :

  Δημιουργήστε τα στοιχεία συνδέσεων. Μπορείτε να θέσετε τον τίτλο χρησιμοποιώντας τις ιδιότητες τίτλου:

Κάθε φορά που  θα εισάγετε μια εικόνα στην ανάρτηση σας απλά ,χρησιμοποιήστε τον παρακάτω κώδικα :
 
<a id="image" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>

Αν χρησιμοποιείτε και τα 4 στυλ μαζί τότε ο κώδικας θα γίνει :


<div id="images">
<a id="image1" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>
<a id="image2" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>
<a id="image3" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>
<a id="image4" title="Lorem ipsum dolor sit amet" href="big_image.jpg"><img src="thumb.jpg" alt="" /></a>
</div>

Σημείωση : Μην ξεχνάτε να συσχετίζετε τα id των εικόνων σας με τους επιλογείς του jQuery .  Αν ο επιλογείς του jQuery είναι  image4  π.χ.  $("#image4").imgbox({  , τότε το id εικόνας πρέπει να είναι αντίστοιχο <a id="image4" title= …….


Ελπίζω να μην δυσκολευτείτε  και  να πάνε  όλα  καλά ! 
Πάντως για ότι χρειαστείτε , μην διστάσετε να επικοινωνήσετε μαζί μου .

Καλή τύχη !….

0:

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS