Thumbnail Decentrato

[kikshopitaly]

Salve a tutti, non sono per niente esperto di programmazione, gestisco un negozietto di eBay che vorrei potenziare grazie alle mie conoscenze di grafica senza spendere migliaia di euro e vengo al dunque, sono alle prese con un template di eBay, che contiene una galleria di immagini, di quelle che passando sopra l'anteprima col mouse si vede l'immagine intera, il problema, fondamentale, è che i thumbnail fanno pena, riprendono una piccola porzione d'immagine laterale, e mi ritrovo anteprime orribili.

A me piacerebbe avere la classica galleria con l'immagine rimpicciolita, vi si passa sopra e spunta l'immagine grande. Sono sicuro che nel codice che sotto trovate si può agire su quest'aspetto, ma io dal basso della mia ignoranza, non ci sono riuscito, chiedo umilmente supporto

Trovate tutto il codice QUI, in basso "external hosted code", basta fare un ctrl F e cercare thumb per arrivare, suppongo, alla sezione di codice incriminata.

Vi ringrazio di cuore dell'aiuto

[Camarillo]

Ciao kikshopitaly.

Non so se ho capito cosa intendi, ma prova a fare così: sostituisci ul#SuperThumbs a img con questo codice:

ul#SuperThumbs a img {
  float: left;
  width: 100%
}

In questo modo l'immagine si adatta alla thumbnail e dovresti vederla tutta, poi aggiungi questo:

ul#SuperThumbs a:hover img {
  position: absolute;
  top: -20px;
  left: -50px;
  width: auto;
}

In questo modo la vedi grande quando ci passi sopra con il mouse. Non so se è quello che intendevi, ma da me funziona .

[kikshopitaly]

Sei un grandissimo, funziona perfettamente, ti contatto in privato per sdebitarmi

[kikshopitaly]

Devo gelare un pò d'entusiasmo

Per le immagini quadrate, tutto ok, mentre quelle rettangolari danno ancora problemi, nel senso che non viene riempito il quadratino ma ne occupano solo una porzione.

Capisco siano quisquilie, però tutte le gallerie che vedo non hanno sti problemi!

[Camarillo]

Eheh... lo sapevo!

In CSS puoi adattare un'immagine al suo container in tre maniere: adattando la larghezza e mantenendo le proporzioni (se un rettangolo ha la larghezza da 2 e l'altezza da 4, raddoppiando la larghezza a 4 l'altezza diventerà 8), adattando l'altezza e mantenendo le proporzioni (idem come sopra), adattando larghezza e altezza non mantenendo le proporzioni, ovvedro adattando l'immagine (rettangolare) al suo container (quadrato). La soluzione è semplice:

ul#SuperThumbs a img {
  float: left;
  width: 100%;
  height: 100%; //aggiungi questo
}

ul#SuperThumbs a:hover img {
  position: absolute;
  top: -20px;
  left: -50px;
  width: auto;
  height: auto; //aggiungi questo
}

Esteticamente però non è il massimo, perché vedrai l'immagine "stiracchiata". Purtroppo non c'è un metodo in CSS per dire "adatta l'immagine prendendo in considerazione solo il lato più corto", cosa che risolverebbe il problema. Questo si può fare in javascript ma non ho la competenza per spiegartelo.

Insomma, due soluzioni: o adatti le immagini con li codice qui sopra, oppure tieni il codice che ti ho dato prima e fai tutte le immagini quadrate (opterei per la seconda).

[kikshopitaly]

Beh più chiaro di così si muore, va bene, mi sa che anch'io opto per la seconda

Grazie ancora di tutto