I am trying to implement the Foundation 3 slideshow Orbit into my Foundation mobile responsive design. When I try to place captions on the slides, none show but the caption bar does. This is based on the included homepage template, so the CSS for the slider components has not been altered from what was provided, but an override CSS file was included but shouldn't effect anything. (style.css) I have tried two methods, neither works. You can see the issue here. Thanks for any help you can give me, I'm new to responsive design.
<div id="slider">
<img data-caption="#slide1" src="http://placehold.it/1000x400&text=[img 1]" />
<img data-caption="#slide2" src="http://placehold.it/1000x400&text=[img 2]" />
<img data-caption="#slide3" src="http://placehold.it/1000x400&text=[img 3]" />
</div>
<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>
</div>
I have also tried:
<div id="slider">
<div data-caption="#slide1"> <img src="http://placehold.it/1000x400&text=[img 1]" /></div>
<div data-caption="#slide2"><img src="http://placehold.it/1000x400&text=[img 2]" /></div>
<div data-caption="#slide3"><img src="http://placehold.it/1000x400&text=[img 3]" /></div>
</div>
<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>
</div>
My initiation JS:
<script type="text/javascript">
$(window).load(function() {
$('#slider').orbit({
bullets: false,
timer: true,
captions: true,
animation: 'fade' });
});
</script>
I just encountered this issue as well. I managed to fix this issue by moving line 394 before line 391 in "jquery.foundation.orbit.js". The issue is that the current version orbit removes the # from the value of data-caption before it parses the text in the .orbit-caption span.
So I don't see anything wrong with your code examples. You just have to fix "jquery.foundation.orbit.js" yourself, or wait for the next release that fixes it.
Current Version:
390. // if location selector starts with '#', remove it so we don't see id="#selector"
391. if (captionLocation.charAt(0) == '#') {
392. captionLocation = captionLocation.substring(1, captionLocation.length);
393. }
394. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
Fixed Version:
390. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
391. // if location selector starts with '#', remove it so we don't see id="#selector"
392. if (captionLocation.charAt(0) == '#') {
393. captionLocation = captionLocation.substring(1, captionLocation.length);
394. }
If you're using "foundation.min.js," you'll want to edit line 46. Look for this:
t.charAt(0)=="#"&&(t=t.substring(1,t.length)),n=e(t).html()
and just reverse the two parts to look like this:
n=e(t).html(),t.charAt(0)=="#"&&(t=t.substring(1,t.length))
I haven't tested to see if this breaks anything else, but it does fix the caption issue that you encountered.
The framework obviously has predefined classes and ids so you have to use that, if you use others that aren't defined, it will not work. Your code is almost ok, but wherever you used "slide1", "slide2", "slide3" you should use "#captionOne", "#captionTwo", "#captionThree".
From the website: http://foundation.zurb.com/docs/orbit.php
Adding Captions
Another awesome feature in Orbit is the ability to add captions for each slide. The process is simple, just add data-caption="#captionId" to the content div or img. Then, below your div id="featured", add span class="orbit-caption" id="captionId" that will hold your caption content. You can add as many as slides you have available, just make sure the data-caption and the id of the span are the same and that you add # to the data-caption like in the code below.
<div id="featuredContent">
<div data-caption="#captionOne">
<h4>This is a content slider.</h4>
<p>Each slide holds arbitrary content, like text or actions.</p>
</div>
<div data-caption="#captionTwo">
<h4>We can include text and buttons, like this!</h4>
<p>We take no responsibility for what happens if you click this button.</p>
<p>Rock My World!</p>
</div>
<div data-caption="#captionThree">
<h4>What? You did not click it?</h4>
<p>We gave you the benefit of the doubt. Maybe you did, and now you are back!</p>
</div>
</div>
<span class="orbit-caption" id="captionOne">Here is a caption...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>
If you follow what i wrote it should work. Hope it helps.
Related
The problems: (dont mind the upper section)
When I click a checkbox the result of the other checkbox also display and it also seems to be adding a margin at the bottom because the popup is moving down.
Second I cant seem to find a way find a way to display the 2 sections side by side.
Is there a way that I could make it that only one checkbox per section can be selected? And if the use changes their mind and click a different checkbox it will also change the displayed result.
heres the codepen link:
https://codepen.io/racrdvz/pen/RwWZrog
<div class="pickerSection">
<section>
<div class="watchingFor">
<p class="type">Watching for:</p>
<div class="menuToggle">
<div class="menuToggleBtn"><img src="https://i.imgur.com/Id2MrBQ.png" alt="" id="watchfor-btn" class="menuBtn"> </div>
<div class="menuToggleBtn">
<span class='display beginner'>30 days</span>
<span class='display intermediate'>60 days</span>
<span class='display advanced'>90 days</span>
</div>
</div>
</div>
</div>
</section>
heres the look im going for:
Forgive me for the multiple questions, any help and suggestion will be much appriciated. Thanks
the solution to point 1 - use the different name of id and class for checkboxes
the solution to point 2 - USe row and col classes to get them in the same row
I have a gallery in which the images that are clicked open in a lightbox. I want to add the option that the OPENED image can then be clicked again to link to an external page.
I already tried to wrap the tag in another tag - what was of course not successful - and was looking for some "data" code to add to the "href" line... but found nothing so far. Here is the code:
<div class="homepage-portfolio-preview-1 new-animation">
<a class="lightbox"href="img/Portfolio_img/Ele_macs.jpg">
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);"></span>
<span class="text">
<span class="h4 light"><b>WEBSEITEN LAYOUT</b></span>
<span class="empty-space col-xs-b15"></span>
<span class="simple-article large light transparent">TK Elementa</span>
</span>
</a>
</div>
I want the image link to the page where the project is described in detail BUT also want the viewer to be able to see the zoomed version of the image... Hoping for some help. Thanks
Have you tried putting the link tag inside the span?
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);">
Visit W3Schools
</span>
Please help me with a plugin I found. It works great but I want to modify it a little but my javascript/jQuery knowledge is basically zero.
http://www.jqueryscript.net/demo/Responsive-Accessible-jQuery-Modal-Plugin-Popup-Overlay/
First I made this change jQuery(document).ready(function($) so it works on the latest jQuery version, the script is set for version 1.8.2..
I only want to use the tooltip and to make a simple pop up/maximize image tool.
This is how far I got after, I'm ashamed to say, 3 sleepless nights.
For the tooltip
<input class="my_tooltip_open" type="submit" value="Tooltip1"></input>
<div id="my_tooltip" class="well">
×
<h4>Tooltip example 1</h4>
<p>Tooltip content 1 will be positioned relative to the opening link.</p>
</div>
<input class="my_tooltip_open" type="submit" value="Tooltip2"></input>
<div id="my_tooltip" class="well">
×
<h4>Tooltip example 2</h4>
<p>Tooltip content 2 will be positioned relative to the opening link.</p>
</div>
And this is the function:
<script>
jQuery(document).ready(function($) {
$("[id^=my_tooltip]").popup({
type: 'tooltip',
vertical: 'bottom',
transition: '0.3s all 0.1s',
tooltipanchor: $('.my_tooltip_open')
});
});
</script>
I know it looks stupid, i should've used CLASS instead of ID but this is the only way i could make it to work and display the tooltips. The only problem is that it always shows the last tooltip.
It should probably and logically look like this.
<input class="my_tooltip_open" type="submit" value="Tooltip1"></input>
<div class="my_tooltip" class="well">
×
<h4>Tooltip example 1</h4>
<p>Tooltip content 1 will be positioned relative to the opening link.</p>
</div>
<input class="my_tooltip_open" type="submit" value="Tooltip2"></input>
<div class="my_tooltip" class="well">
×
<h4>Tooltip example 2</h4>
<p>Tooltip content 2 will be positioned relative to the opening link.</p>
</div>
<script>
jQuery(document).ready(function($) {
[SOMETHING MAGICAL HERE LIKE (this).next !??!]('.my_tooltip').popup({
type: 'tooltip',
vertical: 'bottom',
transition: '0.3s all 0.1s',
tooltipanchor: $('.my_tooltip_open')
});
});
</script>
And for the image maximize and gallery part i ended up with this
<img src="img1.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />
<div id="my_popup">
<img src="img1.jpg"/>
<button class="my_popup_close">Close</button>
</div>
<script>
jQuery(document).ready(function($) {
$('#my_popup').popup();
});
</script>
And this is what i was aiming for:
<img src="img1.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />
<img src="img2.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />
<img src="imgn.jpg" class="my_popup_open" width="200px" height="200px;" style="cursor:zoom-in;" />
<script>
jQuery(document).ready(function($) {
$('#my_popup').popup();
(a wonderful thing called a close button somewhere on the right up.)
(another magical thing called "next" and "prev button" if there are more pictures)
});
</script>
If i click on next or prev it should go to the next or prev pictures if they exist.
Also this function already exists on this plugin, if you click on the demo on "Fade" example you see a button there "Next example".
I really like this plugin it seems very fast and simple (for who knows javascript, I can't even use it right).
I know that I'm asking for a lot of help but maybe you can point me in the right direction.
Thank you in advance for all your time.
You need to change set popup to element.
change your java script code with give code.
jQuery(document).ready(function($) {
$('.my_tooltip').each(function(){
$(this).popup({
type: 'tooltip',
vertical: 'bottom',
transition: '0.3s all 0.1s',
tooltipanchor: $('.my_tooltip_open')
});
});
});
I'm trying to make a "Show All / Hide All", currently I've made it so when you click the text, it opens the image and text but I want a Show all so it will expand all divs.
Here is how it works at this moment: JSFiddle .
<div class="gwshowhide"><li><a class="printer">Amber Money Printer</a>
<div class="gwinfo">Level Requirement: 1<br>
<img src="pic.png"></div>
</div></li>
<div class="gwshowhide"><li><a class="printer">Moonstone Money Printer</a>
<div class="gwinfo">Level Requirement: 5<br>
<img src="pic1.png"></div>
</div></li>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
$(function () {
<script>
$('.printer').click(function () {
$(this).siblings('.gwinfo').slideToggle('slow')
})
})
</script>
In general: I want to add a Show all / Hide all text that would open all / hide all of these at once, I also want to keep the current system so when you click one, it opens / closes it. Thank you!
Here is a fiddle to get you started. I've outlined the general gist of what you need below.
Essentially, you need two components.
First, HTML. Which is just another anchor to click to toggle show/hide all.
<a class="toggle-all">Show All</a>
Second, you need an event on that new anchor to trigger the function you have, but for ALL the options.
$('.toggle-all').click(function() {
$('.printer').each(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
});
});
From there, you might want to add something to toggle the text like:
if (open) {
$('.toggle-all').text('Hide all');
} else { ... }
Bonus tip: ALWAYS put semicolons at the end of your lines in JavaScript. Even though JS will auto-insert them, it can cause difficult to debug problems as well as make IE die in some cases.
<p class="showall">Show Hide All</p>
<div class="gwshowhide">
<li>
<a class="printer">Amber Money Printer</a>
<div class="gwinfo">Level Requirement: 1<br/>
<img src="pic.png"/>
</div>
</li>
</div>
<div class="gwshowhide">
<li>
<a class="printer">Moonstone Money Printer</a>
<div class="gwinfo">Level Requirement: 5<br/>
<img src="pic1.png"/>
</div>
</li>
</div>
and your jquery code would be
$(function () {
$('.printer').click(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
})
});
$('.showall').on('click',function(){
$('.gwinfo,.gwinfo').slideToggle('slow');
});
Demo
To show/hide all use:
$('.gwinfo').toggle('slow');
Also, i believe the "gwinfo" divs are not correctly closed on the JSFiddle.
So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.
I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/