Rozciągnięcie obrazka, zatrzymanie pokazu slajdów i wygląd


(kurzel131) #1

Witam mam 3 sprawy do mojej strony http://muonlinechronology.eu/

Po 1 chciałem w pracach końcowych rozciągnąć obrazek tła na 100% ale coś nie wyszło, nie mogę znaleźć dobrego kodu.

po 2 kolega zasugerował opcje zatrzymania pokazu slajdów na ostatniej stronie,

a). czy to możliwe przy tej bibliotece //http://www.dabble.pl/news/56,pokaz-slajdow-na-twojej-stronie-www

b). czy to nie jest sprzeczne z przeznaczeniem pokazu slajdów, wszak to nie prezentacja w szkole gdzie każdy się nie zdąży na oglądać a tu proces się powtarza.

po 3 czy design etc są dobre czy jeszcze bym musiał coś poprawić.


(manieKMP) #2

Co do pierwszego, dodaj do css'a, dla body background-size: 100% auto; (będzie rozciągało obrazek do szerokości okna przeglądarki), a jeśli chcesz, by tło było statyczne, dopisz dodatkowo background-attachment: fixed;.

Jeśli chodzi o drugą sprawę, jeżeli masz zamiar zaimplementować to, co pokazano na podanej stronie, to moim zdaniem nie ma co kombinować ze stopem w tym wypadku. Po pierwsze nie ma tam nawigacji do ręcznego przeglądania fotek, więc zatrzymanie tasowania zablokuje możliwość podglądu wybranego/upatrzonego zdjęcia (jak pewnie zauważyłeś, można klikać w przykładowe foty...), a po drugie zatrzymywanie "slajdów" wykorzystuje się do innego rodzaju pokazu slajdów (np. przy "pełnoekranowych", gdzie ma się opcje kontroli nad wyświetlaniem... przykład).

Na temat trzeciego punktu nie będę się wypowiadał :slight_smile:


(kurzel131) #3

No i tu właśnie mam ten problem. Jak dam w okolice licznika w php to przy daniu strony na nowa kartę przeglądarki automatycznie mi ją zapisuje to samo jak odświeżam klawiszem i przyciskiem.

Pod głową mam ciało gdzie mam definiowane tło, kolor textu, zabezpieczenia, potem licznik w php, i skrypty zabezpieczające, tekst ciągle muszę pobierać z serwera bo po daniu mi zapisuje zamiast pokazywać zawartość.

A co do pokazu nawet ten przykład jest ciekawy http://www.tn3gallery.com/examples/tn3_eris_bullets/ tylko ,że poza kodem potrzebuje bibliotek...


(manieKMP) #4

Nie rozumiem w czym problem. Do Twojej strony ładowany jest plik "style.css" o poniższej zawartości (najprawdopodobniej siedzi w głównym katalogu na serwerze, w tej samej lokacji co "index.php", czy tam html, z której strona startuje):

body {

    margin: 0 auto;

    text-align: center;

}

h2 {

    color: #0000FF;

}

.liczba {

    color: #0000FF;

    font-family: Georgia,Arial;

    font-size: 28px;

    font-weight: bold;

}

Teraz żeby tło rozciągnąć i dodatkowo zablokować jego przesuwanie przy scroll'owaniu strony (jeśli będzie dłuższa), dopisujesz podane w poprzednim poście rzeczy do "body", przez co zawartość pliku css zmieni się na:

body {

    margin: 0 auto;

    text-align: center;

    background-size: 100% auto;

    background-attachment: fixed;

}

h2 {

    color: #0000FF;

}

.liczba {

    color: #0000FF;

    font-family: Georgia,Arial;

    font-size: 28px;

    font-weight: bold;

}

Podany przez Ciebie przykład też potrzebuje bibliotek (tasowane fotki), jak każdy bajer wykorzystujący js/jq :wink:

Choć da się zrobić prosty slider zdjęć przy pomocy samego css'a i html...


(kurzel131) #5

Mój błąd dopisywałem to do pliku index.php.

Zatem funkcja zapisz plik jako to taki standardowy błąd gdy na siłę coś wpychamy.

//chyba ,że wina leży po stronie kompa co nie tłumaczy php w kedzie bo ładuje stronę na neta i mi nie odczytuje licznika a na serwerze już tak, chcę ino uniknąć rozpowszechniania kodu.

//potwierdzone php wariuje bez kompilatora na serwerze pliki są stabilne

//pliki na serwerze zaskakują z opóźnieniem ale w końcu weszło

Ok ale ale tamte były publicznie dostępne a tutaj nie bardzo, a ja nie potrafię odczytać skryptu po tym jak go zobaczę i wpisać do notatnika.

W sumie to mi chodziło o efekt tego przejścia z tym co podałeś, opcja bullet. CO ciekawe ten mój ma opcje stopowania tylko kurde opcja on/off jest zapisana różnie to true/false, 1/0, null/X.

może poradzisz jak z tym stopowaniem mojej wersji ustawić.


(manieKMP) #6

Na podanym przez Ciebie przykładzie "tasowania zdjęć" można zastosować zatrzymanie animacji po najechaniu kursorem na zdjęcie (i chyba jest najbardziej właściwe dla takiego typu pokazu).

W kroku 4, gdzie jest przedstawiony przykładowy js do uruchomienia pokazu, należy dopisać wiersz pause: 1, co w efekcie da zastopowanie przejścia do kolejnej fotografii, gdy kursor znajdzie się na tej "tasowarce", oraz wznowi przejście, jeżeli zdejmiesz kursor z danej foty.

A kod po modyfikacji wygląda tak:

A teraz js do "slideshow" z Twojej strony :slight_smile: Pierwotny js:

Po zmianach (dodane zatrzymanie animacji po najechaniu kursorem oraz możliwość przejścia do następnej foty przy pomocy kliknięcia w obrazek):

Albo zamiast wierszy z "next" i "pause" wpisz autostop: 1 , wtedy pokaz się zatrzyma (przykład z alertem):

PS. W razie czego radzę zajrzeć do źródła, ponieważ strona którą podałeś, opisuje tylko część możliwości jQuery Cycle Plugin (pod "See More Demos and Examples" jest więcej przykładów...)


(kurzel131) #7

a da się jakoś dodać ten efekt bullet by internauta widział ile jest fot i do jakiegoś przejść?. Dodałbym przy next update

jak coś strona przeszła aktualizację coś jeszcze od strony wizualnej odpycha?


(manieKMP) #8

Skrypt ze strony po przeróbce:

Dodaje do slajdów klikalną nawigację/numerowanie nad pokazem. Przykładowy css do ostylowania tej nawigacji (jeśli czegoś takiego nie dasz, nawigacja będzie kiepsko wyglądać :wink:):

#nav {margin: 0 0 5px;}

#nav a {

 border: 1px solid #ccc;

 background: #c0c0c0;

 text-decoration: none;

 margin: 2px;

 padding: 2px;

}

#nav a.activeSlide {background: #fa0;}

#nav a:focus {outline: none;}

$('#s1')

.before('

') .cycle({ fx: 'shuffle', delay: -4000, width: 1100, height: 540, pager: '#nav', next: '#s1', pause: 1


(kurzel131) #9

Może nawet lepsze takie liczone bo 35 fot ma pokaz. ogólnie jak oceniasz stronę bez ostatniego upka z pokazem?


(manieKMP) #10

Pomijając użycie ramek (nie wnikam w potrzeby ich zastosowania...), to osobiście chyba tylko poszerzyłbym menu, w którym się zawija niemiłosiernie tekst i będzie znośnie :wink:


(kurzel131) #11

Mowa o menu z sezonami itd?


(manieKMP) #12

Tak, to w lewej ramce, sama ramka jest dość szeroka, a menu wąskie i zawija tekst, więc można by poszerzyć menu pod szerokość ramki, aby było czytelniej i mniej scrollowania. Ogółem trzeba byłoby dla kilku elementów zmienić parę wartości.

Podam co zmieniłem, a Ty sobie zobaczysz przy edycji jak propozycja wygląda i albo zastosujesz to co poniżej, albo jeszcze sobie zmienisz (zmiany na pliku Odnosniki.css, co zostało zmienione oznaczono "=", co dodane "+"):

ul#menu {

    color: #000000;

    float: left;

    height: 100%;

    list-style-type: none;

    margin: 0 10px 0 0;

    padding: 0;

= width: 18em;

+ cursor: pointer;

}

ul#menu li a {

    background-color: #CC0000;

    border-bottom: 1px solid #000000;

    color: #000000;

    float: left;

= padding: 0.2em 5px;

    text-decoration: none;

= width: 18em;

}

ul#submenu li a {

    background-color: #FF0000;

    border-bottom: 1px solid #000000;

    color: #000000;

    float: left;

    font-weight: bold;

= padding: 0.2em 5px;

    text-decoration: none;

    text-shadow: 1px 1px 15px #FF0000;

= width: 18em;

}

ul#submenu {

    background-color: #86E391;

    color: #000000;

    float: left;

    list-style-type: none;

    margin: 0 10px 0 0;

    padding: 0;

= width: 18em;

}

Po za tym powinieneś zablokować zmianę rozmiarów ramek (dopisujesz noresize="noresize" do tagu "frame" dla menu), osobiście dałbym też dla nich border="0" (dopisany do tagów "frameset").


(kurzel131) #13

Nom lepiej ale ustawiłem szerokośc na 17 by było trochę odstępu

like na stronie działa ale nie mam powiadomienia na fejsie, chyba ,że przez obciążenie zasobami nie zaskoczyło

no i kwestia tych danych analitycznych mam jakiś błąd że nie mam połączenia z kontem admina czy coś a skopiowałem ten kod do mety

https://www.lubie.to/baza/przycisk-lubi ... ej-stronie

no i to głupie menu rozwijane na klika lpm warunek niech by był jedno się rozwija a przy następnym poprzednie się chowa następne się rozwija

mam stąd http://blog.tworzeniestron.edu.pl/css/m ... html-css/# coś znalazłem ale całkowicie bym musiał zmienić kod i bez takiego efektu chyba

ps możliwe jest dodanie kursora z gry po wyświetleniu strony i jego zmiana przy wyborze menu?

ps2 mam mete odpowiedzialną za kodowanie pl znaków a na elektrodzie mi radzili bym użył utf-8 ale nie czyta mi wtedy pl znaków


(manieKMP) #14

Przy menu pionowym menu, rozwijanym również pionowo lepiej żeby rozwijanie wykonywało się po kliknięciu...

Przykład: http://jsfiddle.net/XgYc9/1/ (w razie jakby jsfiddle nie prądził, tu masz kod... zapisz jako plik html i odpal w przeglądarce)

A kodowanie samego pliku ustawiałeś na utf-8 (z lub bez bom)? Może masz go ustawionego na ansi i w tym tkwi problem.

Co do facebook'a, nie za bardzo się znam na ichnich "pierdółkach", społecznościówkę tą omijam szerokim łukiem i blokuję "całe" ustrojstwo fb (jest dla mnie jak tragiczna parodia dowcipu o Jelcynie, "gdzie nie zajrzysz, tam facebook... aż strach otwierać lodówkę" :wink:).

Ale jak nie masz większych problemów z angielskim, to możesz spróbować z ichnim generatorem tego przycisku, jest tutaj (poustawiaj co tam potrzebujesz, a na koniec kliknij w "Get code"). Z tego co zrozumiałem, to aby guzik (XFBML) poprawnie działał, potrzeba jest skopiowania kodu js gdzieś w obrębie body (to samo tyczy się js sdk, co na podanej przez Ciebie stronie zostało napisane), a kod samego guzika tam, gdzie ma się wyświetlić.


(kurzel131) #15

Nic ci na to nie poradzę, żyjemy w czasach gdy kontakt utrzymujesz przez portale społecznościowe, jednak fejs jest normalny w porównaniu do ask.fm. Wtyczka działa co do kodowania nie wiem użyłem zwyczajnie kodu dla html po średniku dałem spacje.

Hmm a jak z resztą? menu sprawdzę jak tylko pododaje tłumaczenie do stron.


(manieKMP) #16

Jeżeli pliki masz w xhtml-u to masz błąd, ponieważ taki zapis jest dla html lub xhtml jako html (rodzaj można w sumie określić po deklaracji docktype, zaraz za -//W3C//DTD jest napisane "HTML", albo "XHTML", jak również w adresie na końcu...).

Dla xhtml zapis powinien mieć ukośnik:

A co do kodowania pliku, edytor którym grzebiesz w plikach powinien podawać tobie jakie kodowanie ma plik, np. N++ taką informację pokazuje w "belce" na dole okna, po jej prawej stronie.


(kurzel131) #17

Wiem ,że różnica to tylko ten ukośnik no i spacja po średniku; strony mam w html pisane beż żadnych generatorów żebym miał doctype do szkoły stosuje taki sam schemat małe znaczniki tekst i, używam keda czegoś takiego nie widziałem ale zobaczę dziś.

//nie mam czegoś takiego.


(Gerard Zurek) #18

Kolego kurzel,

Trochę późno tu wchodze, ale po kliknieciu "Wejdź" (po 1. słabo widoczne, po 2. jeszcze gorzej widoczne...), przechodzi na stronę:

http://muonlinechronology.eu/poczatek.html

która nei istnieje...

Mam błąd 404 (Not Found On Server)...

Napraw szybko... :wink:


(kurzel131) #19

Trwają prace na serwerze i problem był w dużej literze jako nazwa strony, generalnie stronę omawiam na pw z obywatelem manieKMP, jak skończę index powrócę do starego stylu do momentu aktualiacji.

on nazwał z małej ja mam z dużej, na razie linkowanie jest po staremu i wszystko śmiga zaraz obrobię dalej index i zacznę menu.

Ale w razie czego podaj nazwę przeglądarki bo koleżanka i kolega z port/esp miał coś takiego i nie wiem czy linkowanie czy jakieś IE.

-- Dodane 03.11.2013 (N) 2:36 --

Zupdatowałem stronę, jak wygląda teraz?