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.
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 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've tried to customize a Flexslider with a thumbnail slider by adding some information and a button in the thumbnail. If you click on the thumbnail, the slider slides to the right slide. But if you click on the added link(in the thumbnail) you don't go to a URL behind it.
How can I make this to work?
This is the code that i've been using:
<div id="carousel">
<ul class="slides cntr cb">
<li>
<div class="image"><img src="url" alt=""></div>
<div class="info">
<p>Title</p>
<div class="more">
<span>Date</span> | BUTTON
</div>
</div>
</li>
<li>
<div class="image"><img src="url" alt=""></div>
<div class="info">
<p>Title</p>
<div class="more">
<span>Date</span> | BUTTON
</div>
</div>
</li>
</ul>
</div>
I fixed it with a simple javascript onclick function, I don't now if this is the best way to fix it. But hey, it works for now
onclick="window.open('http://www.url.com', '_self')"
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.
I am using the toggle() with jQuery and I have a sidebar on my page and each header is
<h2 class="sidebar-header">
One section of my code will look like:
<div class="sidebar-section">
<h2 class="sidebar-header">SUBSCRIBE</h2>
<p class="sidebar">Make sure you subscribe to stay in touch with the latest articles and tutorials. Click on one of the images below:</p>
<div class="rss-icons">
<img src="http://gmodules.com/ig/images/plus_google.gif" width="62" height="17" alt="Add to Google Reader or Homepage" class="feed-image"/>
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo3.gif" alt="Add feed to My Yahoo" width="62" height="17" class="feed-image" />
<img src="http://www.newsgator.com/images/ngsub1.gif" alt="Subscribe in NewsGator Online" class="feed-image" height="17" />
</div>
<hr />
<p class="sidebar feed">Don't have those? Grab the RSS url.</p>
<p class="sidebar delicious">Make sure you add me to delicious! </p>
</div>
They are each wrapped in those DIV elements. I am trying to make it for if you click the header, it will shrink up the content. I know toggle can do that, but if I make it for each "sidebar-header", you will click any one element on the page and it will hide them all, how can I do this?
Try something like this:
Suppose you have the following code:
<div class="topdiv">
<h2 class="header">Header 1</h2>
<div class="somecontent">
This is the content
</div>
</div>
<div class="topdiv">
<h2 class="header">Header 2</h2>
<div class="somecontent">
This is the content
</div>
</div>
Now, say that when you want to click on a header, the content of that header is displayed / hidden:
$(".header").click(function () {
$(this).parent(".topdiv:first").find(".somecontent").toggle();
});
This way, only the content of the particular header will be toggled, and not the rest.
Now you can analyze the code I have written for you, and apply it in your own context.
Try this:
nextAll
$(".sidebar-header").click(function() {
$(this).nextAll().toggle();
});