Hello stackoverflow community. I am using lightGallery plug-in and have a problems with making it running with external kind of button in my case anchor tag, can you suggest what have i done wrong or maybe any other way to get it working right.
HTML
Enter full screen view
<div class="owl-carousel" id="selector1">
<div class="item" data-src="img/1.jpg" name="fullscreen"><img src="img/1.jpg">
</div>
JavaScript
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
$('#selector1').lightGallery({
selector: '.item'
});
lightGallery plug-in: http://sachinchoolur.github.io/lightGallery/docs/#installation
Here are some things that might/will cause problems:
The href attribute does not work like that. The link will just open another website. Instead you need to execute some javascript to activate the fullscreen mode, when the link is clicked.
You have two opening <div> tags, but only one closing. Also, you should close the <img> tag.
You probably want all of your posted javascript in the $(document).ready(function() {}); function
There is no element with the id lightgallery.
I don't know anything about the data-src attribute.
This should fix most of the problems, however it will not enable the fullscreen functionality:
html
<div class="owl-carousel" id="lightgallery">
<div class="item" data-src="img/1.jpg">
<img src="img/1.jpg" />
</div>
</div>
javascript
$(document).ready(function() {
$('#lightgallery').lightGallery({
selector: '.item'
});
});
Related
I currently have a div in my HTML that is initially hidden (using display:none).
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
I then use the following Javascript so when the .autocompleteitem item is clicked, it displays:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(.autocompleteitemwithcontainer)',function(){
$("div.fulladdress").show();
});
});
However, if Javascript is disabled, the full address will never display. How do I resolve this?
Maybe try working with the tag <noscript>. It runs the code inside it if the javascript is disabled.
Use following HTML code. Now user can see the div when javaScript disabled by user or device not support javaScript. You can customize your div by select .fulladdress class on CSS.
<noscript>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!
</p>
</div>
</noscript>
You can try something like this.
If javascript enabled - Hide div on document ready and then show on click event
If javascript disabled your document ready function wont execute and it wont hide the div
$(document).ready(function() {
$("div.fulladdress").hide();
$("#button").on('click',function(){
$("div.fulladdress").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
<div class="button">
<button id="button">display</button>
</div>
Try this
<noscript>
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
You don't have javascript enabled.
</div>
</noscript>
If you absolutely have to have your div hidden at first even with JavaScript disabled and only then revealed, then there are some ways to deal with it.
You can detect if JavaScript is disabled and request the user to enable it, and not show the page unless the user does so. How to detect if JavaScript is disabled?
You can use CSS properties to show/hide .fulladdress on hover instead of on a click (you might want to modify your div for that, or put it inside a <noscript> tag).
You might want to use 'hacks' to detect a click without using JavaScript. Here are a few examples:
Show / hide div on click with CSS
What is the simplest way to implement pure css show/hide?
Hope this helps!
I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.
First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});
My page is at www.danielcw.info.
At the bottom I am calling:
$(document).ready(function() {
$("#single_1").fancybox({});
});
On:
<div id="single_1">
TESTTESTEST
</div>
Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.
Thank you,
Daniel
Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:
HTML:
Click here to launch Fancybox
<div style="display:none">
<div id="single_1">
Content goes here
</div>
</div>
Javascript:
$(function(){
$('a#fancybox').fancybox({
// Fancybox options here
})
.trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});
Try using,
$(document).ready(function() {
$("a #single_1").fancybox();
});
<a id="single_1" href="#">
TESTTESTEST
</a>
You've merely instantiated the plugin. You have to trigger it now.
So you can add any DOM element and watch for an event then trigger the plugin.
Click me
The JS
$('fancyme').on("click", function() {
$.fancybox('#single_1');
});
OR
You can trigger on page load
$(function(){
$.fancybox('#single_1');
});
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});
I have a left <div> (id = 'videopane') and a right <div> containing a clickable list of items.
I am trying program this: You click on one of the items in the right <div>, it loads the Quicktime movie into the left <div>.
I am using the JQuery media plugin to generate all of the embed code. and it works if I simply input the code <a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a> into the left <div>.
It does not work when I try to apply this code to one of the items in the list in the right <div>, although the code seems fine to me:
<a href="#" onclick="document.getElementById('videopane').innerHTML='<a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a>'">
Any insight into what I am doing wrong?
The jQuery plugin you are using is taking the movie source from the href of the link. So you would do it link this.
<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />
This will generate when clicked.
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov">
<embed src="sample.mov"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
<div>My Quicktime Movie</div>
</div>
Make sure to add this after you include jQuery and the plugin.
$('.media').media();
html that is generated on the fly will not work, right away,
make sure that when you add the anchor tag to run the plug in function:
<a href="#" id='rihana' >Rihana</a>
Javascript
var movie = document.getElementById('rihana');
movie.onclick = function () {
document.getElementById('videopane').innerHTML= '<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />'
// then run the plugin function.
$('.media').media();