Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




1 Απλό CSS + HTML Slideshow / gallery

Νέοι bloggers γεια σας !!! Σήμερα σας παρουσιάζω ένα απλό image gallery...μπορείτε να δείτε το DEMO και να δοκιμάσετε να φτιάξετε ένα παρόμοιο, παρουσιάζοντας τις δικές σας εικόνες...


Ο ΚΩΔΙΚΑΣ CSS: (ΠΑΝΩ από το </head>)

<style type="text/css">

<!--/* The slideshow CSS. Customize to meet your taste. */.slideshow {
font-family:Arial, Helvetica, sans-serif;
width:336px;
height:375px;
overflow:hidden;
background-color:#000000;
color:#FFFFFF;
border:5px solid #99CC00;
}
.slideshow > ul {
margin: 0;
padding: 0;
}
.slideshow > ul > li {
display:inline;
margin:0px;
padding:0px;
font-size:1px;
margin-right: -1px;
}
.slideshow > ul > li > div {
  display: none;
  text-decoration: none;
  float:left;
}
.slideshow > ul > li > div > p {
  font-size:11px;
  text-align:center;
  padding:10px 0px 0px 0px;
  margin:0px;
  color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
border:2px solid #FFFFFF;
width:332px;
}
.slideshow  > ul > li > img {
border:2px solid #FFFFFF;
margin:0px;
padding:0px;
width:80px;
height:60px;
}

/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
border-color:#FF6600;
}-->
</style>


O ΚΩΔΙΚΑΣ  HTML: (σαν Gadget / JavaScript)


<div class="slideshow">
    <ul>
        <li>
            <img src="ΕΙΚΟΝΑ 1" />
                        <div>
      <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 1" alt="ΤΙΤΛΟΣ" />  </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
        <li>  <img src="ΕΙΚΟΝΑ 2" />
            <div>
                <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 2" alt="ΤΙΤΛΟΣ" />
                </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
        <li>
            <img src="ΕΙΚΟΝΑ 3" />
            <div>
                <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 3" alt="ΤΙΤΛΟΣ" />
                </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
        <li>
            <img src="ΕΙΚΟΝΑ 4" />
            <div>
                <a href="ΛΙΝΚ" title="Click to see full image" target="_blank">
                    <img src="ΕΙΚΟΝΑ 4" alt="ΤΙΤΛΟΣ" />
                </a>
                <p>ΚΕΙΜΕΝΟ</p>
            </div>
        </li>
    </ul>
</div>

***Οι άπειροι, μπορούν να ενώσουν και τους 2 κώδικες και να το δουν πως φαίνεται στο  DEMO BLOG μου
***Φυσικά και μπορείτε να ενώσετε και τους 2 κώδικες και να το βάλετε στο blog σας σαν gadget !
***Αντικαταστήστε τις λέξεις ΛΙΝΚ, ΚΕΙΜΕΝΟ, ΤΙΤΛΟΣ, ΛΙΝΚ με τα ανάλογα δικά σας...
***Oσοι γνωρίζουν πως, μπορούν να πειράξουν μεγέθη, χρώματα κλπ στον πρώτο κώδικα...όσοι δεν γνωρίζουν, ας το αφήσουν όπως είναι, η να ρωτήσουν απορίες στα σχόλια, η με email ...
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
(Πηγή θα βρείτε όταν δείτε και το demo)
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

1 σχόλια:

Γιάννης Βασιλειου είπε...

Παντελή συγχαρητήρια, δεν ξέρεις ποσό καλό μου έκανες με αυτή την ανάρτηση με το που έβαλα αυτό στο blog μου όλα τα βλέμματα των αναγνωστών εκεί πήγαν!!! Ευχαριστώ !