Search the Community
Showing results for tags 'caption'.
Found 4 results
-
Can someone help me try to figure out the proper HTML and CSS to both align images side by side AND put a sliding caption overlay on each image that slides up from the bottom? I'm using the following as references: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slidebottom Thank you!
-
Hello, captions need to appear below each form-submitted URL image in tile fashion on the page. I'm trying various things here and it's not happening. Live example here. Thanks in advance to team W3. <!DOCTYPE html> <html> <head> <title>appendChild Gallery</title> <style> body { font-family: Sans-Serif; font-size: medium; padding: 20px; } caption: { caption-side: bottom; } </style> </head> <body> <form action="#"> URL: <input type="text" name="image" id="idImage" value="" onClick="this.select();"/> <br><br> Description: <input type="text" name="des" id="idDes" value="" onClick="this.select();"/> <br><br> <input type="button" id="btn" name="submit" value="Load" /> <br><br> </form> <script> document.getElementById('btn').onclick = function() { //image var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val, img.src = src; document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; img.style.float = "left"; img.style.margin = "0px, 50px"; //description: this is the part that needs help. var valDes = document.getElementById('idDes').value; var des = document.createElement('P'); //also tried 'CAPTION' per specs src = valDes, des.src = src; //valDes.body.appendChild(des); //error "is not a function" ?? //des.setAttribute('label', valDes); //des.setAttribute('style', 'width: 150px;'); //document.getElementById("description").appendChild(des); var tex = document.createTextNode(valDes); description.appendChild(tex); description.style.display = 'inline-block'; //description.style.position = 'absolute'; des.style.float = 'left'; des.style.width = "150px"; des.style.height = "160px"; des.style.padding = "10px"; /* integrate localStorage localStorage.setImage('idDes', valDes); localStorage.setImage("idImage", val); imgStore = localStorage.getImage("idImage"); desStore = localStorage.getImage("idDes"); img1 = document.createElement('img1'); img1.src = imgStore; //stored image //desStore.src = desStore; document.body.appendChild(img1); document.getElementById('caption2').innerHTML = document.getElementById('desStore'); */ } </script> <p id="description"></p> </body> </html>
-
I want to display the time period 1887-1920 right below the image. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <title>Tribute Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container-fluid"> <div class="well"> <div class="main"> <h1 class="text-primary">Srinivas Ramanujan</h1> <h3 id="subhead">The man who knew infinity</h3> <figure> <img class="img-responsive img-rounded img-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Srinivasa_Ramanujan_-_OPC_-_1.jpg" alt="Srinivas Ramanujan" width="22%" height="28%"> <figcaption>1887-1920</figcaption> </figure> <p id="para1"> <h3 class="head2">Why he is famous?</h3> <ul> <li>He is recognised as one of the greatest mathematicians of his time, but had almost no formal training in math.</li> <li>His infinite series for pi was one of his most celebrated findings.</li> <li>He was the second Indian to be inducted as a Fellow of the Royal Society.</li> <li>He compiled 3,900 results (mostly identities and equations), before he lost his life at the age of 32. </li> <li> A follower of his family goddess Mahalakshmi, Ramanujan credited her for his abilities.</li> <li>His house in Kumbakonam is now maintained as the Srinivasa Ramanujan International Monument.</li> <li>There is also a museum dedicated to telling Ramanujan’s life story.</li> </ul> <h3 class="head2">Life of S. Ramanujan-</h3></p> <p id="para2"> Born in South India, Ramanujan was a promising student, winning academic prizes in high school. But at age 16 his life took a decisive turn after he obtained a book titled A Synopsis of Elementary Results in Pure and Applied Mathematics. The book was simply a compilation of thousands of mathematical results, most set down with little or no indication of proof. It was in no sense a mathematical classic; rather, it was written as an aid to coaching English mathematics students facing the notoriously difficult Tripos examination, which involved a great deal of wholesale memorization. But in Ramanujan it inspired a burst of feverish mathematical activity, as he worked through the book's results and beyond. Unfortunately, his total immersion in mathematics was disastrous for Ramanujan's academic career: ignoring all his other subjects, he repeatedly failed his college exams.As a college dropout from a poor family, Ramanujan's position was precarious. He lived off the charity of friends, filling notebooks with mathematical discoveries and seeking patrons to support his work. Finally he met with modest success when the Indian mathematician Ramachandra Rao provided him with first a modest subsidy, and later a clerkship at the Madras Port Trust. During this period Ramanujan had his first paper published, a 17-page work on Bernoulli numbers that appeared in 1911 in the Journal of the Indian Mathematical Society. Still no one was quite sure if Ramanujan was a real genius or a crank. With the encouragement of friends, he wrote to mathematicians in Cambridge seeking validation of his work. Twice he wrote with no response; on the third try, he found Hardy.<br>Hardy wrote enthusiastically back to Ramanujan, and Hardy's stamp of approval improved Ramanujan's status almost immediately. Ramanujan was named a research scholar at the University of Madras, receiving double his clerk's salary and required only to submit quarterly reports on his work. But Hardy was determined that Ramanujan be brought to England. Ramanujan's mother resisted at first--high-caste Indians shunned travel to foreign lands--but finally gave in, ostensibly after a vision. In March 1914, Ramanujan boarded a steamer for England. Ramanujan's arrival at Cambridge was the beginning of a very successful five-year collaboration with Hardy. In some ways the two made an odd pair: Hardy was a great exponent of rigor in analysis, while Ramanujan's results were (as Hardy put it) <em>"arrived at by a process of mingled argument, intuition, and induction, of which he was entirely unable to give any coherent account".</em> Hardy did his best to fill in the gaps in Ramanujan's education without discouraging him. He was amazed by Ramanujan's uncanny formal intuition in manipulating infinite series, continued fractions, and the like. <br><br> </p> <br> <blockquote> I have never met his equal, and can compare him only with Euler or Jacobi." <br> <span>-Hardy</span> </blockquote> <p id="foot">Read more about <em>S. Ramanujan:</em> <a href="https://www.usna.edu/Users/math/meh/ramanujan.html" target="_blank"> <button title="Opens in new tab" type="submit" class="btn btn-primary">Here</button></a> </p> </div> <footer> © writer 2017</footer> </div> </div> </body> </html> CSS:- body{ line-height: 200%; } .well{ margin:5% 6% 5% 6%; } h1{ text-shadow: 2px 2px 3px; text-align: left; font-family: Algerian; } #subhead{ text-align: left; font-style: italic; text-shadow: 0 0 2px; font-family: "Comic Sans MS"; border-bottom: 2px solid gray; padding-bottom: 2%; } .head2{ text-shadow: 0 0 1px; } figure{ margin: 2%; display: inline; } img{ float: left; display: inline; } p{ text-align: justify; margin: 0 0 0 5px; } ul{ margin: 0 5% 5% 5%; padding-left: 20%; } li{ margin-left: 9%; } blockquote{ margin-left: 20%; } span{ margin-left: 70%; } #foot{ margin: 10% 0 1% 75%; } footer{ margin:3% 0 0 40%; } .main{ border-bottom: 2px solid gray; }
-
Hi, I'm using the following gallery but I want to display some caption below the active image. Is it possible to add some code to keep using that one or is much easy search another one? Thanks! <div style="position: relative;"><ul id="gallery"><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_nou.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/2.JPG" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/esperando.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/pajaros%20en%20la%20cabeza.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_4387.JPG" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/pezes.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/IMG_44881.jpg" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/metamorfosis.png" /></li><li><img alt="" src="https://dl.dropboxusercontent.com/u/17376443/ingr%C3%A0vides/img.jpg" /></li></ul></div> var gal = {init : function() {if (!document.getElementById || !document.createElement || !document.appendChild) return false;if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';var li = document.getElementById('jgal').getElementsByTagName('li');li[0].className = 'active';for (i=0; i<li.length; i++) {li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';li[i].title = li[i].getElementsByTagName('img')[0].alt;gal.addEvent(li[i],'click',function() {var im = document.getElementById('jgal').getElementsByTagName('li');for (j=0; j<im.length; j++) {im[j].className = '';}this.className = 'active';});}},addEvent : function(obj, type, fn) {if (obj.addEventListener) {obj.addEventListener(type, fn, false);}else if (obj.attachEvent) {obj["e"+type+fn] = fn;obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }obj.attachEvent("on"+type, obj[type+fn]);}}}gal.addEvent(window,'load', function() {gal.init();}); /* =Gallery-----------------------------------------------*/#gallery { display: none; }#jgal {padding:0;margin:0px;list-style: none; width: 160px; }#jgal li { opacity: .5;filter:alpha(opacity=50); float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; }#jgal li img { position: absolute; top: 0px; left: 160px; display: none; }#jgal li.active img { display: block; width:470px; }#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
