Foundation 4 Orbit Slider All Images at Once/Not Scrollable - html

I can't figure out why the slider doesn't perform exactly like the one on the documentation page here:
http://foundation.zurb.com/docs/components/orbit.html
Our site is
here:
Here's the code. I think that it is supposed to be this minimal markup and that the rest of the stuff is supposed to be added later:
<ul data-orbit>
<li>
<img src="img/sliders/lightcubebeta1000.png" >
<div class="orbit-caption">...</div>
</li>
<li>
<img src="img/sliders/hammertime1000.png">
<div class="orbit-caption">...</div>
</li>
<li>
<img src= "img/sliders/alarmclockbeta1000.png">
<div class="orbit-caption">...</div>
</li>
</ul>
Initialization of the Javascript:
<!-- Javascript for Orbit Image Slider -->
<script>
document.write('<script src=`javascripts/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>')
</script>
<script src= "javascripts/foundation/foundation.js"></script>
<script src= "javascripts/foundation/foundation.dropdown.js"></script>
<script src= "javascripts/foundation/foundation.section.js"></script>
<script src= "javascripts/foundation/foundation.topbar.js"></script>
<script src= "javascripts/foundation/foundation.orbit.js"></script>
<!-- Initialize Foundation -->
<script>
$(document).foundation('orbit', {
timer_speed: 10000,
pause_on_hover: true,
resume_on_mouseout: true,
animation_speed: 500,
bullets: true,
stack_on_small: true,
container_class: 'orbit-container',
stack_on_small_class: 'orbit-stack-on-small',
next_class: 'orbit-next',
prev_class: 'orbit-prev',
timer_container_class: 'orbit-timer',
timer_paused_class: 'paused',
timer_progress_class: 'orbit-progress',
slides_container_class: 'orbit-slides-container',
bullets_container_class: 'orbit-bullets',
bullets_active_class: 'active',
slide_number_class: 'orbit-slide-number',
caption_class: 'orbit-caption',
active_slide_class: 'active',
orbit_transition_class: 'orbit-transitioning'
});
</script>
Despite my best efforts to copy the example on the docs page, the orbit image slider displays all the images at once top to bottom with the bullets and the arrows. Did I make a mistake or is there something wrong with the example in the foundation 4 docs?
Thank You!

You seem to have failed to carefully follow the Javascript Installation section of Foundation documentation.
You missed at least two steps:
require jQuery;
initialize Foundation.
Also, the code you provided in the question is different from the code you have on the actual page. On the page you use <ul class= "data-orbit"> while the correct code is <ul data-orbit>.
Here's a demo of everything set up properly: http://jsbin.com/ixuluw/3/edit

Thank you lolmaus. It turned out that after changing the <ul class="data-orbit"> back to <ul data-orbit> and by changing:
<script>
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
to
<script>
document.write('<script src=`javascripts/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>')
</script>
It then appears to load zepto or jquery correctly, along with the orbit script. I must have missed the change, because all the javascript files are in the new folder. I must have been quite tired. Thanks again!

Related

Disable click on ".lg-img-wrap" class in Light Gallery

How to disable click on .lg-img-wrap?
I have tried lot of solutions but none seems to work on lightgallery.
Tried 1
$(".lg-img-wrap").children().unbind('click');
Tried 2
$(".noclick").click(function(e) {
e.preventDefault();
e.stopPropagation();
});
Tried 3
pointer-events:none //to a css property
I would like to prevent closing of light gallery when user clicks outside the image.
Black margin is visible when image ratio is not same as that of screen size.
Please check image below for reference.
Light Gallery I am using: https://github.com/sachinchoolur/lightGallery
Add closeable: false to your lightGallery initialization. Here's their API describing that feature.
Working Codepen
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.css" integrity="sha512-I/g40Mx7U2Oepd3iHIpQRqdQGJ3vgdw0ix8LxGxX9zKv1MDizjD6dRcJ3PC1qpyfkj4rikVNcpBKcnmuJWUaTQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/js/lightgallery.min.js"></script>
</head>
<div id="lightgallery">
<a href="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150" />
</a>
</div>
<script type="text/javascript">
$('#lightgallery').lightGallery({
closable: false
});
</script>
</html>
$(".lg-img-wrap").off("click");
or
$(".lg-img-wrap").prop("disabled",true);
or
$('.lg-img-wrap"').click(false);
I hope it works for you. good work.

NicEditor doesnot work properly in mvc

I have got a problem when using nicEditor for my textarea editors in mvc project.
Here is the 2 view pages that I have created.From the First View I pass route values to the Second view
<ul class="mar">
#foreach (var item in Model)
{
<li class="mar" style="list-style-type:none">
<div style="display:inline-block;font-size:small">
<a id="arrow_#item.thread.MessageID" class="glyphicon glyphicon-triangle-right" style="text-decoration:none;cursor:pointer;color:dimgray" onclick="toggle(#item.thread.MessageID)"></a>
<h3 class="mar" style="display:inline-block;">#item.thread.Title</h3>
</div>
<li>
</ul>
Second View
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="~/Scripts/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
<h2>GetMessage</h2>
<textarea style="width:900px"></textarea>
Here second view displays the niceditor(textarea) without its images inbuild with the nicEditor
When I remove the passing parameters from the First View,then it works Fine..
I need to know Why it happens like that???
Use the developer tools of your browser and watch the network view, why the nicEditoricons.gif not loaded, is a path problem. Use the option iconsPath to set the right one.
And please, take a look in the manual of nicedit.
var NicEditconfig = {
iconsPath : '/img/nicEditorIcons.gif',
buttonList : ['bold','italic','underline','ol','ul']
};
You need to configure the path manually
First, check the console to find the current request path. If the request path is wrong, then configure it
HTML
<textarea id="textAreaNiceEditor" style="width: 100%;">
Some Initial Content was in this textarea
</textarea>
JS Code
<script src="~/Content/NiceEditor/nicEdit.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function () {
new nicEditor({ iconsPath: '../../../Content/NiceEditor/nicEditorIcons.gif' }).panelInstance('textAreaNiceEditor');
});
//]]>
</script>
'../../../Content/NiceEditor/nicEditorIcons.gif'
Change this path value based on your gif location.
Make sure that you use are using same textarea id in JS code. Above case the id value is textAreaNiceEditor

HTML clickable image has to resize font

I am building a website and I am trying something I cant figure out how it has to work.
In my menu I have 2 images.
<li id="fontup"><img width="40" height="40" src="images/fontup.png"/></li>
<li id="fontdown"><img width="40" height="40" src="images/fontdownpng.png"/></li>
Those 2 images represent a button in my menu that if you click it, the font size on the website has to increment or decrement by 1. I know HTML support the option "smaller" and "bigger".
When I click the one image -> a JavaScript or jQuery has to run to resize the font.
How exactly do I do this? (I am a very beginner in HTML and dreamweaver)
At the moment I have this :
<script type="text/javascript">
window.onload = function() {
document.getElementById("fontup").onclick = function() {
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("font").style.fontSize = larger;
};
};
</script>
As you can see I have this from a tutorial on the website, but I dont know what I need to customize more to have this working?
Also I have set a p-element with an id="font" to test this out but obviously this doesnt work.
** update :
Code I have now is :
On my index.html =
The scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/FontsSize.js"></script>
My 2 buttons
<li> <button id="fontup"><img width="40" height="40" src="images/fontup.png"/> </button></li>
<li> <button id="fontdown"><img width="40" height="40" src="images/fontdownpng.png"/> </button></li>
For testing I also have this:
<div id="test">lorem ipsum etc</div>
In a seperate .js file I have the following code:
var fs = 23;
$(document).ready(function() {
$('#test').css('font-size', fs);
});
$("#fontup").click(function() {
fs++
$("#test").css('font-size', fs);
});
$("#fontdown").click(function() {
fs--
$("#test").css('font-size', fs);
});
How come this still doesnt work?
If I update var fs the size does change... but if I click the button.. it doesnt.
If you can use jquery (as mentioned in your question), this will do what you want. You start by setting a default size for page load, then reset the font size (up or down) each time a button is clicked. The code below applies the re-sizing to a div, but you could apply it to body if you want to change the size of the font on everything (except elements with a more specific font size declaration)
var fs = 23;
$(document).ready(function() {
$('#content').css('font-size', fs);
$('#fontUp').click(function() {
fs++
$('#content').css('font-size', fs);
});
$('#fontDown').click(function() {
fs--
$('#content').css('font-size', fs);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="fontUp">UP</button>
<br>
<br>
<button id="fontDown">DOWN</button>
<br>
<br>
<div id="content">lorem ipsum etc</div>
EDIT: code updated for external JS file

How can I swap out YouTube thumbnails for my latest upload?

I'm wanting to create a "Latest Video" block on my website, but I only need the YouTube thumbnail image and MAYBE the title of the video. I found a method for doing an embed for the latest video itself, but I'm uncertain if I can modify it for just the thumbnail.
<!DOCTYPE html>
<html>
<head>
<title>YouTube Recent Upload Thing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>
Can this be repurposed for my idea? And how can I do it if it can't? I have basic HTML and CSS knowledge, with a very limited understanding of javascript and php. If I can just get something that will swap the thumbnail and ideally display the title, I can handle styling and implementation. Also interested in the same for specific playlists' most recent addition, but that doesn't have to happen.
Not sure if this is what you mean but you can try something like:
<div onclick="this.style.display='none'; this.nextSibling.style.display='block';"><img src="image.png" style="cursor:pointer" /></div><div style="display:none">
<!-- Embed code here -->
</div>

Add <li> dynamically reading from a folder photoswipe purpose

Sorry for my English, I am a new to jquery mobile and only have basic knowledge about javascript languages in general; I was playing around with a single page website mobile ( I usually use Dreamweaver CS6) and I reached a good result with photoswipe and everything was good since I had just few images. I have added a lot of them so now I would get the images' link dynamically.
In short, I want to start from a folder on my ftp and read all images file within it and create the <li> items for each one. Can I make this job with jquery mobile or should I use a language like php or .Net
I have read some examples around here and on google but they didn't help me a lot, like this one, I am sure it could be an answer for me in it but I don't know how to start
http://docs.phonegap.com/en/2.4.0/cordova_file_file.md.html#DirectoryReader
Here some code I'm using:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!-- Librerie PhotoSwipe -->
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/photoswipe.css">
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/styles.css">
<script type="text/javascript" src="../PhotoSwipe/klass.min.js"></script>
<script type="text/javascript" src="../PhotoSwipe/code.photoswipe-3.0.5.min.js"></script>
<!-- End PhotoSwipe -->
<script type="text/javascript">
$(document).ready(function(){ var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false, captionAndToolbarAutoHideDelay: 0 }); });
</script>
Then my page
<div data-role="page" id="page">
<div data-role="header">
<h1>Title of my Page</h1>
</div>
<div data-role="content">
<ul id="Gallery" class="gallery">
<li>
<a href="../Images/img04.jpg">
<img src="../Images/img04.jpg" alt=""></a>
</li>
</ul>
</div>
When i land on this page everything works fine. Shall I use something like this?
That I took from this website, can I use JSON to accede to my ftp folder and than cycle the content?
Should I put this in a function? If yes who is going to call it?
$("#Photos").live("pagebeforeshow", function(){
$("ul#PhotoList").children().remove('li');
var tag = MyTag
$.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&client_id=####",
function(data){
$.each(data.data, function(i,item){
$("ul#PhotoList").append('<li><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /></li>');
});
});
var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
});
Any help is appriciated, thank you in advance, I am sure my issue here is my limited knowledge.
You should use pageinit and pagebeforeshow Instead of $(document).ready. Also .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). http://api.jquery.com/live/
Append list Items:
$("#PhotoList").append('<li><a href="..
When you finish refresh the list to display your new list:
$('#PhotoList').listview('refresh');
Update:
I use php programs on my server in order to retrieve json strings. Something like this...
xhr = new XMLHttpRequest();
xhr.open("GET","http://192.168.100.2/sr/quotelisttest?name="+s,true);
xhr.send("");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4){
alert(xhr.readyState);
alert(xhr.responseText);
var v = JSON.parse(xhr.responseText);