Προς το περιεχόμενο

image preview

_Marios_

Από τον _Marios_
στο Web Design - Development

Προτεινόμενες αναρτήσεις

_Marios_ Proficient

_Marios_

Δημοσ.
Δημοσ.

Παιδια εχουμε μια εικονα. Που την παταμε και μεγαλωνει σε ολη την οθόνη.

Αν θέσουμε το preview της εικονας το οποιο παταμε να ειναι πχ. 250χ250 προφανώς καποιες φωτογραφίες ειναι μεγαλυτερες σε διαστάσεις εγω δε θελω να κανει rendering τη της φωτογραφιες αλλα να δείχνει ενα μέρος τους 250χ250. με τη εντολες θα πω ποιο μερος θα ειναι αυτο. δηλαδη αν θα ειναι απο το μέσον της φωτογραφιας η απο την πανω αριστερα γωνια να πηγαινει 250 κατω 250 δεξια..;

 

ευχαριστω.

_Marios_ Proficient

_Marios_

Δημοσ.
  • Μέλος
Δημοσ.

αυτος ειναι ο κωδικας:

 

PHP:

 

<body>

 

<div id="container">

 

 

<div id="gallery">

<?php

 

$directory = 'gallery';

 

$allowed_types=array('jpg','jpeg','gif','png');

$file_parts=array();

$ext='';

$title='';

$i=0;

 

$dir_handle = @opendir($directory) or die("There is an error with your image directory!");

 

while ($file = readdir($dir_handle))

{

if($file=='.' || $file == '..') continue;

 

$file_parts = explode('.',$file);

$ext = strtolower(array_pop($file_parts));

 

$title = implode('.',$file_parts);

$title = htmlspecialchars($title);

 

$nomargin='';

 

if(in_array($ext,$allowed_types))

{

if(($i+1)%4==0) $nomargin='nomargin';

 

echo '

<div class="pic '.$nomargin.'" style="background:url('.$directory.'/'.$file.') no-repeat 50% 50%;">

<a href="'.$directory.'/'.$file.'" target="_blank">'.$title.'</a>

</div>';

 

$i++;

}

}

 

closedir($dir_handle);

 

?>

<div class="clear"></div>

</div>

 

 

</div>

 

</body>

 

CSS:

 

.clear{

clear:both;

}

 

a, a:visited {

color:#00BBFF;

text-decoration:none;

outline:none;

}

 

a:hover{

text-decoration:underline;

}

 

#container{

width:117px;

margin:0 auto;

}

 

 

 

div.nomargin{

margin-right:0px;

}

 

.pic{

float:left;

margin:0 0 0 0px;

border:0px;

width:200px;

height:200px;

overflow:hidden;

margin-left: 50px;

}

 

 

.pic a{

width:200px;

height:200px;

text-indent:-99999px;

display:block;

}

 

υπαρχει ακομα ενα CSS αλλα ειναι για οταν ανοιγει ολοι η εικονα αποτι εχω καταλάβει.

 

 

τι χρεια2ετε να κανω στα παραπάνω ωστε να ρυθμι2ω τι θέλω να δειχνει στο preview; εγω θέλω να δείχνει πάνω πάνω στην εικονα στο μεσον πχ.

 

βοηθειααα.

orotoi Mentor

orotoi

Δημοσ.
Δημοσ.

κοιμάμαι όρθιος τώρα για να καταλάβω τι θες και να δω τον κώδικα..

 

παίξε με το background-position (το οριζόντιο) και βάλτου αρνητικές τιμές σε pixels.

_Marios_ Proficient

_Marios_

Δημοσ.
  • Μέλος
Δημοσ.

κοιμάμαι όρθιος τώρα για να καταλάβω τι θες και να δω τον κώδικα..

 

παίξε με το background-position (το οριζόντιο) και βάλτου αρνητικές τιμές σε pixels.

 

εχω προσπαθήσει πάρα πολλα. κατι το κραταει κλειδομενο στο κέντρο.

οποτε μπορεσεις κοιταξε. γιατι το χρεια2ομαι..

 

ευχαριστω

 

να ποσταρο και το css του js ;

orotoi Mentor

orotoi

Δημοσ.
Δημοσ.

ανάλογα το μέγεθος του div (στη προκειμένη περίπτωση 250χ250), τόσο θα είναι και το κομμάτι της φωτό που θα εμφανίζεται.

 

Αν βάλεις background-position:0px 0px; εμφανίζεται η φωτό σου απο το 0,0 εώς το 250,250.

Αν βάλεις -100px -100px; εμφανίζεται απο το 100,100 (της φωτό) εώς το 350,350.

 

Έτσι όπως το έχεις με 50% 50% νομίζω είναι αυτό που θες.

 

Λες οτι κάτι την κρατάει κλειδωμένη στο κέντρο.. αυτό είναι το 50% 50%, αλλά αυτό δεν είναι το ζητούμενο??

 

Άλλαξε το 50% 50% σε 50% 0px

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...