I've spent 4 hours trying to get through this, and I couldn't find a solution yet so far. Basically what I'm trying to do is add a description to each picture in the slide. So, when the picture switches, the description must switch as well. So far I've tryed a lot of stuff but nothing seems to trigger the changes. This is what i've done now
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
dev7studios
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" id="foto1" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" id="foto2" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" id="foto3" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" id="foto4" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
<!-- my Code -->
<div class="descriptionOff" id="first">
Description 1
</div>
<div class="descriptionOff" id="second">
Description 2
</div>
<div class="descriptionOff" id="third">
Description 3
</div>
<div class="descriptionOff" id="fourth">
Description 4
</div>
<!-- :::::::::::::: -->
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script type="text/javascript" src="scripts/andri.js"></script>
So, I've put some div with the descriptions and added some ID on the pictures;
.Description{
display:block;
}
.descriptionOff{
display:none;
}
In the css I've added these 2 classes that the descriptions have to use to show or not themselves;
if($("#foto1").hasClass("nivo-main-image")){
$("#first").toggleClass("Description");
}
And this is the simple line of code I've added in (a different file of) js: basically, if the first photo has class nivo-main-image (which is the class that shows the pictures in the slide), it should toggle the class of the first description to show it (the if statement is not complete, of course I would have done the same for the other descriptions). But nothing happens, the class doesn't switch. So, I ask you for help, or if you have any other solution and if you share it, I would appreciate that a lot.
I haven't really tested this, but have you tried wrapping your slider images in spans and adding your caption inside it (after the img)?
Like so:
<div id="slider" class="nivoSlider">
<span><img src="slide1.jpg" /><p>This is my non-default caption!</p></span>
<img src="slide2.jpg" />
<img src="slide3.jpg" />
</div>
Related
The images in list with .slider class are not being displayed in browser window using MaterializeCSS, but it can be seen in elements. Do sequence of .css and .js loading in head matter?
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img src="416.jpg">
</li>
<li>
<img src="417.jpg">
</li>
</ul>
</div>
</body>
</html>
First of all, you are including two versions of jQuery, remove the <script> tag for jquery-2.1.1.min.js.
The images are not being displayed because you are not initializing the slider. Add the following jQuery code:
<script>
$(function(){
$('.slider').slider();
});
</script>
Remove opacity: 0 for .slider .slides li
Hey to all Prestashop developers! I would like some advice about that matter.
I downloaded the fancybox feature to implement it into the Prestashop´s product.tpl page.
So far, when I enter the product page and click on the zoom magnifier, a pop-up window appears and displays a 404 error URL not found.
Here is the code that I needed to put into the product page (product.tpl). Right after the <img> tag I call on the javascript function:
{if $have_image}
<span id="view_full_size">
<a class="fancybox" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'fancybox')}">
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"
{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}"
height="{$largeSize.height}" />
<span class="span_link no-print"></span>
</a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</span>
{else}
<span id="view_full_size">
<img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}"/>
<span class="span_link"></span>
</span>
{/if}
The scripts and styles are linked to a folder that I named fancybox and are located at the root directory of the theme. I added them at the beginning after this line of code {include file="$tpl_dir./errors.tpl"}
{if $errors|#count == 0}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="{$fancybox_dir}/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="{$fancybox_dir}/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="{$fancybox_dir}/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
I have done a lot of research here in Google and in Prestashop's forums but no luck.
My version of Prestashop is 1.5.6.2.
I would be really grateful if you could help me with any solution on the problem.
Thanks,
Orestis
I'm new to HTML/CSS, I recently purchased a bootstrap theme and I'm trying to create my own homepage using segments of HTML code they provided.
I copy/pasted a section of code and the file paths for the JS but it doesn't work at all. The assets(text, images, videos) all appear but none of it is styled and it's all static. Neither the CSS nor the JS is working on that segment.
This is a live demo of how it's supposed to look:
http://htmlstream.com/preview/unify-v1.7/index.html
This is how mine looks currently:
http://i.gyazo.com/7f8caf3b13c10c3dbfd340afd3fcb1db.png
This is the HTML segment for the slider:
<!--=== Slider ===-->
<div class="slider-inner">
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2><i>CLEAN & FRESH</i> <br /> <i>FULLY RESPONSIVE</i> <br /> <i>DESIGN</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img class="img-responsive" src="assets/plugins/parallax-slider/img/1.png" alt=""></div>
</div>
<div class="da-slide">
<h2><i>RESPONSIVE VIDEO</i> <br /> <i>SUPPORT AND</i> <br /> <i>MANY MORE</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i></p>
<div class="da-img">
<iframe src="http://player.vimeo.com/video/47911018" width="530" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="da-slide">
<h2><i>USING BEST WEB</i> <br /> <i>SOLUTIONS WITH</i> <br /> <i>HTML5/CSS3</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img src="assets/plugins/parallax-slider/img/html5andcss3.png" alt="image01" /></div>
</div>
<div class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</div>
</div>
</div><!--/slider-->
<!--=== End Slider ===-->
This is the HEAD section of my HTML file:
<head>
<title>Ideal Improvements South West LTD | Home</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v3.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" />
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
This is the JS section at the bottom of my file:
<!-- JS Global Compulsory -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/modernizr.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/jquery.cslider.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/owl-carousel.js"></script>
<script type="text/javascript" src="assets/js/plugins/parallax-slider.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
OwlCarousel.initOwlCarousel();
StyleSwitcher.initStyleSwitcher();
ParallaxSlider.initParallaxSlider();
});
</script>
<!--[if lt IE 9]>
<script src="assets/plugins/respond.js"></script>
<script src="assets/plugins/html5shiv.js"></script>
<script src="assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->
I get 7 errors in the chrome dev tools console. 4 are "Uncaught syntaxerror: unexpected token illegal"
2 are "failed to load resource: err_cache_missing and err_file_not_found (The cache one links to the vimeo video link and the file not found links to google fonts.)
The last is "uncaught referenceerror: style switcher is not defined" I believe this is to do with the way I copied some of the code, if you look at the live demo site it has a style switcher on the top right corner.
I took one of the demo html files and put it into my site director and it accesses the JS and CSS fine using the same file paths.
hello you seen your code properly i think something wrong
<script type="text/javascript" src="assets/plugins/parallax- slider/js/modernizr.js"></script>
Space between js name i think this is problem.
or anything else please share your website link or demo code slider
Well, I have this slider wich is workin' with parallax content slider! And I would like to have the image at the place of the text and vice versa! I've come to change it but as soon as I pass to the next slider it returns to it initial position!
.da-slide-current .da-img {
left: 10%;
opacity: 1;
}
jsfiddle
Any way I can achieve that? Much appreciated.
You can play with the div positions:
<html lang="en" class=" js cssanimations csstransitions"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Content Slider with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Parallax Content Slider with CSS3 and jQuery">
<meta name="keywords" content="slider, animations, parallax, delayed, easing, jquery, css3, kendo UI">
<meta name="author" content="Codrops">
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<link href="http://fonts.googleapis.com/css?family=Economica:700,400italic" rel="stylesheet" type="text/css">
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
</head>
<body>
<div class="container">
<div id="da-slider" class="da-slider" style="position:relative;">
<div class="da-slide da-slide-current" >
<h2 style="position:absolute;top:50%;">Warn WWelcome</h2>
<p style="position:absolute;top:25%;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<div class="da-img"><img src="images/1.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Easy management</h2>
<p style="position:absolute;top:25%;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<div class="da-img"><img src="images/2.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Revolution</h2>
<p style="position:absolute;top:25%;">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<div class="da-img"><img src="images/3.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Quality Control</h2>
<p style="position:absolute;top:25%;">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<div class="da-img"><img src="images/4.png" alt="image01"></div>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class="da-dots-current"></span><span></span><span></span><span></span></nav></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
</body></html>
http://jsfiddle.net/YakV7/36/
http://jspears8.mydevryportfolio.com/gallery1.html
I uploaded to my school portfolio in hopes of giving a real vision of what is taking place. The the first fancybox element you open doesn't work. I'm using a prebuilt fancybox css. I've tried several others. In my actual page, it loads an empty fancybox and will load anything cycled through, but that first click when you wander to the page is blank white each time.
What am I doing wrong? This is the gallery below.
<div id="gallery">
<img src="images/thumbs/AlatheusEberwolf_t.jpg" width="94" height="94" alt="Alatheus Eberwolf">
<img src="images/thumbs/Quentin_II_t.jpg" width="94" height="94" alt="Quentin II">
<img src="images/thumbs/RolithAlinaEngaged_t.jpg" width="94" height="94" alt="Rolith and Alina Get Engaged!">
<img src="images/thumbs/RolithAlinaMarried_t.jpg" width="94" height="94" alt="Rolith and Alina Get Married">
<img src="images/thumbs/Spear-of-the-Ancients_t.jpg" width="94" height="94" alt="Spear of the Ancients">
<img src="images/thumbs/Tep_Itaki_t.jpg" width="94" height="94" alt="Tep Itaki">
</div>
Javascript
$(document).ready(function() {
$('#gallery a').fancybox({
overlayColor: '#0CF',
overlayOpacity: .3,
transitionIn: 'elastic',
transitionOut: 'elastic',
easingIn: 'easeInSine',
easingOut: 'easeOutSine',
titlePosition: 'outside' ,
cyclic: true
});
}); // end ready
In a quick review of your page I can see the following:
You call twice jQuery (_js/jquery-1.7.2.min.js and _js/jquery.js)
Your call to the jQuery must be before the fancybox call
Take a look at the <head> tag in your HTML:
<meta charset="utf-8">
<title>Course Project</title>
<link type="text/css" rel="stylesheet" href="_css/layout.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script id="twitter-wjs" src="http://platform.twitter.com/widgets.js">
<script src="_js/jquery-1.7.2.min.js">
<script src="_js/jquery.easing.1.3.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
<script src="_js/jquery.js" type="text/javascript">
<script src="_js/interface.js" type="text/javascript">
<style type="text/css">
<script type="text/javascript">
<link type="text/css" rel="stylesheet" href="dockstyle.css">
<style type="text/css">
<link type="text/css" rel="stylesheet" href="navstyle.css">
Your fancybox example works fine if you have only:
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css">
<script src="_js/jquery-1.7.2.min.js">
<script src="fancybox/jquery.fancybox-1.3.4.min.js">
So I believe some javascript methods are overiding.
I hope this helps