I am just working on the Image Slider with a timer. But there are some issues...
Images are out of Sync with its text
I need a click event for the thumbnail timer, on click of that the image should change with a clear intervals.
Here is the Link which I am trying:
http://jsfiddle.net/alex_ball/UgQJG/
I noticed that the sync. problem is solved after a complete loop of showing images, so it is related with the download speed of the images. Suppose you use, 1.jpg, 2.jpg, 3.jpg and 4.jpg in your slide show. so you will include them first in displayed none div before the the div panel you used.
<div style="display:none">
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />
<img src='4.jpg' />
</div>
<div id="panel">
<div id="title">
</div>
<img id="imageSlide" alt="" src="" width="250px"/>
<div id="desc">
</div>
</div>
<script>
//JavaScript slide initiation code here.
</script>
This will allow the page to download the images before render the slide show, so images will be ready to be maintained at the same speed with text.
Related
This is my first time publishing a question, so forgive me if there's something wrong with it.
I'm currently working on a three-slide custom carousel ad template, using amp-carousel from project AMP.
I've made my template available to you via this link: https://jsfiddle.net/mlealrinaldi/6hvx15gb/
Among the premises of the project, there are two that are mandatory:
1) The second carousel slide has to be partially visible on the right corner when the first slide is displayed (to arouse the user's curiosity when seeing the ad).
2) In the desktop version, when using the 'next' and 'prev' buttons, the carousel should scroll to the center of the next or previous image in the sequence.
The problem I found was that type="carousel" allows me to partially display the next slide, but when I click the 'next' button, it does not scroll to the center of the next slide. It scrolls past beyond the center instead.
And when I use the type="slides", the navigation buttons scroll correctly to the center of the next slide but does not allow me to display part of the next slide (only one slide at the time).
I'm looking for a solution that contemplates these two requirements. For reference, here's a link to amp-carousel documentation: https://www.ampproject.org/docs/reference/components/amp-carousel#type
This is the part of the HTML that contains the carousel:
<amp-carousel height="245" layout="fixed-height" type="carousel">
<div class="slide" id="slide1" style="margin-left: 20px">
<img height="170" width="200" src="slide0.png"/>
<div>
<div class="cta" style="float:left"><p>São 100 carros todos os dias</p></div>
<div style="float:left;margin-top: 10px">
Participe
</div>
</div>
</div>
<div class="slide" id="slide2">
<img height="170" width="200" src="slide1.png"/>
<div>
<div class="cta" style="float:left"><p>Se ligar, é seu!</p></div>
<div style="float:left;margin-top: 10px">
Participe
</div>
</div>
</div>
<div class="slide" id="slide3">
<img height="170" width="200" src="slide0.png"/>
<div>
<div class="cta" style="float:left"><p>Faça o teste drive.</p></div>
<div style="float:left;margin-top: 10px">
Participe
</div>
</div>
</div>
</amp-carousel>
I've also tried to look into the .js AMP functions that listen to the click on the navigation buttons, and make the carousel work, but my limited knowledge only took me so far.
I want to know how to add information to the side of an image using lightbox.
This is some of my code as an example. The lightbox works perfectly but what I want to achieve is when I click the image the image expands and also displays information about the image to the side of it, all with in the lightbox.
<article class="style1">
<span class="image">
<img src="images/image1.jpg" alt="" />
</span>
</article>
if you're using fancybox, try to use title attribute for <a>. it should work
<img src="images/image1.jpg" alt="" title="your information">
I found a lightbox online and copied it into my code.
the first image works perfectly, onclick to show, then click again to close.
but when you click on the second picture it shows the first one again, eventhough i replaced all the sources with another picture. what am i doing wrong? And be gentle, i'm new to all this
<img id="gallery1" src="gallery1.jpg"></img></p>
<div id="light" class="white_content1"></a> <img id="gallery1lb" src="gallery1.jpg"></img></div>
<div id="fade" class="black_overlay1">
</div>
<img id="gallery2" src="gallery2.jpg"></img>
<div id="light" class="white_content2"></a> <img id="gallery2lb" src="gallery2.jpg"></img></div>
<div id="fade" class="black_overlay2">
</div>
I have several images in a grid. I want each image to overlay to fullscreen when I click on them.
I have this javascript on there, but when I click on the image the one that overlays is the last image on the grip. How should I fix that?
I'm using this, but I have several images:
http://jsfiddle.net/a8c9P/
The only the difference on mine from this is that it is in another div for another javascript that puts it into the grid.
HTLM:
<div class="brick">
<div class="overlay"></div>
<div class="overlayContent">
<img class="imgBig" src="img/Scan.jpg" />
</div>
<img class="imgSmall" src="img/Scan.jpg" height="345">
</div>
check out this
are you trying for this? http://jsfiddle.net/Lqsmr4bu/
I just edited slider of content using coda slider.
So I have a photo gallery and when I click on any photo it open a page with coda slider. Which image is clicked, that image is the first slider. Clicking on the next, the slider switch to the next photo, but clicking on the previous photo, the slider go back to the beginning and not to the previous photo.
In the gallery, it looks like this:
<div class="one_fourth">
<div class="imgNikon">
<a href="../photos/bw_slider.html#2"><img src="../photos/2.jpg" width="150" height="100" />
<span class="imgFrameNikon"></span></a>
</div>
<h6 style="margin-bottom:20px;"align="center">2<br /><br /></h6>
</div>
<div class="one_fourth">
<div class="imgNikon">
<a href="../photos/bw_slider.html#1"><img src="../photos/1.jpg" width="150" height="100"/>
<span class="imgFrameNikon"></span></a>
</div>
<h6 style="margin-bottom:20px;"align="center">1<br /><br /></h6>
</div>
So, bw_slider.html is the page that contain the coda slider.
Continuation of the link #1 and in the other case #2 is a direct link to specific slide that contain that id.
In the coda slider it look like this with much more slides:
<div id="1">
<h2>1</h2>
<img src="1.jpg" width="600" height="400" />
<div class="photo_gallery">
<p >Some text...</p>
</div>
</div>
<div id="2">
<h2>2</h2>
<img src="2.jpg" width="600" height="400" />
<div class="photo_gallery">
<p >Some text...</p>
</div>
</div>
The js of coda slider is on the link above.
Does anyone have any idea how to avoid a return to the beginning when starting slider from the middle of the slider content.