I use Fancybox and Scrolling Carousel.
Try to make : click $(.subject) into Fancybox > show $(.content) > $(.content) scroll use scrollingCarousel.
I did test works fine separate.
But if I put them together (Demo1).
Why the $(.content) won't load scrollingCarousel?
(but if reload $(.content) page, then scrollingCarousel work.)
So I try to wrote in Fancybox callback (Demo2) afterLoad,beforeLoad,beforeShow... I did test too, still does't work.
(I've test other carousel plugin, same problem.)
Demo 1 jsfiddle
$(".subject").fancybox({});
$('.content').scrollingCarousel({});
Demo 2
$(".subject").fancybox({
afterLoad: function(){
$('.content').scrollingCarousel({});
}
});
HTML:
<div class="subject">
<div>
<a class="subjectlist"rel="1" href="#1">
<img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg">
</a>
</div>
</div>
<div class="content" id="1">
<div><img class="" src="http://farm8.staticflickr.com/7171/6417719753_374653e28c_b.jpg"></div>
<div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg"></div>
<div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg"></div>
</div>
CSS
.content{
display:none;
width: 200px;
height: 200px;
}
.content img{
width: 200px;
height: 200px;
}
Any advice or help would be greatly appreciated.
.content is hidden by your CSS with display: none, so you simply have to show it using .show() before invoking the scroller, otherwise it just stays hidden.
http://jsfiddle.net/6VH7w/3/
$(".subjectlist").fancybox({
afterLoad: function() {
$('.content').show().scrollingCarousel({
scrollerAlignment: 'vertical'
});
}
});
Hellow I made owl carousel 2 and fancybox, added fancybox css, mousewheel and js files. Then I made my items
<div class="owl-carousel owl-theme">
<div class="item">
<a class="fancybox" group="fancybox" href="imagen0.png"><img class="img-responsive img-thumbnail center-block" src="imagen0.png" title="SEJ" /></a>
</div>
<div class="item">
<a class="fancybox" group="fancybox" href="imagen1.png"><img class="img-responsive img-thumbnail center-block" src="imagen1.png" title="titulos_imagen" /></a>
</div>
</div>
I hope this help you.
Related
I'm trying to load images into a simple masonry.js layout, with images loaded first, and it looks like masonry is applying height: 0px to both the grid and grid items. Any idea why this is happening? Here is the js I am using, and a codepen.
http://codepen.io/kathryncrawford/pen/WwGVNa
JS
jQuery(function ($) {
var $container = $('.js-grid').imagesLoaded( function() {
console.log("images are loaded");
$container.masonry({
itemSelector : '.js-masonry',
columnWidth: 100
});
});
});
If you inspect the HTML in the Masonry docs, you notice that img's are always wrapped inside a div. Just surround your img's with divs.
<div class="js-grid">
<div class="js-masonry">
<img src="http://www.placecage.com/200/600" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/400/200" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/100/200" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/200/200" alt="">
</div>
<div class="js-masonry">
<img src="http://www.placecage.com/200/300" alt="">
</div>
</div>
See codepen.
First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.
You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});
First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});
I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.
I have this html code:
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide">
<img src="images/image1.jpg">
</div>
<div class="slide">
<img src="images/image2.jpg">
</div>
<div class="slide">
<img src="images/image3.jpg">
</div>
</div>
</div>
After every div with class slide there's the img as you can see above.
Using jquery, how can I get it to auto slide between images?
You can use setInterval() to cycle through the slides.
Set it so after x time move to the next slide
The snippet below isn't functioning completely properly, but it gives you a general idea
$(document).ready(function(){
window.setInterval(nextSlide, 1000);
});
function nextSlide() {
var $cur = $('.slide.active');
var $next = $cur.next();
if(!$next) $next = $('.slide-group').children()[0];
console.log($next);
$cur.removeClass('active');
$next.addClass('active');
}
.slide {
display: none;
}
.slide.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slider" id="mySlider" >
<div class="slide-group">
<div class="slide active">
SLIDE 1
</div>
<div class="slide">
SLIDE 2
</div>
<div class="slide">
SLIDE 3
</div>
</div>
</div>
Jon Raasch's simple jquery slideshow is the absolute classic, in my opinion. I've seen it used on many sites.
http://jonraasch.com/blog/a-simple-jquery-slideshow
His example uses a fade, but you can change it to a slide or even Ken Burns it easily enough.
http://www.dwuser.com/education/content/creating-a-jquery-image-scroller/
is just one example of tutorials for image scrollers using jquery.
Just google "jquery image scroller" then if you have further issues come back and see us :)
I am trying to add a hover effect to my object using CSS, but it seems like the html is too complex for it to change. Therefor I ask you for some advice.
The :hover effect is going to change the size and color of the object.
I have tagged jquery and javascript incase it's easier to do the effect in that language.
PHP
<div class="holder forsideikonholder">
<div class="container">
<div class="row">
<ul class="prosess">
<a href="#">
<div class="col-md-4 foto">
<li>
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.png">
</object>
<p class="thin">Fotografering</p>
</li>
</div>
</a>
<a href="#">
<div class="col-md-4 video">
<li>
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.png">
</object>
<p class="thin">Videoproduksjon</p>
</li>
</div>
</a>
<a href="#">
<div class="col-md-4 web">
<li>
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.png">
</object>
<p class="thin">Webutvikling</p>
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
CSS
Here is the most important CSS for this question:
.forsideikonholder .prosess {
width: 80%;
margin: auto;
}
.forsideikonholder object {
width: 50%;
}
I have tried to do it like this, but as I mentioned, - it seems like it's to complex and I am not selecting the right object.
.forsideikonholder a:hover {
width: 60%;
}
.forsideikonholder object:hover {
width: 60%;
}
Here is the site: http://goo.gl/kbWlGR
Scroll down till you see the orange part with 3 icons.
A a tag is an inline element and its size can't be modified by default. You have here to transform your a tags into blocks with display: block;. That way you will be able to play with their size (without changing anything in your :hover rule).
Moreover, your markup is wrong: a ul mustn't contain anything else than li tags: move your li tags to make them encapsulate the whole content of your buttons.
.forsideikonholder a {
display:block;
}
I am using JCarouselLite to produce three scroll boxes on a website. 2 of the carousels line up properly (New, Gifts), but a third does not (BestSellers).
The image floats to the left because the plugin keeps calculating the width incorrectly. All three have the same underlying HTML code, but I can't get the BestSeller Carousel to line up properly.
I also tried to run it on window.load. and have init running in the footer.
What am I missing?
Update:
Here's the Code that initalizes the Carousel:
jQuery(document).ready(function($){
$(".rotateNewContent").jCarouselLite({
btnNext: ".next", btnPrev: ".prev",
speed: 800, visible: 1
});
$(".rotateBestsellerContent").jCarouselLite({
btnNext: ".nextBest", btnPrev:
".prevBest", speed: 800, visible: 1
});
$(".rotateGiftContent").jCarouselLite({
btnNext: ".nextGift", btnPrev:
".prevGift", speed: 800, visible: 1
});
});
here is the html of the first and second lists.
<button class="prev"></button>
<div class="rotateWrapper"><div class="rotateNewContent">
<ul class="NewProductList">
<li class="Odd">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
Organic Maple Syrup from Mount Cabot
</strong>
</div>
<div class="ProductPriceRating">
<em>$13.00</em>
</div>
</li>
<li class="Even">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
<a href="#">Sicilian Marmalades from Marchesi di San
Giuliano</a>
</strong>
</div>
<div class="ProductPriceRating">
<em>$15.00</em>
</div>
</li>
</ul>
</div></div><button class="next"></button>
<button class="prevBest"></button>
<div class="rotateWrapper"><div class="rotateBestsellerContent">
<ul class="NewProductList">
<li>
<div class="ProductImage"><a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Farro from Rustichella d'Abruzzo</strong>
<em>$8.75</em>
</div>
</li>
<li>
<div class="ProductImage">
<a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Mariage Frères Marco Polo</strong>
<em>$22.00</em>
</div>
</li>
</ul>
NB: This site is not yet live, please do not shop.
The middle instance has a width of 135px, while the left and right instances have a width of 180px.
Left Content:
<div class="rotateNewContent" style="overflow: hidden; visibility: visible; position:
relative; z-index: 2; left: 0px; width: 180px;">
Middle Content:
<div class="rotateBestsellerContent" style="overflow: hidden; visibility: visible;
position: relative; z-index: 2; left: 0px; width: 135px;">
I used Firebug to diagnose the CSS issues.
i narrowed it down to the product names. i believe it has something to do with the foreign characters in the names. when i take those products out, the layout resolves correctly.
--now i have to figure out how to fix that. :-)
the problem was that there were two divs within the li element. i wrapped both within another div and gave it a set width and height. now the plugin uses that div to calculate its size.
thanks for helping me think this through george!