I am a complete beginner to website design and I am trying to create a more modern website for my company. The current one is less than glamorous (Greenlite.co.uk).
After spending a lot of time trying to make a Flash banner for the homepage it occurred to me that Flash is probably quite outdated and not view able from all platforms. This is when I came across the BxSlider, and it really looks great! If only I could get it to work on my site.
I am using CoffeeCup Visual Site Designer, I then used the 'Add HTML' tool. Into the 'Insert HTML' window I have placed as follows;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="js/jquery.bxslider.css" rel="stylesheet" />
<ul class="bxslider">
<li><img src="images/timeline1.jpg" title="An Energy Conservation Company"></li>
<li><img src="images/image1.jpg" title="Designers and Manufactors of Quality Lighting Controls"></li>
<li><img src="images/back12.jpg" title="Caption to go here"></li>
</ul>
<script type="text/javascript">$(document).ready(function(){
$('.bxslider').bxSlider();
});
mode: fade,
captions: true,
auto: true,
autoControls: false
});
});
</script>
I have followed, as well as I could, the instructions shown on bxslider.com. I downloaded the package from bxslider, adding the files to coffeecup and linking the location in the script. I also added my images to CoffeeCup and wrote in their location.
When I preview my website I am rewarded with my three images all shown at once, each underneath the other, with a mouse over caption. Alongside the images are a bullet point.
What I am trying to achieve is a Bxslider with auto start, displaying stop/start controls and with captions.
I have attempted many variations, the script I have shown being my original attempt.
The closest I have got to a working Bxslider is by copying code I found from a website for the old version bxslider. This gave me an image slideshow with headers. If I tried to edit the code to my specifications then it would take me back to square one.
I am entirely aware that I am likely to be making a very obvious mistake. However, to the untrained eye it's giving me nothing but headaches. Any help would be largely appreciated.
The Javascript you've got is invalid. Try changing the Javascript to:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
See working jsfiddle - http://jsfiddle.net/FLuRH/
i noticed some thing that might be a problem:
You didn't closed some code part properly
This is yours:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false
});
});
</script>
This is mine:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: 'true',
auto: 'true',
autoControls: 'false',
});
});
</script>
Also i put this code part in the "head" section and it worked.
Give it a try.
I hope i helped somehow.
Here is working code(just create new html file where u extract bxslider folder)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.bxslider.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(".bxslider").bxSlider();
});
</script>
</head>
<body>
<div style="width:700px;height:250px;align:center;padding-left:250px;">
<ul class="bxslider">
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
<li>
<img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" />
</li>
</ul>
</div>
</body>
</html>
Related
I am very new in the web world. Please pardon me if my questions sound stupid?
My main aim is to capture the animation on HTML5 canvas to a video, in which I succeeded to some extent. I am able to record a video using this module https://github.com/spite/ccapture.js . This is possible only when the code has HTML5 and plain javascript drawing APIs having a canvas element.
Next, I 've been trying to capture text animations using textillate.js which is jquery based. I have no idea how to get the handle to the canvas
in this case. Since jquery is based on javascript, don't all the jquery based animation render on HTML5 canvas?
Here is the example code below. Where in this code can I get the canvas handle and how? There's also no mention of the canvas name.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/animate.css" rel="stylesheet">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.tlt').textillate({
selector: '.texts',
loop: false,
minDisplayTime: 2000,
initialDelay: 0,
in: {
effect: 'bounce',
delayScale: 2,
delay: 50,
sync: false,
shuffle: true
},
autoStart: true,
inEffects: [],
outEffects: [ 'hinge' ]
});
});
</script>
</head>
<body>
<h1 class="tlt">Animate me with textillate effects</h1>
</body>
</html>
If you are looking to getContext, this was already answered here: jQuery equivalent of getting the context of a Canvas. If not, sorry.
I'm attempting to use the Stellar.js script to apply a parallax effect.
Here is the official example from Mark Dalgleish's website
http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html
Even when I copy and paste the source code from the example, instead of having a slight scroll effect to each one image, they appear in fixed positions.
What am I doing wrong?
1.
If even the Demo code does not work, check whether you gave the jquery or stellar.js path correctly.
You can check it in browser console, if you have any errors. The console will print it, if it can't load the resource.
2.
If the paths correct, check if you run the initialisation for stellar, when the page loaded, or if you gave "data-stellar-background-ratio" attribute for the right elements. If you give '0' to the data-stellar-background-ratio it won't scroll either.
Note that, it won't work on mobile devises either.
3.
If you checked everything above, and it still doesn't work, try to insert the scripts at the end of the element. Sometimes it helps.
Something like this:
<html>
<head>
<!-- Title, CSS, and other stuff -->
</head>
<body>
<!-- Content here with right stellar attributes -- >
...
<!-- At the end of body load the scripts, and run initialisation -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="YOUR_PATH_TO_STELLAR/jquery.stellar.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).stellar({
scrollProperty: 'scroll',
horizontalScrolling: false,
positionProperty: 'position'
});
</script>
</body>
</html>
I had a situation where my stellar.js parallax scrolling wouldn't initialize until my browser window was resized. I found the $.stellar('refresh'); seemed to fix the issue. (Using AngularJS)
angular.module('ForeverLeather').controller('HomeCtrl', ['$scope', function($scope) {
$(window).stellar({
horizontalScrolling: false,
verticalOffset: 0,
horizontalOffset: 0,
responsive: true,
}).stellar('refresh');
}]);
I want to install the gallery and instead of using flash I wish to use this jQuery plugin. I cannot figure out how do I install and use it since it is distributed as .zip archive with two .js files inside and no index file or .css at all.
Here's plug in features demo, which I would like to achieve.
$("#container").gridalicious({
animate: true,
animationOptions: {
queue: true,
speed: 200,
duration: 300,
effect: 'fadeInOnAppear',
complete: onComplete
}
});
As per the source code...
The CSS is set in the JS itself, no need for an external style sheet.
If you'll scroll down http://suprb.com/apps/gridalicious/, you will see how to initialize it. It appears to just be a collection of divs with the class item inside of the initialized container.. <div id="container"> for example.
Update:
<!doctype html5>
<html>
<head>
<title>Test of plugin</title>
<script type="text/javascript" src="path/to/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.grid-a-licious.min.js"></script>
</head>
<body>
<div id="container">
<!--I assume it asks for divs with the "item" class, but it may be added automatically.-->
</div>
<script type="text/javascript>
//The initialize code printed above. Has parameters (read:options) you can tweak.
</script>
</body>
</html>
Intro:
This is a question from a newbie amateur designer-wannabe on how to properly create a Magnific Popup. So, this might sound a little noobish, but that's because I'm a newbie.
What I want to know:
I want to know how to create a Magnific Popup, which includes: full HTML structure, where to put the scripts and what are the scripts needed.
What I have done before I came to StackOverflow:
Spent countless hours of trying to implement Magnific Popup, to no avail. The end result that I'm having is just the image, and when I click on it, it redirects me to the link of the image.
Sources:
This is the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html.
This is what I'm trying to create: http://dimsemenov.com/plugins/magnific-popup/ - on the Lightbox Gallery section.
HTML Structure I have tried, and failed:
<!DOCTYPE html>
<html>
<head>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
</head>
<body>
<div class="popupgallery">
<img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"/>
<img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/>
<img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75">
<img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popupgallery').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
</body>
</html>
Note:
I also tried putting the .js files before </body>, again, to not producing intended results.
I think that I am missing something, I'm just not sure what. In the documentation of Magnific Popup, there are a lot of things I don't understand, but I don't think they are relevant.
I hope someone out there would be kind enough to help me with this query.
Relevant queries:
I can't get magnific-popup animations to work
Pop-up not showing (with magnific-popup)
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup
Thanks again! I would really appreciate your thoughts!
Just add delegate: 'a' to your jquery function and make sure the img tag contains the full res image while the href contains the thumbnail.
$('.popupgallery').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
Try putting "http:" before backslashes for the .js file source. Also try to use the new version of jQuery, like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>
I have used following portfolio files,
http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/
and have added prettyphoto in each image tab, but it's not working.
All the library includes are fine.
Here is the code snippet,
under script tag,
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($){
$("a[rel^='prettyPhoto']").prettyPhoto();
$('a[rel]').each(function() {
$(this).attr('rel', $(this).data('rel'));
});
});
and under body tag,
<li data-tags="Print Design" ><img src="assets/img/shots/1.jpg" alt="Illustration" /></li>
If I remove data-tags in li element, then it's working fine but it's also essential for portfolio functionality.
Please guide me for solution.
Thanks.
--
I changed from
$(document).ready(function(){
to
jQuery(document).ready(function($){
Now I am not getting that $("a[rel^='prettyPhoto']").prettyPhoto is not a function error but still lightbox is not coming.