Databases
StackOverflow2013
Postsdbo
POGallery slide show ,motion pictures are not moving
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGallery slide show ,motion pictures are not moving
    text
    copied!<p>I am try to build Gallery slide show. I am new in javscript and jQuery. 1 - I don't see any mottion moving and I don't no why? 2 - I can not center the image center of the div, the left side there is linkage. Thanks for any help and guidance on the subject.</p> <p>Here we can see code that work good. <a href="http://caroufredsel.frebsite.nl/" rel="nofollow">Gallery</a></p> <p>My code HTML file:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Your title here&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt; &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt; &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;script type = "text/javascript" language = "Javascript"&gt; &lt;!-- Hide from older browsers; window.onload = function(){ $('#scroll_me').click(function() { var item_width = $('#portfolio-tiles li').outerWidth() + 30; var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width; $('#portfolio-tiles:not(:animated)').animate({ 'left': left_indent }, 500, function() { $('#portfolio-tiles li:last').after($('#portfolio-tiles li:first')); $('#portfolio-tiles').css({ 'left': '-300px' });}); }); }; // end hide --&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id='carousel_inner'&gt; &lt;ul id="portfolio-tiles"&gt; &lt;li&gt; &lt;a id="example2" href="p1.png"&gt; &lt;img alt="item1" src="p1.png"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a id="example2" href="p2.png"&gt; &lt;img alt="item2" src="p2.png"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a id="example2" href="p3.png"&gt; &lt;img alt="item3" src="p3.png"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a id="example2" href="p5.png"&gt; &lt;img alt="item4" src="p5.png"&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt; &lt;div&gt;&lt;h2&gt;Click here&lt;/h2&gt;&lt;img id="scroll_me" alt="item1" src="p4.png"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>My code CSS file:</p> <pre><code>#carousel_inner{ background-color: #60F0F0; background-position: left top; position:relative; list-style-type: none; float: left; margin: 5px 5px 5px 5px; padding: 0px 0px 0px 0px; height: 215px; width: 980px; overflow: hidden; border:1px; border-style:solid; border-color:yellow; } #portfolio-tiles li img { cursor:pointer; cursor: hand; border:1px; border-style:solid; border-color:red; } #portfolio-tiles li { display: block; float: left; font-style: normal; font-weight: normal; list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 284px; border:1px; border-style:solid; border-color:green; } #portfolio-tiles { position:relative; left:-316px; /* important (this should be negative number of list items width(including margin) */ list-style-type: none; /* removing the default styling for unordered list items */ margin: 0px; padding: 10px 0px 0px 10px; width:9999px; /* important */ } img { width: 277px; } #scroll_me{ float: left; display: block; margin: 0px; } h2 { float: left; position: relative; top: 20px; left: 0; width: 100%; } </code></pre>
 

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