jQuery , dar cu functionalitate ca in stilul Ebay

Aici postaţi orice este legat de tehnologiile "client side". HTML, HTML5, XHTML, CSS, CSS3, XML, Standarde
Manual JS: http://www.phpromania.net/jsmanual/index.html

Moderatori: eyecon, Moderatori

jmthiphop
PHPRomania Supporter
Mesaje: 8
Membru din: Mar Mar 29, 2011 2:56 pm

jQuery , dar cu functionalitate ca in stilul Ebay

Mesajde jmthiphop » Mar Mar 29, 2011 3:05 pm

Buna ziua,

am si eu nevoie de un mic ajutor. vreau sa pun la galeria foto thumbnails ca in exemplul :

atunci cand se da click pe poza, sa apara thumbnails jos sau in dreapta ca in exmplul din link.

folosesc jquery, este javrascript ca si exemplul de pe ebay, cred ca ar trebui sa functioneze ce cer.

multumesc frumos!



jmthiphop
PHPRomania Supporter
Mesaje: 8
Membru din: Mar Mar 29, 2011 2:56 pm

Mesajde jmthiphop » Mar Mar 29, 2011 3:06 pm

cgi (punct) ebay (punct) com/Sony-Playstation-3-Slim-160-GB-Black-FREE-GAME-NEW-/260746526276?pt=Video_Games&hash=item3cb5b43e44#ht_681wt_1140

Avatar utilizator
vectorialpx
Senior Member
Mesaje: 4830
Membru din: Mar Mar 01, 2005 9:48 am
Localitate: Bucuresti
Contact:

Mesajde vectorialpx » Mie Mar 30, 2011 4:09 pm

pai, zi-ne ce nu se leaga.

Ca idee, e o lista de imagini mici care la click schimba src-ul unei imagini mai mari (intr-un src default), la mouse over schimba src-ul in imaginea curenta iar la mouseout revine la src-ul default, setat la click.

jmthiphop
PHPRomania Supporter
Mesaje: 8
Membru din: Mar Mar 29, 2011 2:56 pm

Mesajde jmthiphop » Mie Mar 30, 2011 4:37 pm

exact acea functie care o explici. pai eu am integrat jquery in html, nu in php, problema este ca nu stiu cum sa fac, ca in jquery sa apara thumb-urile, care la click sau mouse over sa schimbe poza sursa cu o alta.

multumesc!

Avatar utilizator
vectorialpx
Senior Member
Mesaje: 4830
Membru din: Mar Mar 01, 2005 9:48 am
Localitate: Bucuresti
Contact:

Mesajde vectorialpx » Mie Mar 30, 2011 11:18 pm

Pai... n-am chef/timp sa-ti scriu tot codul (asa cum probabil ti-ai dori).
Scrie ce ai facut tu si de ce te-ai lovit, sau asteapta pe cineva care are timp mult.

asa se schimba src-ul imaginii
function changeImage(id, src) { $('#'+id).attr('src',src); }
la click apelezi defaultImage = 'imagineDefault.jpg' + functia
la mouseover apelezi changeImage('mainImage', 'imagineCurenta.jpg')
la mouseout apelezi changeImage('mainImage', defaultImage)

jmthiphop
PHPRomania Supporter
Mesaje: 8
Membru din: Mar Mar 29, 2011 2:56 pm

Mesajde jmthiphop » Vin Apr 01, 2011 8:11 pm

altcineva, ar fi disponibil cateva minutele sa ma ajute ?

Avatar utilizator
vectorialpx
Senior Member
Mesaje: 4830
Membru din: Mar Mar 01, 2005 9:48 am
Localitate: Bucuresti
Contact:

Mesajde vectorialpx » Vin Apr 01, 2011 8:50 pm

http://www.google.com/search?q=jquery+gallery
=>
http://vandelaydesign.com/blog/web-deve ... galleries/
+ alte sute de astfel de site-uri. Ia una si o implemetezi si gate

jmthiphop
PHPRomania Supporter
Mesaje: 8
Membru din: Mar Mar 29, 2011 2:56 pm

Mesajde jmthiphop » Sâm Apr 02, 2011 1:42 pm

am incercat si nu vrea. nu stiu unde sa pun codul sa mearga.

eu am deja galeria creata cu jquery. se numeste "white lightbox". este o pagina cu poze si cand dau click pe oricare poza, poza se mareste, fundalul se face un alb semi transparent, iar poza marita este intr-un chenar cu efect "shadow". are un x sus pentru inchidere, iar in stanga si dreapta imaginii marite, sageti stanga si dreapta, pentru navigare intre poze. cum integrez ce mi0ai dat tu in imaginea mare deja existenta si jquery deja existent ?

cod html:

Cod: Selectaţi tot

      <div id="content" class="portfolio V container_12">
         <div class="grid_4 entry">
            <a class="white lightbox" rel="group" HREF="img/original/1.jpg" title="Pic.">
               <img SRC="image/thumbs/1.jpg" alt="" />
               bla</a>
            <br />
                <span>bla</span>
                <br />
            <span>bla </span>
         </div>


uite mai cauta cineva acelasi lucru
Hi.

I am looking for a version of lightbox that would allow the user to
click on a single reference image and when the "lightboxed" version
appears a strip of thumbnails would be available at the top or bottom
of that image. Thus, the user could navigate between images within the
lightbox by clicking on a different thumbnail.

If such beast exists a link would appreciated. Extensive Googling
hasn't turned up what I'm looking for at all.

TIA,
Laker


nu gasesc pe goolge nimic

Avatar utilizator
teachme
Senior Member
Mesaje: 550
Membru din: Mar Aug 17, 2010 11:52 am

Mesajde teachme » Sâm Apr 02, 2011 6:26 pm

Ca sa intelegi care e ideea cu mouseover si mouseout de care zicea V,
copiaza codul de mai jos in http://www.w3schools.com/jsref/tryit.as ... nmouseover

Cod: Selectaţi tot

<html>
<body>

<img src="http://media.musictoday.com/store/bands/840/images/splash/WalnutCreekDVD_234x91.gif"  name="mousetest" /><br/><br/>

<img src="image_w3default.gif" name="mousetest1" onMouseOver="document.images['mousetest'].src='image_w3default.gif'"
onMouseOut="document.images['mousetest'].src='http://media.musictoday.com/store/bands/840/images/splash/WalnutCreekDVD_234x91.gif'" width="96" height="40" />

<img src="image_w3default2.gif" name="mousetest2" onMouseOver="document.images['mousetest'].src='image_w3default2.gif'"
onMouseOut="document.images['mousetest'].src=imgsrc" width="96" height="40" />

<img src="http://technologizer.files.wordpress.com/2011/03/att.jpg?w=234&h=91" name="mousetest3" onMouseOver="document.images['mousetest'].src='http://technologizer.files.wordpress.com/2011/03/att.jpg?w=234&h=91'"
onMouseOut= "document.images['mousetest'].src='http://media.musictoday.com/store/bands/840/images/splash/WalnutCreekDVD_234x91.gif'" width="96" height="40" />

</body>
</html>


Mai multe informatii aici
http://www.w3schools.com/jsref/event_onmouseover.asp

jmthiphop
PHPRomania Supporter
Mesaje: 8
Membru din: Mar Mar 29, 2011 2:56 pm

Mesajde jmthiphop » Dum Apr 03, 2011 5:44 pm

merge perfect pe w3schools, si intr-un html blank in dreamweaver.

dar l-am pus aici in fancybox dar imi apare direct in galerie, ori eu vreau sa apara thumbnails-urile in poza mare executata. iar html este simplu oarecum mai ma descurc, insa nebuniile astea fancybox, jquery si lightbox, ma cam sperie ce cod au.

<div id="content" class="portfolio V container_12">
<div class="grid_4 entry">
<a class="white lightbox" rel="group" HREF="image/original/1.jpg" title="">
<img SRC="image/thumbs/1.jpg" alt="" />
bla</a>
<br />
<span>Description: bla bla</span>
<br />
<span>bla </span>
</div>


nu as putea sa il declar undeva sa imi incarce pozele ?

jmthiphop
PHPRomania Supporter
Mesaje: 8
Membru din: Mar Mar 29, 2011 2:56 pm

Mesajde jmthiphop » Mar Apr 05, 2011 4:57 pm

am rezolvat intr-un alt mod. multumesc din suflet la toti!


Înapoi la “HTML/JavaScript/CSS”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator