GoldenLine
Zaloguj się
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

Hej,

mam kilka zdjęć w div, każde zdjęcie jest osobno w innym div. i teraz chcę obliczyć sumę szerokości wszystkich zdjęć.

umie policzyć ilość elementów w div.

taki kod:



$(document).ready(function(){

var x = $('div#modelka_gallery div.model'); 



var px = x.length;



$('div#modelka_gallery').css("width",px); 



});


jak to zmodyfikować.?? Ma ktoś pomysł. Można by tak ilość div*optymalna szerokość zdjęcia, ale tutaj jedno zdjęcie może miec 100px a inne 800 i wtedy się posypie...
Link do wypowiedziLink
Sławomir Kaźmierczak

Sławomir Kaźmierczak Snapcode

Temat: obliczanie szerokości zdjęć w div

var w = 0;
$('.model').each(function(){
w+= $(this).width();
});
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

mam tak

$(document).ready(function(){

var w = 0;

$('.model').each(function(){

w+= $(this).width();

});



alert(w);

});


ale zwraca width 1 obrazka ... reszty już nie sumuje... albo jakaś inna wartość z kosmosu albo czasem 0Piotr Stanek edytował(a) ten post dnia 16.11.11 o godzinie 23:22
Link do wypowiedziLink

konto usunięte

Temat: obliczanie szerokości zdjęć w div

1. Do czegos tak prostego jak pobranie width, nie musisz zaprzegac calego jquery, wystarczy wbudowane metody JS, np:
var curr_width = mydiv.style.width;

2. Ale skoro juz chcesz jquery to
$('.model').each(function(){
w+= $(this).children('img').width();
});
Powinno dla kazdego DIVA z class=model, zlapac img ktory jest w srodku i pobrac jego szerokosc.

3. Zastanawiam sie co chcesz zrobic, bo narazie mam wrazenie ze jest to cos, co tak naprawde nie ma sensu i mozliwe iz mozna to rozwiacaz za pomoca zwyklego CSSa ;)Andrzej Winnicki edytował(a) ten post dnia 16.11.11 o godzinie 23:29
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

Tam jest galeria gdzie jest scroll i teraz w każdej galerii jest X liczba zdjęć każde zdjęcie ma inną szerokość.
Żeby skrypt ładnie działał muszę mieć szerokość DIV w którym są umieszczone te wszystkie zdjęcia bo to się rozlatuje...
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

odpal sobie to

http://www.milamodels.pl/detal-39.html

alert zrobiłem zwraca 0

W źródle strony na dole jest:

<script type="text/javascript" src="http://www.milamodels.pl/public_html/frontend/_js/MilaModels_modelka.js"></script>

tam jest Twój kod. i nie działa
Link do wypowiedziLink

konto usunięte

Temat: obliczanie szerokości zdjęć w div

Wszedlem na stronke i mi pokazalo "2086", to znaczy dobrze? ;)

Jesli ty chcesz ustawic szerokosc diva, tylko po to by sie fotki nie rozlatywaly to jest tak jak mowilem - to mozna rozwiazac CSSem! nie trzeba uzywac JSa ;)
popatrz sobie na takie rzeczy jak width:100%, overflow:hidden itd itp ;)

ps1. jasne ze moze nie dzialac, bo pisalem totalnie w ciemno i nawet nie mialem pojeciac co ty tam mozesz miec ;) Aczkolwiek wyglada jakby dzialalo.

ps2. pomijam fakt posiadania na jednej stronie sterty bibliotek, z ktorych pewnie uzywasz pojedynczych elementow. Nie ma nic gorszego niz "uzycie bombowca, by wybrac sie do lokalnego sklepu po bulki" ;)Andrzej Winnicki edytował(a) ten post dnia 16.11.11 o godzinie 23:52
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

a ja na chromie ma mac OS mam 0 a nie 2086 :/
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

dałęm w css:



div#modelka_gallery {





	width:100%, overflow:hidden

}

div#modelka_gallery div.model {

	position: relative;

	display: inline;

	float: left;

	margin: 11px 5px 0 0px;

}

div#modelka_gallery div.model img {

}

div#modelka_gallery div.model div.sign {

	clear: both;

}


i bez zmianPiotr Stanek edytował(a) ten post dnia 17.11.11 o godzinie 00:08
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

ten Twój kod działa prawie poprawnie ale troszkę dziwnie..

tutaj:

http://www.milamodels.pl/detal-162.html

na chromie pokazuje 56.

tutaj:

http://www.milamodels.pl/detal-56.html

pokazuję 7449 czyli dobrze... (kilka odświeżenie i pokazuje 91 :) ) czyli nie do końca dobrze..

Ale w niektórych miejscach tak jak by źle zliczałPiotr Stanek edytował(a) ten post dnia 17.11.11 o godzinie 00:20
Link do wypowiedziLink

konto usunięte

Temat: obliczanie szerokości zdjęć w div

sugeruje ustawic SZEROKOSC obrazkow i bedzie OK.
Sa one (szerokosci) dynamicznie dobierane na podstawie ratio, ktore wyjdzie z wysokosci. W zwiazku z tym ze skrypt odpali sie zaraz po ducument.ready, to czesto widzi glupoty, bo obrazki jeszcze nie zostaly wgrane i odpowiednio zresizowane.

$(window).load() - poczeka na obrazki, ale ma problemy z poprawnym odpaleniem w IE czasami.

Skup sie uwaznie, poczytaj, pomysl, naucz sie wiecej o CSS a sie przekonasz ze cala ta dyskusja o JS nie ma sensu i nie jest w ogole potrzebna.

Napisalem bys poczytal o overlow itd.. jako podpowiedz, a nie bys to dodal w pierszym, losowym miejscu :) Z tym musisz ciutke wiecej pomyslecT. Powodzenia. Dalem ci wszystkie wskazowki jakich potrzebujesz by to poprawnie dzialalo.
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

Udało się





$(document).ready(

	function()

	{

		var a = 0;

		$(".load_images").load(function(){

			a += $(this).width()+7;

			$('div#modelka_gallery').css("width",+a); 

		}

	); 

});


po władowaniu obrazka sprawdzam jego szerokość sumuję ją z wcześniejszymi szerokościami.

np

http://www.milamodels.pl/detal-129.html

PS działa Ci również.

PS2 Projekt odziedziczyłem więc ciężko teraz tu ingerować bo nie ma na to czasu. Jak bym robił to od początku sam zrobił bym to tak jak mówisz...
Link do wypowiedziLink

konto usunięte

Temat: obliczanie szerokości zdjęć w div

Andrzej Winnicki:
1. Do czegos tak prostego jak pobranie width, nie musisz zaprzegac calego jquery, wystarczy wbudowane metody JS, np:
var curr_width = mydiv.style.width;

Oj bo chyba nie do końca.


<!DOCTYPE html>

<html>

<head>

	<script type="text/javascript">

		function getWidth() {

			var node = document.getElementById('node');

			alert('offsetWidth:'+node.offsetWidth+'\n'+'styleWidth:'+node.style.width);

		}

	</script>

</head>

<body onload="getWidth()">



<div id="node">LOREM</div>



</body>

</html>
Link do wypowiedziLink
Sławomir Kaźmierczak

Sławomir Kaźmierczak Snapcode

Temat: obliczanie szerokości zdjęć w div

wlasnie trzeba "zaczekac" az sie zdjecia doczytaja
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

jednal się sypie pod safari na macu i lekko. Czyli jestem w punkcie wejścia :/

chodz to :







$(document).ready(

	function()

	{

		var a = 0;

		$(".load_images").load(function(){

			a += $(this).width()+7;

			$('div#modelka_gallery').css("width",+a); 

		}

	); 

});


jest najbliższe ideału.
Link do wypowiedziLink

konto usunięte

Temat: obliczanie szerokości zdjęć w div

Piotr Stanek:
jednal się sypie pod safari na macu i lekko. Czyli jestem w punkcie wejścia :/

chodz to :







$(document).ready(

	function()

	{

		var a = 0;

		$(".load_images").load(function(){

			a += $(this).width()+7;

			$('div#modelka_gallery').css("width",+a); 

		}

	); 

});


jest najbliższe ideału.

Dżizas...

czekasz na domready żeby podpiąć event na load... W momencie odpalenia domready najlżejsze z obrazków mogą już być załadowane i podpięcie im .load()'a nic już nie da.
W momencie, gdy odpalane jest $(document).load() wszystkie obrazki na bank są już wczytane - wykonaj swój kod wtedy.
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

no nie wiem..

np.





$(document).load(function(){

var w = 0;

$('.model').each(function(){

w+= $(this).children('img').width();

});



alert(w);

});


nawet alert się nie wykonuję... Zrobiłem coś źle.. ? Już nic z tego nie łapie

$(window).load(function(){ zwraca szerokośćPiotr Stanek edytował(a) ten post dnia 17.11.11 o godzinie 10:56
Link do wypowiedziLink

konto usunięte

Temat: obliczanie szerokości zdjęć w div

Piotr Stanek:
no nie wiem..

np.





$(document).load(function(){

var w = 0;

$('.model').each(function(){

w+= $(this).children('img').width();

});



alert(w);

});


nawet alert się nie wykonuję... Zrobiłem coś źle.. ? Już nic z tego nie łapie

Sorki, $(window).load()
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

prawie śmiga ale dalej dziwnie się zachowuję.

na chromie to http://www.milamodels.pl/detal-37.html jest ok
to samo na safari na macu sie nie przesuwac tzn odlagłość jest dobrze wyliczona sprawdzałem firebugiem.

PS na ie7 sypie się :(
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: obliczanie szerokości zdjęć w div

Dla potomnych.



$(window).load(function(){

var x = $('div#modelka_gallery div.model'); 

for (i=0;i<=x.length;i++)

{

	$('#m_'+i).css("width",$('img.img_'+i).width()); 

}

var w = 0;

$('.model').each(function(){

w+= $(this).children('img').width()+6;

});

//alert(w);

$('div#modelka_gallery').css("width",w); 

});


Pewnie można krócej a musze każdemu div w modelka_gallery nadać width CSS sobie na radział pod każdą przeglądarką. A tak działa na każdej safari , ie7,8,9

Dzięki za pomoc wszystkim!Piotr Stanek edytował(a) ten post dnia 17.11.11 o godzinie 13:01
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

galeria zdjęć




Wyślij zaproszenie do
Anuluj