ja_purity, losowanie obrazka header, index.php

[xpander]

Witam.

Chciałbym zmieniać katalog losowanych obrazków "/images/header/"
w zależności od rozdzielczości ekranu użytkownika.

Rozdzielczość pobieram funkcją js:
-------------------------------
<script language="JavaScript">
var rozdzialka=0;
if (screen.width>1024) {
rozdzialka=1;
}
else {
rozdzialka=2;
}
</script>
-----------------------------
odnalazłem funkcje w index.php odpowiedzialną za losowanie obrazków:
-------------------------------

<!-- BEGIN: HEADER -->
<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(
<?php echo $tmpTools->templateurl(); ?>
images/header/<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>)
no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

--------------------------------
aby wyswietlać obrazki w zależności od rozdzielczości, chcę je losować z dwóch rożnych katalogów.
moja modyfikacja:
-------------------------------

<div id="ja-headerwrap">
<div id="ja-header" class="clearfix" style="background: url(
<?php echo $tmpTools->templateurl();?>
<?php
$zmienna = "?><script language=javascript>document.write(rozdzialka);</script><?php";
$zmienna = str_replace("?>", "", $zmienna);
if ($zmienna == '1') {
echo ('/images/header/');
echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header');
}
else{
echo '/images/header_low/';
echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header_low');
}
?>) no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">

-------------------------------------------------------------------------------------
niestety coś robię nie tak. nie jest wyświetlany żaden obrazek w header

stworzylem krotki skrypt, i doszedłem do wniosku że instrukcja if nie działa prawidłowo

"


<script language="JavaScript">

if (screen.width>1024) {
rozdzialka=1;
}
else {
rozdzialka=2;
}
</script>
<?php
$zmienna = "?><script language=javascript>document.write(rozdzialka);</script><?php";
$zmienna = str_replace("?>", "", $zmienna);

if ($zmienna == 1) echo "jeden";
?>

"

nie wypisuje nic na ekranie, mimo że warunek powinien być spełniony,
jako że
echo $zmienna;
wypisuje wartość 1.

[Jola]

Witam,
chyba musisz doczytać o funkcji str_replace().
Z całą pewnością w tym wypadku nie zwróci wartości 1.

[xpander]

wyrzuciłem funkcję str_replace()

dla skryptu:
----------------------------
<script language="JavaScript">

if (screen.width>1024) {
rozdzialka=1;
}
else {
rozdzialka=2;
}
</script>

<?php
$zmienna = "<script language=javascript>document.write(rozdzialka);</script>";
if ($zmienna == 1) echo "jeden";
?>
-------------------
nie wyswietla się nic, pomimo że wartość $zmienna wynosi 1.
skrypt:
------------------

<?php
$zmienna = "<script language=javascript>document.write(rozdzialka);</script>";
echo $zmienna;
?>
-----------------
wyswietla 1

???

[Jola]

No bo każesz mu wyświetlać zmienną rozdzialka, pod która wcześniej podstawiasz 1 (lub 2). :)

[xpander]

Zmieniłem podejście. ponieważ jest problem z przekazaniem js--->php
napisałem całość w js.


<div id="ja-header" class="clearfix" style="background: url(
<script language="JavaScript">
var rozdzialka=0;
if (screen.width>1024) {
document.write("/images/header/header1.jpg")
}
else {
document.write("/images/header_low/header1.jpg")
}
</script>);
no-repeat top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?>;">


tylko jest mały problem, zamiast wyswietlac obrazki, wypisuje mi na stronie
tekst tego skryptu...
czy funkcja document.write() nie nadaje się do tego celu?

[Jola]

W tym (http://forum.joomla.pl/showthread.php?t=34906&page=2) wątku podałam skrypt, który dołącza plik css w zależności od rozdzielczości ekranu.
Umieść definicje stylów diva w różnych plikach css, w samym divie umieść tylko nazwę klasy (nie zdefiniowaną w innych plikach css) i sprawa załatwiona.
Nie wspomnę, że takie rozwiązanie daje dużo więcej możliwości.

[xpander]

cóż, to już zrobiłem wcześniej dla swojej strony, dla innego elementu.
tu jednak mam losowy obrazek pobierany funkcją php (bezpośrednio w divie)


<?php echo $tmpTools->getRandomImage(dirname(__FILE__).DS.'images/header'); ?>

więc chcąc zachować funkcjonalność musiałbym tą funkcję php wrzucić do pliku template.css?

alternatywnie musiałbym utworzyć 6 różnych plików css i żonlgować nimi,
3 losowo dla dużej rozdzielczości
i 3 losowo dla małej rozdzielczości

(szablon to ja_purity)

[Jola]

Trzeba to zrobić dwufazowo:
1. rozdzielczość przeglądarki jest pobierana w sekcji head, dlatego tam trzeba umieścić skrypt z funkcją:

<script type="text/javascript">
function rozdz(){
var a;
if (screen.width>1024 ) {
a=1;
}
else {
a=2;
}
return a;
}
</script>2. Następnie w odpowiednim miejscu - podaję przykładowy kod:

<script type="text/javascript">
b= rozdz();
if (b==1) {
document.write("<div id='ja-header' class='clearfix' style='background: transparent url(images/stories/articles.jpg) top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?> no-repeat'>");
document.write("Oto rozdzielczość > 1024");
document.write("</div>");}
else {
document.write("<div id='ja-header' class='clearfix' style='background: transparent url(images/stories/clock.jpg) top <?php if($this->direction == 'rtl') echo 'left'; else echo 'right';?> no-repeat'>");
document.write("Oto rozdzielczość < 1024");
document.write("</div>");
}
</script>Zwracam uwagę na kolejność wpisywania elementów w style="", zmiana może powodować kłopoty z działaniem.