Odpowiedzi do tego tematu: 13

[adulny]

mam stronę zrobioną w kreatorze K ostatnio znalazłem ciekawą stronę o kodach jQuery ale mimo tego że znalazłem na forum dwa wątki na ten temat nie potrafię tego ugryść może ktoś jest w stanie opisać jak wykonać krok po kroku taki efekt jak np tym linku http://flowplayer.or...tabs/skins.html może rozpracowanie jednego z kodów pozwoli mi poznać zasadę działania pozostałych.

Jakie pliki muszę wgrać na serwer jakie zmiany nanieść na stronie ktoś kiedyś opisał coś podobnego o innych kodach ale czy można mieć na swojej stronie zarówno kody jQuery jak i Fancy Boxa jak to pogodzić ?

pozdrawiam Andrzej

[krzysiek]

W zasadzie wszystko masz opisane na tej stronie która podałeś.

jQuery to biblioteka na której jest zbudowany m.in. wymieniony przez Ciebie FancyBox także tu raczej nie ma się co gryźć.
Wszystkie pliki potrzebne do pobrania znajdziesz tutaj: http://flowplayer.or...load/index.html

To gdzie je skopiujesz na koncie to Twoja decyzja, możesz np. w katalogu public_html utworzyć sobie podkatalog js i do niego wrzucić bibliotekę. Potem tylko trzeba w kodzie wpisać właściwą ścieżkę do tej biblioteki żeby przeglądarka mogła ją sobie załadować przy odpalaniu strony. A potem lecisz z konfiguracją jak na przykładach: http://flowplayer.or...tabs/index.html

<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>pane 1 content</div>
<div>pane 2 content</div>
<div>pane 3 content</div>
</div>

itd.. wszystko zależy jakie efektu chcesz osiągnąć, możliwości masz tu dużo, a dokumentacja jest na tej stronie całkiem przyzwoicie zrobiona.

[adulny]

ale możesz mi powiedzieć co mam przekopiować na swój serwer ściągnąlem plik jquery-1.6.2.min.js wgrałem na swój serwer. Teraz tam są namiary na bibliotekę. Gdzie mam umięścić ten odnośnik do tego katalogu czy w tym 3kroku podczas tworzenia strony czy na konkretnej stronie ?
Jak umieściać kody java script czy mam to tylko przekopiować na stronę czy jakoś montować ?

[krzysiek]

Możesz wstawić na konkretnej podstronie (krok 5) i sprawdzić jak zadziała. Oczywiście kod wstawiasz wchodząc w zakładkę Źródło lub w kroku 5 wybierając do edycji ikonkę HTML.

Kod JS kopiujesz i wklejasz do źródła strony musisz tylko w tym kodzie tam gdzie są odwołania do plików .js podać poprawne ścieżki do nich.

[adulny]

czy mógłbyś mi krok po kroku napisać na konkretnym przykładzie (np tym http://flowplayer.or...tabs/skins.html) jakie pliki mam umieścić na stronie w jakim miejscu gdzie umieszczać konkretne kody nie mogę sobie z tym poradzić - uważam że dokładny opis pomoże wielu kolegom i koleżankom opanować te skrypty

[krzysiek]

To jakie pliki masz umieścić znajdziesz we wspomnianej w dokumentacji
Jeśli nie bardzo wiesz co gdzie skopiować, możesz użyć biblioteki odwołując się do zewnętrznych zasobów np. wklejając do źródła strony coś takiego:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

Jednak tak czy siak zapewne będziesz potrzebował umieścić pliki z pluginami w zależności od tego co będziesz chciał zrobić więc pewnie nie uciekniesz od tego.
Musisz je pobrać ze strony: http://flowplayer.or...load/index.html
Potem skopiować do katalogu public_html, sugeruję utworzyć sobie podkatalog o nazwie js i do niego skopiować pliki. potem musisz dodać do nich odwołania w kodzie swojej strony, czy to będzie w kroku 5 w zakładce Źródła, czy w kroku 3 w edycji górnej sekcji, czy pobierzesz szablon i umieścisz kod bezpośrednio w jego kodzie w sekcji HEAD, raczej nie będzie miało większego znaczenia w każdym razie masz te trzy możliwości musisz po prostu sprawdzić, która z nich będzie w Twoim przypadku najlepsza. Kod jaki wstawiasz to przykładowo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tabs.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<script src="js/another-plugin.js" type="text/javascript"></script>

Potem pozostaje Ci lecieć dalej z dokumentacją w zależności od tego co konkretnie chcesz zrobić, np: http://flowplayer.or...tabs/index.html
Masz tu wszystko po kolei opisane z przykładowymi kodami które możesz wkleić i ewentualnie przerobić pod swoje potrzeby.

[malcolm]

Najpierw musisz znać podstawy, np. w który folder na serwerze kieruje Twoja strona, bo bez podstaw ani rusz.
Odwiedź jakiś kurs HTML np. http://www.kurshtml....ml/zielony.html . Jak już załapiesz trochę wiedzy, wejdź na tą stronę http://flowplayer.or.../tabs/skin4.htm i zobacz w źródło jej, jak jest wszystko poukładane, i zapewne zrozumiesz co do czego służy i np że taki kod jest Ci potrzebny:

<script src="[url="view-source:http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"]http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js[/url]"></script>	<style>	/* navigation */	#nav {		background:#ddd url(http://static.flowplayer.org/img/global/gradient/h300_reverse.png);		border-bottom:1px solid #CCCCCC;		height:156px;			width:745px;	}		#nav ul {			width:600px;		margin:0 auto;		}		#nav li {			border-right:1px solid #ddd;		float:left;		padding-left:1px;		width:175px;		list-style-type:none;		text-align:center;		margin-top:0px;	}		#nav a {		color:#333333;		display:block;		padding:17px;		position:relative;		word-spacing:-2px;		font-size:11px;				height:122px;		text-decoration:none;	}			#nav a.current {		background:url(http://static.flowplayer.org/tools/img/tabs/down_large.jpg);		}		#nav img {		background-color:#fff;		border:1px solid #ccc;		margin:3px 0 5px 27px;		padding:4px;				display:block;	}		#nav strong {		display:block;				font-size:13px;	}		/* panes */	#panes {		background:#fff url(http://static.flowplayer.org/img/global/gradient/h300_reverse.png) repeat scroll 0 0;		border-color:#ccc;		border-style:solid;		border-width:1px 1px 0;		width:743px;			height:255px;		margin-bottom:-20px;		padding-bottom:20px;				/* must be relative so the individual panes can be absolutely positioned */		position:relative;	}		/* crossfading effect needs absolute positioning from the elements */	#panes div {		display:none;				position:absolute;		top:20px;		left:20px;		font-size:13px;		color:#444;			width:650px; 	}		#panes img {		float:left;		margin-right:20px;			}		#panes p.more {		color:#000;		font-weight:bold;		font-size:13px;	}		#panes h3 {		margin:0 0 -5px 0;		font-size:22px;		font-weight:normal;	}		.overlay {		display:none;		width:500px;		padding:20px;		background-color:#ddd;	}	</style><!-- tab panes --><div id="panes">	<div>		<img src="[url="view-source:http://farm1.static.flickr.com/114/299183878_4feac12b04_m.jpg"]http://farm1.static.flickr.com/114/299183878_4feac12b04_m.jpg[/url]"  />						<h3>Seagram Building</h3>		<p class="more">			The Seagram Building is a skyscraper in New York City, located at 375 Park Avenue, between 52nd Street and 53rd Street in Midtown Manhattan. It was designed by the German architect Ludwig Mies van der Rohe, in collaboration with the American Philip Johnson.		</p>				<p>			It is 515 feet tall with 38 stories. Severud Associates were the structural engineering consultants. It stands as one of the finest examples of the functionalist aesthetic and a masterpiece of corporate modernism. It was designed as the headquarters for the Canadian distillers Joseph E. Seagram's &amp; Sons, thanks to the foresight of Phyllis Lambert, the daughter of Samuel Bronfman, Seagram's CEO.		</p>	</div>		<div>		<img src="[url="view-source:http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_m.jpg"]http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_m.jpg[/url]"  />				<h3>Barcelona Pavilion</h3>				<p class="more">			The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion for the 1929 International Exposition in Barcelona, Spain. This building was used for the official opening of the German section of the exhibition.		</p>				<p>			Mies was offered the commission of this building in 1928 after his successful administration of the 1927 Werkbund exhibition in Stuttgart. The German Reich entrusted Mies with the artistic management and erection of not only the Barcelona Pavilion, but for the buildings for all the German sections at the 1929 Universal Exhibition.		</p>			</div>		<div>   		<img src="[url="view-source:http://farm1.static.flickr.com/40/122343298_22333fb8e3_m.jpg"]http://farm1.static.flickr.com/40/122343298_22333fb8e3_m.jpg[/url]" />				<h3>Neue Nationalgalerie</h3>				<p class="more">			Neue Nationalgalerie at the Kulturforum is a museum for classical modern art in Berlin, with main focus on early the 20th century. It is part of the German National Gallery. The museum building and its sculpture garden were designed by Ludwig Mies van der Rohe and opened in 1968.		</p>				<p>			The collection features a number of unique highlights of modern 20th century art. Particularly well represented are Cubism, Expressionism, the Bauhaus and Surrealism. The collection owns masterpieces of artists like Pablo Picasso, Ernst Ludwig Kirchner, Joan Mir&#243;, Wassily Kandinsky and Barnett Newman.		</p>					</div></div><br clear="all" /><!-- navigator --><div id="nav">	<ul>				<li>			<a href="[url="view-source:http://flowplayer.org/tools/demos/tabs/skin4.htm#1"]#1[/url]">				<img src="[url="view-source:http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"]http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg[/url]"/>				<strong>Seagram Building</strong>				New York City, USA			</a>		</li>		<li>			<a href="[url="view-source:http://flowplayer.org/tools/demos/tabs/skin4.htm#2"]#2[/url]">				<img src="[url="view-source:http://farm1.static.flickr.com/3624/3323893148_8318838fbd_s.jpg"]http://farm1.static.flickr.com/3624/3323893148_8318838fbd_s.jpg[/url]"/>				<strong>Barcelona Pavilion</strong>				Barcelona, Spain			</a>		</li>		<li>			<a href="[url="view-source:http://flowplayer.org/tools/demos/tabs/skin4.htm#3"]#3[/url]">				<img src="[url="view-source:http://farm1.static.flickr.com/40/122343298_22333fb8e3_s.jpg"]http://farm1.static.flickr.com/40/122343298_22333fb8e3_s.jpg[/url]" />				<strong>National Gallery</strong>				Berlin, Germany			</a>		</li>	</ul></div><br clear="all" /><script>$(function() {			$("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});});</script>

Skopiuj ten kod na swoją stronę, wklej w źródło edycji i zobacz jak pięknie działa, później powstawiaj sobie swoje obrazki.


P.S. Kto mi ukradł mój awatar?


P.S.nr2 Krzysztof jak zwykle pierwszy

[adulny]

coś nie działa podaje link http://www.parisel.pl/proba.php skopiowałem ten kod na moją stronę i nadal nic

[malcolm]

Może dlatego że na tej stronie masz jeszcze 3 razy Jquery + fancybox i kto tam wie co jeszcze?
Kod jest zły bo forum dodaje jakieś dziwne znaczniki.

Może teraz:

Cytat

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script><style> /* navigation */ #nav { background:#ddd url(http://static.flowpl...300_reverse.png); border-bottom:1px solid #CCCCCC; height:156px; width:745px; } #nav ul { width:600px; margin:0 auto; } #nav li { border-right:1px solid #ddd; float:left; padding-left:1px; width:175px; list-style-type:none; text-align:center; margin-top:0px; } #nav a { color:#333333; display:block; padding:17px; position:relative; word-spacing:-2px; font-size:11px; height:122px; text-decoration:none; } #nav a.current { background:url(http://static.flowpl.../down_large.jpg); } #nav img { background-color:#fff; border:1px solid #ccc; margin:3px 0 5px 27px; padding:4px; display:block; } #nav strong { display:block; font-size:13px; } /* panes */ #panes { background:#fff url(http://static.flowpl...300_reverse.png) repeat scroll 0 0; border-color:#ccc; border-style:solid; border-width:1px 1px 0; width:743px; height:255px; margin-bottom:-20px; padding-bottom:20px; /* must be relative so the individual panes can be absolutely positioned */ position:relative; } /* crossfading effect needs absolute positioning from the elements */ #panes div { display:none; position:absolute; top:20px; left:20px; font-size:13px; color:#444; width:650px; } #panes img { float:left; margin-right:20px; } #panes p.more { color:#000; font-weight:bold; font-size:13px; } #panes h3 { margin:0 0 -5px 0; font-size:22px; font-weight:normal; } .overlay { display:none; width:500px; padding:20px; background-color:#ddd; } </style><!-- tab panes --><div id="panes"> <div> <img src="http://farm1.static.flickr.com/114/299183878_4feac12b04_m.jpg" /> <h3>Seagram Building</h3> <p class="more"> The Seagram Building is a skyscraper in New York City, located at 375 Park Avenue, between 52nd Street and 53rd Street in Midtown Manhattan. It was designed by the German architect Ludwig Mies van der Rohe, in collaboration with the American Philip Johnson. </p> <p> It is 515 feet tall with 38 stories. Severud Associates were the structural engineering consultants. It stands as one of the finest examples of the functionalist aesthetic and a masterpiece of corporate modernism. It was designed as the headquarters for the Canadian distillers Joseph E. Seagram's &amp; Sons, thanks to the foresight of Phyllis Lambert, the daughter of Samuel Bronfman, Seagram's CEO. </p> </div> <div> <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_m.jpg" /> <h3>Barcelona Pavilion</h3> <p class="more"> The Barcelona Pavilion, designed by Ludwig Mies van der Rohe, was the German Pavilion for the 1929 International Exposition in Barcelona, Spain. This building was used for the official opening of the German section of the exhibition. </p> <p> Mies was offered the commission of this building in 1928 after his successful administration of the 1927 Werkbund exhibition in Stuttgart. The German Reich entrusted Mies with the artistic management and erection of not only the Barcelona Pavilion, but for the buildings for all the German sections at the 1929 Universal Exhibition. </p> </div> <div> <img src="http://farm1.static.flickr.com/40/122343298_22333fb8e3_m.jpg" /> <h3>Neue Nationalgalerie</h3> <p class="more"> Neue Nationalgalerie at the Kulturforum is a museum for classical modern art in Berlin, with main focus on early the 20th century. It is part of the German National Gallery. The museum building and its sculpture garden were designed by Ludwig Mies van der Rohe and opened in 1968. </p> <p> The collection features a number of unique highlights of modern 20th century art. Particularly well represented are Cubism, Expressionism, the Bauhaus and Surrealism. The collection owns masterpieces of artists like Pablo Picasso, Ernst Ludwig Kirchner, Joan Miró, Wassily Kandinsky and Barnett Newman. </p> </div></div><br clear="all" /><!-- navigator --><div id="nav"> <ul> <li> <a href="#1"> <img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/> <strong>Seagram Building</strong> New York City, USA </a> </li> <li> <a href="#2"> <img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_s.jpg"/> <strong>Barcelona Pavilion</strong> Barcelona, Spain </a> </li> <li> <a href="#3"> <img src="http://farm1.static.flickr.com/40/122343298_22333fb8e3_s.jpg" /> <strong>National Gallery</strong> Berlin, Germany </a> </li> </ul></div><br clear="all" /><script>$(function() { $("#nav ul").tabs("#panes > div", {effect: 'fade', fadeOutSpeed: 400});});</script>

[krzysiek]

Najlepiej wstawiając kod najpierw kliknij malcolm na ikonkę dla kodu w edytorze i wklej kod do okna jakie się pojawi, jak wklejasz na żywca z innej strony to leci z całym formatowaniem.

[malcolm]

Kod był ze źródła strony o formatowaniu nie ma mowy dodało znaczniki bbcode z forum [url=...]

[krzysiek]

Jak wstawisz tak jak napisałem to nie będzie takiego efektu.

[adulny]

nadal nie moge sobie z tym poradzić zobaczcie http://lukowsal.s20.o12.pl/proba1.php na stronie mam odnosniki do js i do css ale nadal nic nie działa nie wiem co robię nie tak. Pomóżcie bo fajnie by było mieć coś takiego na stronie

[niw]

Witam żeby nie zakładać nowego tematu napiszę tutaj.
Mam stronkę opartą o WP na serwerze serii K - http://wedkarstwo-row.pl

Zainstalowałem wtyczkę opartą o biblioteki jQuery ale niestety coś jest nie tak i wygląda na to jak by nie czytało bibliotek z podanej lokalizacji w folderze pluginu. Próbowałem zainstalować tez biblioteki i trochę pomieszać w kodzie ale za cienki bolek jestem na to.

Tak więc czy ktoś może mi powiedzieć co zrobić żeby stronka pod podanym adresem posiadała działający like button do facebooka tak jak na serwerze testowym http://intissima.cba.pl (ten sam szablon odpalony do celów testowych)

Aha ta wtyczka to be-it-facebook-sidetab.1.1.1.... jeśli to istotne

Byłbym wdzięczny za pomoc przy rozwiązaniu problemu