Занимателна задача с цикли

sizif

Registered
Здравейте!

Ако следите постовете ми от тези дни сигурно знаете, че пиша скрипт за галерия. Докарах го до момента, в който трябва да се погрижа за "добрия вид" на извежданите резултати (снимки). И ето че се изправих пред една доста занимателна задача:

Как да създам алгоритъм, по който да извеждам по 5 снимки на ред дори когато нямам достатъчно снимки за да завърша нужния брой тагове за колоните на реда, а също и как да поставя начало и край на текущия ред.

Звучи просто, но се оказва, че не е съвсем така. Аз съм от традиционалистите, които обичат добрия стар таг <TABLE> ;) и това прави задачката доста мъчна.

Конкретно за проблема:

Имената и пътя до снимките вземам директно от БД, листвам по 5 снимки в 5 колони на ред в таблица:

<CENTER><TABLE CELLSPACING=0 BORDER=0 CELLPADDING=4 WIDTH=100%>
<TBODY>
<TR> \\отварям първия ред на табл

<?
....
....

while ($row = mysql_fetch_array($result))
{
$id=$row["id"];
$img_name=$row["img_name"];
$thumb_name=$row["thumb_name"];

$pic= "<A HREF='$img_name'><IMG SRC='$thumb_name' border=0></A>";

echo "<TD VALIGN='MIDDLE' ALIGN='CENTER'>$pic</TD>"; \\снимката в колона
}

mysql_close();
?>

</TR> \\затварям реда
</TBODY></TABLE>


Първо: как да се направи така, че на всеки 5 снимки да се затваря текущия ред и да се отваря нов за следващите? (с това донякъде се справих)

Второ: как да се направи така, че всеки ред да има по 5 колони, дори когато снимките не са кратни на 5, т.е. трябва да се изчертаят повече колони отколкото е броя на наличните снимки?

Ако се сещате за подходящ алгоритъм, моля помогнете ми да реша задачата!

Благодаря предварително![/b]

ПП: хрумна ми едно възможно решение с допълнителен цикъл извън уайл и подусловие... След малко ще пусна резултата, ако проработи, както трябва :)
 
Извинявай че ти пиша в темата без да ти давам отговор на въпросите но все пак защо него направиш с div-ове и css ще е по лесно аз направих така http://ajax.ms-dev.com/team.php
 
Здравей!

Благодаря ти, че се включваш в темата! Даваш ми отговор :)

Зарових се в типове променливи, модулно делене и пр, които винаги съм си мислил, че каквото и да ми хрумне да правя, няма как да ми потрябват :)

Ако не те затруднявам, можеш ли да ме светнеш как става (признавам си откровено избягвам див освен за форматиране на текст :( )?

Ако може и по-конкретно във връзка с кода, защото не разбирам...

Благодаря! :)
 
Главата ме цепи яко но ще погледна въпроса.

mute тоя сайт не съм го виждал от отдавна и сега ми направи добро впечатление.

Ако го преведеш на EN и го оптимизираш направо ще убиеш рибата.
Примерно като се наредиш след официалния сайт. :)
 
принципно
задаваш на дива височина , ширина и флоат: ляво или дясно ( няма значение)
#div{width:100px;height:100px;float:left;border:solid 1px red}
правиш един основен див с примерно 510рх ако искаш да се са по 5 дива на ред
<div>
и вътре слагаш цикъла
for($i;$i<=25;$i++){
$row = mysql_fetch_array($result);
$id=$row["id"];
$img_name=$row["img_name"];
$thumb_name=$row["thumb_name"];

$pic= "<div id=\"div\"><A HREF='$img_name'><IMG SRC='$thumb_name' border=0></A></div>";
}

така мисля че ще ги нареди

p.s. админ малко няма смисал да се превежда защото цялата информация се копира от официалният им сайт и се превежда на БГ за българските фенове ;)
 
Благодаря!

Ще пробвам. Мисля, че мис тана ясно :)
 
mute каза:
принципно
задаваш на дива височина , ширина и флоат: ляво или дясно ( няма значение)
#div{width:100px;height:100px;float:left;border:solid 1px red}
правиш един основен див с примерно 510рх ако искаш да се са по 5 дива на ред
<div>
и вътре слагаш цикъла
for($i;$i<=25;$i++){
$row = mysql_fetch_array($result);
$id=$row["id"];
$img_name=$row["img_name"];
$thumb_name=$row["thumb_name"];

$pic= "<div id="div"><A HREF='$img_name'><IMG SRC='$thumb_name' border=0></A></div>";
}

така мисля че ще ги нареди

p.s. админ малко няма смисал да се превежда защото цялата информация се копира от официалният им сайт и се превежда на БГ за българските фенове ;)

@sizif послушай @mute :) Ще си спестиш много работа, а крайният ефект ще е същия.
Само бих те посъветвал бордера да не го слагаш на див-а, а на img-то, защото иначе става грозно, когато снимката е вертикална (width < height)
 
Здравей! :)

Вече пробвам, но действам малко хаотично...

Ако си на линия и имаш време, можеш ли да продължиш примера на mute?

Интересувва ме как да задам параметрите на основния див и как да го отлича от "малкия" див:

правиш един основен див с примерно 510рх ако искаш да се са по 5 дива на ред

и да ги вържа с останалото съдържание, което е с <TABLE>-тагове

А също как да направя съдържанието в "малките дивове" да е центрирано:
алтернативата на align="center" valign="middle" :)

А също между отдделните клетки да има разстояние да кажем 10 пиксела, което да се отчита и ако "реда" не е пълен?

Въпросите ми сигурно са малко объркващи, но както писах, използвам стилове само за текста...

Ако не си ме разбрал, ще направя някаква графика на дизайна, от който се нуждая...

Благодаря!

ПП: реших проблема с големия и малкия див - използвах класове. Как обаче да задам на съдържанието в див-а да се центрира? Командата за вътрешно отстояние има ли стойност "центер"?
 
sizif каза:
Здравей! :)

Вече пробвам, но действам малко хаотично...

Ако си на линия и имаш време, можеш ли да продължиш примера на mute?

Интересувва ме как да задам параметрите на основния див и как да го отлича от "малкия" див:

правиш един основен див с примерно 510рх ако искаш да се са по 5 дива на ред

и да ги вържа с останалото съдържание, което е с <TABLE>-тагове

А също как да направя съдържанието в "малките дивове" да е центрирано:
алтернативата на align="center" valign="middle" :)

А също между отдделните клетки да има разстояние да кажем 10 пиксела, което да се отчита и ако "реда" не е пълен?

Въпросите ми сигурно са малко объркващи, но както писах, използвам стилове само за текста...

Ако не си ме разбрал, ще направя някаква графика на дизайна, от който се нуждая...

Благодаря!

абе разбрах те, ама трябваше да съм легнал отдавна.

<div style="width:668">
<?php
while ($row = mysql_fetch_array($result)) {
$filepath = "пътя до снимката, спрямо текущия файл. Пример - ./gallery/album3/img_875.jpg";
echo ' <div class="aipic"><a href="път до файла, който ще поkазва по-голямата снимка, като се кликне на thumbmaila"><img стъле="border:1px solid #000000;" src="'.$filepath.'" alt="" /></a></div>';
}
?>
</div>

CSS класа:
.aipic {
float:left;
width:128px;
margin: 10px 5px 0px 5px;
text-align:center;
}


дължината на div-a дето огражда всичко се получава 5бр*128px + 4бр*10px (5 снимки, дълги 128 пикесела. между всяка има разстояние 10 пикесела...... ама съм забравил да прибавя дебелината на бордера...)

как работи float: left? ами позиционира се колкото се може по наляво (спрямо предния елемент!). Така се нареждат един до друг на един ред. ама понеже външния див е с фиксирана дължината, като се наредеят 5 снимки и местото свършва и 6-тия див се принуждава да слезе на новия ред. 7-мия се реди пак до него и така докато свърпат дивовете.

надявам се да ти се е изяснило.
лека нощ

пп
щях да забравя - на <А> тага трябва му сложиш стил - text-decoration: none; иначе снимката ще бъде със син бордер (или там какъвто цвят си задал за линковете).
 
големия див го задаваш с такава ширена че да могат да се побират 5 малки дива става и с клас както и с вътрешен стил
<div style="width:500px;margin-left:auto;margin-right:auto">
не е задалжително да е див просто да е някакъв носещ елемент с фиксирани размери така че когато вътрешните дивове се подреждат да достигат някаква граница и да преминават на 2ри 3ти и т.н.т редове с картинки. Другото важно нещо в случая е картинките да са с еднакви размери т.е. примерно ако дива ти е 150рх да няма картинка по голяма от този размер защото под ИЕ ще се получи голямо мазало много му е трудно на този "браузър".
 
Не, няма по-големи. Тумбнейлите се създават с макисмален размер 150Х150, на дивовете зададох 160 и всичко е ок :)
Редовете се получиха идеално. Само как да центрирам съдържанието им? Т.е. снимките да са в центъра на изчертаните бордъри...?
 
sizif каза:
Не, няма по-големи. Тумбнейлите се създават с макисмален размер 150Х150, на дивовете зададох 160 и всичко е ок :)
Редовете се получиха идеално. Само как да центрирам съдържанието им? Т.е. снимките да са в центъра на изчертаните бордъри...?

text-align:center;

пп
става и под ИЕ когато са различни размери, с "нормални" усилия като за ИЕ ;)
 
Благодаря ви и на двамата! :)

Улеснихте ми живота! Мисля, че ми се изясниха нещата (и се чувствам глупаво - един таг за таблица с всичките й характеристики може да глътне 400-500 знака и пишеш всичко това десетки пъти в един документ :) ), а дивовете са много голямо улеснение...

Още веднъж: Благодаря!

Спокойна нощ!
 

Back
Горе