Forum PHP.pl

witam serdecznie,
powracam z pytaniem odnośnie środkowania zdjęcia w divie. Moja strona: http://www.olimpialublin.pl

na stronie głównej pod zdjęciem pływaków są 4 zdjęcia aktualności, które po najechaniu myszą się trochę powiększają. Problem w tym, że powiększają się jak widać od lewego górnego rogu (tak są też wyświetlane) - jak zrobić aby zarówno wyświetlane jak i powiększane były w centrum? Tak jak na: http://fluidagency.pl/ - na dole strony

A jaki to ma związek z PHP? Przenoszę.

a taki że obrazki są pobierane i wyświetlane w php (ze zmiennych) i nie jest to byle jakie img src stałych wymiarów

To dodaj jeszcze tag [english], bo nazwy zmiennych są w języku angielskim.

nie o to chodzi, kiedyś jak tego szukałem to znalazłem gdzieś, że najpierw trzeba napisać skrypt, który pobierze rozbiar obrazka, poxniej jakos go centrowac wlasnie w php - stad moje zasugerowanie się znacznikiem php przy zakładaniu tematu...

i jak zwykle będziemy traktować tu o sprawach nie związanych z tematem, a chciałbym się w końcu dowiedzieć na jakiej zasadzie to działa... I nie zdziwię się jednak jeśli wszystko ogarnąć trzeba będzie właśnie w P H P...

Generalnie moje zapytanie jest odnośnie sposobu.

Mam określoną wysokość zdjęcia (stałą); szerokość dopasowywana jest automatycznie. Jak teraz zrobić, żeby obrazek był center/middle i tak samo się zoomował?

W css dla diva, w którym mają być wyśrodkowane zdjęcia nadaj text-align: center;

Na moje to nie php tylko javascript. Z tego co podejrzałem w narzędziach developerskich zmienia się wielkość obrazka który daje efekt zoomu. Reszta pewnie za pomocą overflow.

nie, to nie o to chodzi.

oto kod:

JS

[XML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function(){
    $('#zoom1').hover(function(){
        $(this).find('img').stop().animate({"height": 260}, 200);
    }, function(){
        $(this).find('img').stop().animate({"height": 236}, 500);
    });
});
</script>
[XML] pobierz, plaintext 

i PHP

[PHP] pobierz, plaintext 
<div id='zoom1' style='width:236px;height:230px;overflow:hidden;'>
<?
   $dates = array();
   $photos = array();
   $titles = array();
   $opiss = array();
   $database = "./db/actuals.db";
   $items = file($database);
   $last = count($items)-1;
 
   for($i = $last; $i > $last - 1; $i--) {
      list($date, $photo, $title, $opis) = explode('|', $items[$i]);
      $dates[$count] = $date;
      $photos[$count] = $photo;
      $titles[$count] = $title;
      $opiss[$count] = $opis;
 
echo "<a href=./db/aktualnosci/".$photos[$count]." rel='fancy' title='".$titles[$count]."'><img src=./db/aktualnosci/".$photos[$count]." height='230px' border='0px' title='Zobacz większe zdjęcie...'></a>";
}
?>
</div>
[PHP] pobierz, plaintext 

No to musisz jeszcze zmieniać left i top przy okazji animacji jeżeli chcesz otrzymać efekt od środka

edit:
Wydaje mi się że na każde 2px powiększenia musisz odejmować 1px left i top Mam nadzieję że jasno napisałem

Ten post edytował ghost1511 6.03.2014, 08:05:14

no właśnie, ale nie będzie on stały, bo jedno zdjęcie może mieć 1000x500, a inne 1300x1000 i co wtedy?

@edit

czyli powiększenie jest o 26px więc powinienem dać left -13 i top -13?

a co z wyświetleniem zdjęcia centralnie? (przed hoverem)

No ale w czym problem? Mechanizm jak to ma dzialac znasz, wiec o co pytasz?

Najlepiej, byś obrazki miał stałych wymiarow, nie bedziesz musial się bawić dynamiczne ich dopasowywanie, tak jak to jest na przykladowej stronie. Tam obrazki są stalych wymiarow i wszystko jest banalne.


Jesli sie upierasz, ze nadal chcesz miec rozne rozmiary, to nadal nie wiem w czym problem.
Funkcja http://pl1.php.net/manual/en/function.getimagesize.php zwraca ci rozmiar obrazka. Masz wiec wszystkie dane.

Przecież wysokość i szerokość możesz pobrać za pomocą js. Trochę matematyki, znaleźć wzór i powinno działać

edit:
Tak po dłuższym zastanowieniu to wysokości nawet nie potrzebujesz, jeżeli będziesz poszerzał o 2 px to wysokość też o 2px wzrośnie. Wysokość obrazka nie będzie miała znaczenia.

Ten post edytował ghost1511 6.03.2014, 08:16:58

#Nospor

No własnie to kiedyś gdzieś czytałem - niestety stałych obrazków nie da rady zrobić, bo te aktualności są na panelu a ja przecież nie będę codziennie wchodził i poprawiał zdjęć wrzuconych przez pracowników klubu...

czyli co trzeba zrobić:
- get image size pobierze jak wiadomo rozmiar.
- ten rozmiar bede musial podzielic / przeskalować tak, żeby wyszło mi height=236 i width odpowiednie (czy dopiero tutaj pobierać height?)
- mając już rozmiar jak go wycentrować? (załóżmy że wyszło 390x236; jak określić pozycję środka?)



czyli mam rozumieć, że php w ogóle nie ruszać? nie pobierać rozmiaru?

Jesli obrazki beda mialy taką samą wysokosc co szerokosc to tak, ale jak nie, to by to ladnie wygladalo musisz wysokosc zwieksszac nie tyle samo co szerokosc ale przy zachowania calego wspolczynnika wysokosc/szerokosc.
Dokladnie tak jest na stronie co podales i wszystko ladnie dziala.
I tak, nie musisz w to mieszac php, bo jak juz wspomniano, wymiary obrazka pobierzesz tez bez problemu w js

Faktycznie



Na moje do niczego to nie potrzebne. JS i CSS załatwią sprawę

Ten post edytował ghost1511 6.03.2014, 08:58:01

no właśnie - zauważyłem, że pewnie te ustawienia są wpisane w klasie "img" na stronie Fluid Agency - tylko nie mogę znaleźć u nich na stronie tej klasy - może ktoś czający mógłby mi to wyciągnąć i wkleić tutaj jak oni mają zrobione?