Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>thanks to both of you, my website is working, I give the final code for beginners like me who could have the same needs...</p> <p>here's the function :</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#ulPhotos a').click(function() { var newSrc= $(this).find('img').attr('src').split("/"); bigPictureName = 'big'+newSrc[2]; $('#imageBig').attr("src", "images/photos/"+bigPictureName).hide(); $('#imageBig').fadeIn('fast'); var alt = $(this).find('img').attr('alt'); $('#legend').html(alt); }); }); &lt;/script&gt; </code></pre> <p>here are the html elements : </p> <pre><code> &lt;ul id="ulPhotos"&gt; &lt;li&gt;&lt;a href="#centre"&gt;&lt;img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="&lt;em&gt;La Reine de la Nuit&lt;/em&gt; au Comedia"/&gt;&lt;/a&gt; &lt;a href="#centre"&gt;&lt;img src="images/photos/03.jpg" title="Manuelita, La Périchole à l&amp;rsquo;Opéra Comique" alt="Manuelita, &lt;em&gt;La Périchole&lt;/em&gt; à l&amp;#8217;Opéra Comique" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#centre" &gt;&lt;img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /&gt;&lt;/a&gt; </code></pre> <p>I used the alt attribute to append the legends so as to be able to add some html tags like &#60;em &#62; because the title appears when you hover your mouse on the thumbnails, and I didn't want people to see strange tags for them... </p> <p>sometimes, it's a little slow when you click very fast it can stay on the previous photo for a little while at first try, maybe because I didn't use a CDN to put the minified version of jquery (I read such an advice), don't know, I'm truly a beginner, but it's nothing serious anyway... </p> <p>by the way, the page is here..<a href="http://www.marion-baglan.net/photos.htm" rel="nofollow noreferrer">http://www.marion-baglan.net/photos.htm</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload