Search the Community

On the tutorial for an image gallery slideshow (https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp) the example starts with the first image enlarged. The code they provided doesn't apply that to my website, I have to select an image to enlarge it, is there something I can add? Thanks

The page in question is Here For the life of me, I cannot get rid of the bottom overhang. Any suggestions? I is it possible at all? <!-- THUMBNAIL --> <style> div.gallery { margin: 4px; float: left; width: 180px; } div.gallery:hover { box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, .2), 0 0px 0px 0 rgba(0, 0, 0, 0.2); } div.gallery img { width: 100%; height: auto; } </style>

-I am generating image gallery that suports different types of containers. ie 33% container,50%container and 100 % container. -if container is of type 33% percent then three containers will come in one row separated by verticle line and margin. I want to remove left margin of first container and right margin last container.-if container is of type 50% percent then two containers will come in one row separated by verticle line and margin. I want to remove left margin of first container and right margin other container. -if container is of type 100% percent then only one container is there and no need to remove margin.-Issue is that when multiple containers of this types are present in image gallery in any sequence then how predict which containers rignt margin and line separator has to remove. how to do this? following is xsl file: <xsl:when test="intLayoutType = 219"> <xsl:if test="intNum4 = 2"> <![CDATA[<div class=three_column]]> <xsl:if test="position() = 1"> <![CDATA[style=margin-left: 0px]]> </xsl:if> <xsl:if test="position() = last()"> <![CDATA[style=margin-right: 0px; border-right:none]]> </xsl:if> <xsl:if test="preceding-sibling::intNum4[1]=2 and preceding-sibling::intNum4[2]=2"> <![CDATA[style=margin-right: 0px; border-right:none]]> </xsl:if> <![CDATA[>]]> </xsl:if> <xsl:if test="intNum4 = 1"> <![CDATA[<div class=two_column]]> <xsl:if test="position() = 1"> <![CDATA[style=margin-left: 0px]]> </xsl:if> <xsl:if test="position() = last() "> <![CDATA[style=margin-right: 0px; border-right: none]]> </xsl:if> <xsl:if test="position() mod 2 = 0"> <![CDATA[style=margin-right: 0px; border-right: none]]> </xsl:if> <![CDATA[>]]> </xsl:if> <xsl:if test="intNum4 = 0"> <![CDATA[<div class="one_column">]]> </xsl:if> <WD:ContentController MenuPosition="Content" ResourceFamily="CNT" runat="server"> <xsl:attribute name="contentId"> <xsl:value-of select="autContentId"/> </xsl:attribute> <ContentTemplate> <!--for 33% container and 50% container--> <xsl:if test="intNum4 = 2 or intNum4 = 1"> <![CDATA[<div class="gallery_margin_right">]]> <xsl:if test="string-length(vchTitle) > 0"> <![CDATA[<h1 class="gallery_title">]]> <xsl:value-of select="vchTitle" /> <![CDATA[</h1>]]> </xsl:if> <!--Website display--> <xsl:if test="string-length(vchImageUrl1) > 0"> <![CDATA[<asp:Image runat=server" class="gallery_img" ImageUrl=]]><xsl:value-of select="vchImageUrl1" /> <![CDATA[" ToolTip="]]><xsl:value-of select="vchImageAltText1" /> <![CDATA[" AlternateText="]]><xsl:value-of select="vchImageAltText1" /> <![CDATA[" />]]> </xsl:if> <!--<div> <xsl:value-of select="vchTxt1" /> </div>--> <![CDATA[<div class="gallery_description">]]><xsl:value-of select="vchTxt1" /> <![CDATA[</div>]]> <xsl:if test="string-length(vchTxt4) > 0"> <![CDATA[<p class="gallery_plink">]]> <![CDATA[<asp:HyperLink runat=server" class="gallery_link" Text=]]><xsl:value-of select="vchTxt4" /> <![CDATA[" NavigateUrl="]]><xsl:value-of select="vchTxt6" /> <![CDATA[" ToolTip="]]><xsl:value-of select="vchTxt5" /> <![CDATA[" Target="]]><xsl:value-of select="vchTxt9" /> <![CDATA[" />]]> <![CDATA[</p>]]> </xsl:if> <xsl:if test="string-length(vchAscxTagName) > 0"> <![CDATA[<wd:]]><xsl:value-of select="vchAscxTagName" /><![CDATA[ id=imageStrip" class="gallery_imageStrip" runat="server" ContentId=]]><xsl:value-of select="autContentId" /><![CDATA[" />]]> </xsl:if> <![CDATA[</div>]]> </xsl:if> <!--for 100 % container--> <xsl:if test="intNum4 = 0"> <!--Website display--> <![CDATA[<div style="clear: both;">]]> <![CDATA[</div>]]> <![CDATA[<div>]]> <xsl:if test="string-length(vchImageUrl1) > 0"> <![CDATA[<div class="gallery_imgalign_one_column">]]> <![CDATA[<asp:Image runat=server" class="gallery_img" ImageUrl=]]><xsl:value-of select="vchImageUrl1" /> <![CDATA[" ToolTip="]]><xsl:value-of select="vchImageAltText1" /> <![CDATA[" AlternateText="]]><xsl:value-of select="vchImageAltText1" /> <![CDATA[" />]]> <![CDATA[</div>]]> </xsl:if> <![CDATA[<div class="gallery_one_column">]]> <xsl:if test="string-length(vchTitle) > 0"> <![CDATA[<h1 class="gallery_title_one_column">]]> <xsl:value-of select="vchTitle" /> <![CDATA[</h1>]]> </xsl:if> <![CDATA[<div class="gallery_description_one_column">]]><xsl:value-of select="vchTxt1" /> <![CDATA[</div>]]> <xsl:if test="string-length(vchTxt4) > 0"> <![CDATA[<p class="gallery_plink_one_column">]]> <![CDATA[<asp:HyperLink runat=server" class="gallery_link" Text=]]><xsl:value-of select="vchTxt4" /> <![CDATA[" NavigateUrl="]]><xsl:value-of select="vchTxt6" /> <![CDATA[" ToolTip="]]><xsl:value-of select="vchTxt5" /> <![CDATA[" Target="]]><xsl:value-of select="vchTxt9" /> <![CDATA[" />]]> <![CDATA[</p>]]> </xsl:if> <xsl:if test="string-length(vchAscxTagName) > 0"> <![CDATA[<wd:]]><xsl:value-of select="vchAscxTagName" /><![CDATA[ id=imageStrip" class="gallery_imageStrip" runat="server" ContentId=]]><xsl:value-of select="autContentId" /><![CDATA[" />]]> </xsl:if> <![CDATA[</div>]]> <![CDATA[</div>]]> </xsl:if> </ContentTemplate> </WD:ContentController> <xsl:if test="intNum4 = 0 or intNum4 = 1 or intNum4 = 2"> <![CDATA[</div>]]> </xsl:if> </xsl:when>

Hello, I'm trying to put an image/video gallery together for a college project. To create the gallery I'm using: http://www.logicbox....y/simplyscroll/ , but when the user hovers over an image a small video appears on the mouse over (similar to the tutorial thumbnails on: http://www.videocopilot.net/) I've copied and combined the relevant codes to create this prototype: http://www.samuelmcwilliam.co.uk I see the image trail is working, but I don't know how to get a flash player working on the mouse over. I've got an old open source player in my root folder, but can't figure out how to use it to play the videos. I'm completely clueless on this section and not even sure if it's the right approach. In case you haven't detected, I'm a novice and trying to learn in my spare time. It would be great if someone could tell me where it's going wrong and how easy it would be to get it working! Thanks in advance! Sam

Hello all, I am trying to create a simply image gallery, with a big pic that sits above a line of thumbnails. I have a separate xml file that contains the url for the big pic, the url for the thumbnail and also an image caption. What I'd like to happen is when the page loads the javascript checks to see how many image nodes there are in the xml file and creates that many divs to hold the various thumbnails in. I can get the js to dynamically create the required number of divs to hold the thumbnails, but can't work out how to load the actual images into their holders. I'm sure that it's a simply line of code, but can't work it out! Any suggestions would be welcome. Here is what I've got so far. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title> <script type="text/javascript"> if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.open("GET","gallery.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("image");i=0; function goDiv(id, html, width, height, left, top) { for (var i = 0; i<x.length;i++) { var newdiv = document.createElement("div"); newdiv.setAttribute("id",id); thumbsURL = (x.getElementsByTagName("thumbURL")[0].childNodes[0].nodeValue) newdiv.style.width = "200px";newdiv.style.height = "100px";newdiv.style.background = "#FFF";newdiv.style.border = "2px solid #333";newdiv.style.margin = "20px";newdiv.style.float = "left";newdiv.style.display = "block";newdiv.style.background-image = "url(" + thumbsURL + ")"; ??I tried to load the img here but with no luck document.body.appendChild(newdiv); } } </script></head> <input type="button" onclick="goDiv();" value="create thumbs" /></body></html>