I'm trying to use this plugin: https://github.com/sachinchoolur/lightGallery
What i can't understand is - does it generate thumbnails for images/video?
And i can't get thumbnails from youtube using the docs...
CSS:
<link rel="stylesheet" href="/static/css/lightgallery.min.css">
<script type="text/javascript" src="/static/js/lg-fullscreen.min.js"></script>
<script type="text/javascript" src="/static/js/lightgallery.min.js"></script>
<script type="text/javascript" src="/static/js/lg-thumbnail.min.js"></script>
<script type="text/javascript" src="/static/js/lg-video.min.js"></script>
JS:
$('.light-gal-item').lightGallery({
thumbnail: true,
thumbWidth: 120,
thumbContHeight: 90,
loadYoutubeThumbnail: true,
youtubeThumbSize: 'default'
});
HTML:
<div class="light-gal-item">
<a href="http://www.youtube.com/watch?v=P5_GlAOCHyE" data-src="http://www.youtube.com/watch?v=P5_GlAOCHyE">
<img src="http://www.youtube.com/watch?v=P5_GlAOCHyE"
width="120" height="90" />
</a>
</div>
It does images like that... but even so, i cant figure out if it does thumbnails, or if it needs them by different url...
And it doesn't make youtube thumbnails... HELP!
I have the same problem, but maybe you can use this trick
This is my code
<div id="video-gallery">
<a href="https://www.youtube.com/watch?v=P1mmrxt71RQ">
<img src="http://img.youtube.com/vi/P1mmrxt71RQ/0.jpg" class="cropped" />
</a>
</div>
You just replace the youtube video id on img src, on this example "P1mmrxt71RQ". To search another youtube thumbnail size use this http://boingboing.net/features/getthumbs.html
And for this trick, you dont necessary use
<script type="text/javascript" src="/static/js/lg-thumbnail.min.js"></script>
I hope this help
Related
I can't narrow down my problem with a simple logo parade. I'm working on this at promasterautomotive.com so you can see the context of the problem. The logo parade is at the very bottom, the faded logos.
I opened the console in Chrome (ctrl+shift+j) but I'm not seeing any errors.
Here is my javascript. I pulled it directly from an example.
$(function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
// Logo parade event handlers
$("#logoParade").bind("mouseover", function() {
$(this).smoothDivScroll("stopAutoScrolling");
}).bind("mouseout", function() {
$(this).smoothDivScroll("startAutoScrolling");
});
});
Here's my HTML. Again, modified from an example. Once I get it working I'll tailor it as necessary.
<div id="logoParade">
<img src="images/logos/wiseco.png" class="logos">
<img src="images/logos/bullydog.png" class="logos">
<img src="images/logos/vortek.png" class="logos">
<img src="images/logos/sinister.png" class="logos">
<img src="images/logos/schaeffers.png" class="logos">
<img src="images/logos/arp.png" class="logos">
<img src="images/logos/bpd.png" class="logos">
<img src="images/logos/sct.png" class="logos">
</div>
Anyone else see something that I'm overlooking?
You are missing several files on your site that the plugin depends on
This jsfiddle should work (looks like you moved or deleted the images though ...actually ..the whole site...)
http://jsfiddle.net/DelightedDoD/68sv070h/
Here are the requisite files (download your own copies of course);
<link rel="Stylesheet" type="text/css" href="http://smoothdivscroll.com/css/smoothDivScroll.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.kinetic.min.js" type="text/javascript"></script>
<script src="http://smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
Note the following from the plugin's docs:
LOAD JAVASCRIPT LATE - JUST BEFORE CLOSING THE BODY TAG.
That way the browser will have loaded the images and will
know the width of the images. No need to specify the width
in the CSS or inline.
I've been trying to use coin slider to add it to my web page but I've not been able to see any of the images that I've been trying to add, the problem is that it only shows the description messages, the images appear blank... I would really appreciate your help on this, thank you
This is the code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Altius Coaching</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="css/coin-slider.min.js"></script>
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" />
</head>
<body>
<div id="coin-slider">
<a>
<img src='ALTIUS COACHING.jpg' >
<span>
Description for img01
</span>
</a>
<a>
<img src='ALTIUS MEDICAL.jpg' >
<span>
Description for imgN
</span>
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 560, height:300, navigation: true, delay: 5000 });
});
</script>
</body>
</html>
does "ALTIUS COACHING.jpg" exist on the server? Is it the correct cAsE depending on the server? If all else fails, try removing the space from your html and the filename (or changing it to %20) and try again. According to your source, "ALTIUS COACHING.jpg" exists in the same folder as the html file we're viewing, is this correct?
Can you show us the broken page "live" somewhere?
I'm making a website for a company and I would like to use a Jquery slider on the Home page. I'm using Visual Studio to make the website and I'm trying to implement the Coin slider to the page. I downloaded the files for it and copied the code, changed the pictures and everything is going fine when I try to see it on my localhost. But the problem is that when I upload it to the server than the slider is not working at all, it just puts the pictures under each other.
The code that I'm using is the following:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="text/javascript" src="/Jquery/coin-slider.min.js" ></script>
<link rel="stylesheet" href="/coin-slider-styles.css" type="text/css" />
And:
<script type="text/javascript">
$(document).ready(function () {
$('#coin-slider').coinslider({ width: 759, navigation: true, delay: 5000,effect: 'straight', });
});
</script>
And for the images:
<div id="coin-slider">
<img src="Images/image1.jpg" alt="" width="759px" height="256px" />
<img src="Images/image2.jpg" alt="" width="759px" height="256px" />
<img src="Images/image3.jpg" alt="" width="759px" height="256px" />
</div>
If I try to see the problem with Firefox's Web Console then I get the following message:
TypeError: $("#coin-slider").coinslider is not a function
I don't know what is going wrong when I upload it to the server so I would appreciate any help. :) I also tried using Nivo slider instead of Coin slider to see if the problem was with the slider but everything was the same - it worked on my localhost but not on the server.
Here is the link where you can see the website as it is right now:
http://web.bptech.dk:33001/
Thank you for any help!! :)
I would suggest you have a pathing issue, "/", will probably not be the same path on both machines.
I'm trying to implement Coin Slider (http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/) on my website. However, I can't get it to work. Firefox error console brings up '$ is not defined'.
I only really know HTML and CSS and thought this would just be a case of copying and pasting code. If it's something simple to fix that would be great, but I may have bitten off more than I can chew!
Thanks for any help.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<!-- Begin Content -->
<div id="content">
<div id='coin-slider'>
<a href="" target="">
<img src='../portfoliopages/Funpets/splashpresliced.jpg' >
<span>
Description for img01
</span>
</a>
<a href="" target="">
<img src='../portfoliopages/Funpets/eggprespliced.jpg' >
<span>
Description for imgN
</span>
</a>
<a href="" target="">
<img src='../portfoliopages/Funpets/baby.jpg' >
<span>
Description for img01
</span>
</a>
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 550,
height: 220,
spw: 7,
sph: 5,
delay: 3000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: '',
navigation: true,
links : true,
hoverPause: true });
});
</script
</div>
</div>
<!-- End Content -->
</div>
</div>
<!-- Begin Footer --></div> </div>
<!-- End Footer -->
</body>
</html>
That means the jQuery variable $ is not defined. I guess you just copypasted without downloading jQuery.
This particular piece of code requires you to have downloaded jQuery, named the file jquery-1.4.2.js and locatde it in the same place as this file. You should get the coin-slider.min.js there as well. You can probably find it attached to the tutorial.
The error $ is not defined is typical when the page cannot find jQuery or jQuery is being referenced before it's loaded. In your instance jQuery is being loaded first so I'd assume your path to jQuery is wrong. Double check the path to jquery and that you can browse to the jquery JS file jquery-1.4.2.js
Make sure you have no 404 errors while loading the page. Enable FireBug in firefox and go the the Net setting, reload the page and check your http responses (Or any other Debugger/Inspect tool)
You can try replacing your script source to full URLs to test if your code is working :
For Jquery : http://workshop.rs/projects/coin-slider/jquery-1.4.2.min.js
For Coin Slider : http://workshop.rs/projects/coin-slider/coin-slider.min.js
I got the full urls from the Coin Slider example/demo page. You can open the links and download it to your local machine.
I had a javscript image swap that would without problem swap an image on hover. I implemented highslide.js and now the bottom image will not return to it's original image on mouse out.
Any suggestions?
my scripts are as follows
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jwbox.js"></script>
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
and my html
<a id="gallery-opener" href="javascript:;" onclick="document.getElementById('thumb1').onclick()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('lodge','','Images/river_over.png',1)">
<img src="Images/river_up.png" name="lodge" width="340" height="167" border="0" id="lodge" /></a>
<a id="gallery-opener" href="javascript:;" onclick="document.getElementById('thumb2').onclick()" onmouseover="MM_swapImage('catch','','Images/catch_over.png',1)">
<img src="Images/catch_up.png" name="catch" width="340" height="167" border="0" id="catch" /></a>
you can see an example here
http://www.flyfishinggreyriver.com/index2.html
thank you!!
You must have removed the onmouseout attribute from that image's parent at some point.
Adding onmouseout="MM_swapImgRestore()" to the parent <a> of the last image allows it to restore.
Just so you know, you can use CSS for image rollover transitions, which is a lot easier than JavaScript.
You've also got multiple items with the same ID, which should be avoided.
You don't have onmouseout="MM_swapImgRestore()" event for the bottom image <a> tag. Include that and everything will work fine.