Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από korgr » 20 Σεπ 2011 20:19

Ένας συνήθης προβληματισμός που είχα πάντα, είναι το πως θα απεικονίσω ένα Thumbnail σε ένα ευρετήριο θεμάτων.
Οκ παρουσιάζουμε πχ αριστερά το thumb, και δεξιά τίτλο, μικρή περιγραφή κλπ για κάθε άρθρο στα αποτελέσματα. Αν όμως θες ένα ισορροπημένο σχεδιαστικα layout, έρχονται οι διαφορετικές διαστάσεις του κάθε thumbnail και γίνεται το όλο θέμα μια σχεδιαστική τσαπατσουλιά! Thumbnails τεράγωνα, πλάγια, όρθια ... μπλιαχ :P

Η καλύτερη σχεδιαστικά λύση στην οποία έχω καταλήξει τελευταία είναι να καθορίζεις έναν σταθερό χώρο -σε πλάτος και ύψος- για κάθε thumbnail, και εκεί μέσα να μασκάρεις μια μεγαλύτερη έκδοση της εικόνας, κάτι δηλαδή ανάμεσα σε διάσταση thumb και τελικής μεγέθυνσης.
Αποτέλεσμα να εμφανίζεις ως thumb τμήμα αυτής της μέτριας διάστασης εικόνας.
Σχεδιαστικά, κάθεται καλά και ανάλογα το θέμα μερικές φορές προκύπτει και ωραίο αποτέλεσμα που θυμίζει άποψη σχεδιαστική :wink:

Παραμένει όμως ένα πρόβλημα!
Κάποια θέματα δεν φαίνονται καλά γιατί κρύβουν ουσιαστική πληροφορία της εικόνας!

Έτσι, και αφού έψαξα και δεν βρήκα κάτι που να κάνει ακριβώς αυτό που ήθελα, αποφάσισα να δημιουργήσω το πρώτο μου jQuery plugin που θα μου έλυνε και αυτό το πρόβλημα!

Σκοπός μου, on mouse over να αποκαλύπτεται με transition και το υπόλοιπο κρυφό τμήμα του thumbnail. Βρήκα κάποια που απλά μεγάλωναν κάποιο μικρότερο thumb αλλά εγώ ήθελα να παίζω με μία μόνο δάσταση.

Έτσι κατέληξα στο jOThumb plugin (jQuery Odyssey plugin), το οποίο μπορείτε να δείτε εν δράσει στο http://www.korinthorama.gr/new/search_a ... hp?catID=1

Το plugin θα το βρείτε στο http://www.korinthorama.gr/new/js/jOplugins/jOthumb.js
Edit (21-9-11):
Τα νεότερα updates και τις αναλυτικές οδηγίες και παραδείγματα, μπορείτε πλέον να τα βρείτε στην επίσημη σελίδα του plugin
Αφού το συμπεριλάβουμε στη σελίδα μας το ενεργοποιούμε με

Κώδικας: Επιλογή όλων

$(document).ready(function() {
	$('div[rel="jOthumb"]').each(function(){
		$(this).jOthumb();
	});
});
Για κάθε thumbnail η markup έχει την ακόλουθη μορφή:

Κώδικας: Επιλογή όλων

<div rel="jOthumb" style="width&#58; 150px; height&#58; 150px; visibility&#58;hidden;">
<img rel="contents" src="medium_image.jpg" width="350" height="220">
</div>
Το rel="jOthumb" είναι η μασκαρισμένη περιοχή (πχ 150Χ150) και το rel="contents" είναι το περιεχόμενο (συνήθως εικόνα) που μασκάρουμε. Θα εμφανιστεί κεντραρισμένη πίσω από και σε σχέση με την μάσκα.
Φυσικά μπορούμε να έχουμε την εικόνα σαν link κλπ
Λίγη css που χρειάζεται είναι ενσωματωμένη στο plugin, ενώ θα πρέπει να μετατρέψετε αν θέλετε σε class το inline css του div.

Coding is always fun 8)

ΥΓ. Το κρίνετε με επιείκια οι ειδήμονες γιατί είναι το πρώτο μου και η jQuery δεν είναι το forte μου...
Τελευταία επεξεργασία από το μέλος korgr την 21 Σεπ 2011 13:11, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από cdhyper » 20 Σεπ 2011 20:56

Τύφλα να'χουν οι ξένες Π@π@*ιές. Συγχαρητήρια και μόνο συγχαρητήρια. Θα το χρησιμοποιήσω σίγουρα στο μέλλον.

Αυτό το πρόβλημα εκτός από jquery λύνεται ωραία με gd library: ορίζεις ανώτατο πλάτος και ανώτατο ύψος και η μεγαλύτερη διάσταση σε κάθε περίσταση μικραίνει αναλογικά της μικρότερης. Έτσι κρατάς ένα κάδρο πχ 200Χ200 και πάντα εκεί μέσα θα τοποθετείται η εικόνα και δεν θα υπάρχουν σκαμπανεβάσματα. Αλλά το jquery με την εφεδιά είναι εντυπωσιακό.

Από συμβατότητα τι λέει;
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από fafos » 20 Σεπ 2011 21:05

mia xara einai to jquery kontopatrioth... ekei pou diafono einai o tropos dhmiourgias parousiashs ton thumbnails... prothmo na ypoxreono ton diaxeiristh na kanei crop sthn eikona an thelei na exei idiou megethous thumbnails..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από cdhyper » 20 Σεπ 2011 21:14

Για αρχάριους admins μια χαρά είναι. Για απαιτητικούς φυσικά και πρέπει να έχουν παρέα έναν image editor για να έχουν πλήρη έλεγχο στο τι και πώς δημοσιεύεται.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από fafos » 20 Σεπ 2011 21:22

cdhyper έγραψε:Για αρχάριους admins μια χαρά είναι. Για απαιτητικούς φυσικά και πρέπει να έχουν παρέα έναν image editor για να έχουν πλήρη έλεγχο στο τι και πώς δημοσιεύεται.
den milao san admin alla san xrhsths... den mou aresei to eikastiko apotelesma kai to exo dei se "megala" ellhnika sites (edo gelame) opou prospathei na deixei mia polh thn nyxta kai vlepeis ena mauro thumbnail..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
cdhyper
Literature Moderator
Δημοσιεύσεις: 9707
Εγγραφή: 23 Ιουν 2001 03:00
Τοποθεσία: Φωτονερόπετρα
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από cdhyper » 20 Σεπ 2011 21:32

Ναι συμφωνώ. Το έχω δει και στη χρυσή ευκαιρία στα ακίνητα νομίζω ή στα νέα στα ακίνητα που λέει "μεζονέτα με θέα" και δείχνει μόνο έναν ουρανό με κάτι σύννεφα.

Εντάξει θέλει προσοχή. Οι εικόνες είναι μεγάλο θέμα γενικά και αν είναι τεμπέλης ο admin δεν βγάζεις άκρη ό,τι και να κάνεις.
Σύγκριση τιμών Supermarket: http://www.shopnsave.gr
Νέα Ιταλικα επιπλα κουζινας
Για φιλοσόφους: http://filosofia.gr και http://liantinis.org

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6235
Εγγραφή: 30 Νοέμ 2004 03:09

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από fafos » 20 Σεπ 2011 21:42

cdhyper έγραψε:Ναι συμφωνώ. Το έχω δει και στη χρυσή ευκαιρία στα ακίνητα νομίζω ή στα νέα στα ακίνητα που λέει "μεζονέτα με θέα" και δείχνει μόνο έναν ουρανό με κάτι σύννεφα.

Εντάξει θέλει προσοχή. Οι εικόνες είναι μεγάλο θέμα γενικά και αν είναι τεμπέλης ο admin δεν βγάζεις άκρη ό,τι και να κάνεις.
giauto kai ego otan douleua tous to eixa ypoxreotiko to crop kai akoma troo katares :lol:
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από korgr » 21 Σεπ 2011 13:21

Τα νεότερα updates και τις αναλυτικές οδηγίες και παραδείγματα, μπορείτε πλέον να τα βρείτε στην επίσημη σελίδα του plugin

Ο Δημήτρης (dimsis) είχε μια ωραία πρόταση για την προσθήκη δύο ακόμα παραμέτρων που καθορίζουν custom x, y συντεταγμένες για την θέση εμφάνισης του ορατού τμήματος της εικόνας.

Επίσης ήθελα να ρωτήσω αν υπάρχει κάποιος καλύτερος τρόπος για να περνάς ξεχωριστές παραμέτρους όταν εφαρμόζεις ένα plugin σε πολλά elements ταυτόχρονα (πχ by rel).
Εγώ κατέληξα στο να περνάω τις παραμέτρους ως attributes στο html tag
Αν θέλουμε να περάσουμε διαφορετικές παραμέτρους στο κάθε thumbnail (πχ διαφορετικά x, y) τότε ή ενδεικνυόμενη μέθοδος είναι να ορίσουμε στην html ως attributes τις παραμέτρους:

Κώδικας: Επιλογή όλων

<div rel="jOthumb" style="width&#58; 150px; height&#58; 150px; visibility&#58;hidden;" data-x="150" data-y="80" data-speed="250" data-outSpeed="300">
<img rel="contents" src="thumbnail.jpg" width="350" height="220">
</div>
και να διαβάσουμε τα attributes ως παραμέτρους κατά την δημιουργία κάθε thumbnail:

Κώδικας: Επιλογή όλων

$&#40;'div&#91;rel="jOthumb"&#93;'&#41;.each&#40;function&#40;&#41;&#123;
   var x = $&#40;this&#41;.attr&#40;"data-x"&#41;;
   var y = $&#40;this&#41;.attr&#40;"data-y"&#41;;
   var speed = $&#40;this&#41;.attr&#40;"data-speed"&#41;;
   var outSpeed = $&#40;this&#41;.attr&#40;"data-outSpeed"&#41;;
   $&#40;this&#41;.jOthumb&#40;&#123;"x"&#58; x, "y"&#58; y, "speed"&#58; speed, "outSpeed"&#58; outSpeed&#125;&#41;;
&#125;&#41;;;
@cdhyper
Thanks για το feedback
Για συμβατότητα δεν ελέγχω πλέον κάτω από IE8, τέλος στην τροχοπέδη των εξελίξεων
:)
Τελευταία επεξεργασία από το μέλος korgr την 21 Σεπ 2011 14:43, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από korgr » 21 Σεπ 2011 13:22

A! και ένα φρέσκο που σκάρωσα χθες τη νύχτα που είχα αϋπνίες :lol:

http://www.korinthorama.gr/new/odyssey/jOscroller.php

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από geoki » 21 Σεπ 2011 16:31

Notis μπράβο, πάρα πολύ καλό και χρήσιμο.

Με είχε απασχολήσει πάρα πολύ το ζήτημα όταν έστηνα το pella-net.gr και κατέληξα στη λύση του clip..αρίσματος με css.

Αυτό που έφτιαξες είναι τέλεια λύση, αλλά και πολύ όμορφη.

Δεν άντεξα ... το δοκίμασα και είναι super.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από korgr » 21 Σεπ 2011 18:14

geoki έγραψε:
Δεν άντεξα ... το δοκίμασα και είναι super.
Χαίρομαι :D
Thanks

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1952
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από vassilism » 21 Σεπ 2011 23:07

Νότη πολύ ωραίο το τελικό αποτέλεσμα και το εφέ επίσης :clap:

Δεν ξέρω αν απλά είσαι στο ψάξιμο και σε δοκιμές με τη jQuery αλλά τεχνικά θα προτιμούσα και εγώ το thumbnail να έχει γίνει crop και από εκεί και πέρα να παίξεις με τα εφέ.

Έχεις σκοπό να το χρησιμοποιήσεις σε κάποιο συγκεκριμένο project ή να το υιοθετήσεις σαν μια στάνταρ μέθοδο για τα thumbnails σου?

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από korgr » 22 Σεπ 2011 10:20

Βασίλη, ακούω προσεκτικά όλα τα σχόλια!
Όσα ακούγονται περί crop είναι πολύ σωστά μέχρι το βαθμό που ο admin (συνήθως ο πιο computero-ασχετίλας ιδιοκτήτης του κάθε site - πελάτης μας) μπορεί (ή έχει την διάθεση) να το κάνει.
Στην πράξη;
Ούτε το 10% εξ αυτών δεν το κάνουν!
Εδώ έρχεται η αυτοματοποίηση. Στο Odyssey κατά την εισαγωγή ενός node (άρθρου, προϊόντος κλπ), ο admin χρησιμοποιεί μόνο μία έκδοση εικόνας στην μεγαλύτερη διάσταση που θα χρειαστεί να χρησιμοποιηθεί.
Κατά το upload, αυτή η εικόνα γίνεται αυτόματα resize σύμφωνα με τα max όρια που έχουν καθοριστεί στις παραμέτρους του συστήματος και ταυτόχρονα δημιουργούνται και άλλες δύο εκδόσεις τις εικόνας με αναλογικό resize. Η μία είναι medium διάστασης (max 350px) και η άλλη ένα thumbnail συνήθως πλάτους 112px.

Όταν στο layout δεν με ενοχλεί να έχουν διαφορετικό ύψος τα thumbs τα χρησιμοποιώ ως έχουν. Διαφορετικά, εκμεταλευόμενος την medium διάσταση, θα χρησιμοποιώ αυτό με το effect. Πιθανά με την ίδια τεχνική, να επιλέγω ως effect όχι το expand αλλά το scroll του δεύτερου plugin

Κατόπιν όλων αυτών, είμαι αντίθετος στην θεωρία του ιδανικού cropαρίσματος, εκτός και αν μιλήσουμε για συγκεκριμένες εξαιρέσεις όπου ο admin είναι γάτα :)

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1952
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από vassilism » 22 Σεπ 2011 14:54

korgr έγραψε:Όσα ακούγονται περί crop είναι πολύ σωστά μέχρι το βαθμό που ο admin (συνήθως ο πιο computero-ασχετίλας ιδιοκτήτης του κάθε site - πελάτης μας) μπορεί (ή έχει την διάθεση) να το κάνει.
Αυτό δεν το κατάλαβα. Το crop δεν γίνεται αυτόματα κατά τη δημιουργία του thumbnail από το σύστημα?

Άβαταρ μέλους
manos2010grr
Δημοσιεύσεις: 159
Εγγραφή: 17 Ιαν 2007 18:13
Επικοινωνία:

Συνήθεις προβληματισμοί και ευρηματικές λύσεις

Δημοσίευση από manos2010grr » 23 Σεπ 2011 18:30

Η αλήθεια Νότη ούτε εγώ το έπιασα αφού γίνεται crop απο το upload, τι σχέση έχει ο ιδιοκτήτης; παρόλα αυτά το plugin είναι super!!!

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες