friends there is something that I want to do for a week with cycle 2 slideshow plugin but I failed every time let me tell you What I want to do I'm trying to do categorized slideshow.I have filters on my cycle2 carousel (you will see on example)
I have 3 categories (or more than 3)
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
</ul>
and my each li has an id
id#sports,id#naturel,id#animals,id#blabla..
at the same time my image has data-id attribute
data-id="sports",data-id="naturel",data-id="animals",data-id="blabla.."
and at this point I can not do what I want to do.
if I click li#sports than only data-id="sports" img must be appear on slideshow with thumbnail
or if I click li#animals than only data-id="animals" img must be appear on slideshow with thumbnail
I try with jquery but nothing happend
and please click to see my little project on codepen
$(document).ready(function() {
$(".filter li").on("click", function() {
var activeId = $(this).attr("id");
$("img[data-id]").hide();
$("img[data-id = '" + activeId + "']").show();
});
});
.single-gallery{
width:800px;
overflow:hidden;
position:relative;
}
.cycle-slideshow img {
width:100%;
height:234px;
max-width:100%;
}
#single-pager a img {
width: 49.3px !important;
height:49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
.filter {
position: absolute;
z-index: 1000;
right: 0;
top:0;
padding: 0;
color: #FFF;
background: rgba(255, 255, 255, 0.6);
padding: 10px 30px;
}
.filter li {
list-style-type:none;
cursor: pointer;
display: inline-block;
background: rgba(0, 0, 0, .6);
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="single-gallery">
<div class="cycle-slideshow" data-cycle-pager="#single-pager" data-cycle-pager-template="<a href='#'><img src='{{src}}' width=48 height=48></a>" data-cycle-prev="#single-left" data-cycle-next="#single-right" data-cycle-pause-on-hover="true">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" />
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" />
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" />
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" />
<div id="single-pager" class="center external"></div>
<div id="single-next-prev">
<span id="single-left">Prev</span>
<span id="single-right">Next</span>
</div>
</div>
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
</ul>
</div>
Even though you are setting display: none on the elements you want hidden (using .hide()) the plugin is still setting them to display: block because when you initialize the slider they are all eligible slides.
There doesn't seem to be a very easy way of dynamically removing/adding slides on the fly.
The approach I took was setting data-hidden="true" on the slides you want hidden, then re-initializing the slider to only use images that match img[data-hidden="false"] as slides.
I added the code below to your css so that the hidden slides don't show up below the slideshow.
img[data-hidden="true"]{
display: none;
}
I also took all the other data- attributes in the cycle div, and renamed its class to mySlideShow so I could render the cycle when I needed using the $('.mySlideShow').cycle({...}) method.
Here should be a working example: http://codepen.io/anon/pen/dvoLeE
Related
I want to space out the contents to be evenly and then spaces to all have equal amount but I'm not sure how to do so. When I add padding to the list or increase the space in the column it messes up the format of the page
I have also tride putting an offset in the row but it still doesnt fix it
So I'm trying for it to be like:
Projects About Me Contact Me
Pic Pic Pic
But anytime I change something it changes to:
Projects Pic About Me Contact Me
Pic Pic
.header {
font-family: Cambria;
font-size: xx-large;
text-align: center;
padding: 50px;
background-color: lightblue;
background-image: linear-gradient(to bottom right, darkgray, lightblue);
}
.home {
width: 100%;
}
.home div {
width: 200px;
}
.home img {
vertical-align: middle;
border-style: none;
height: 200px;
width: 200px;
object-fit: cover;
}
.home ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
}
.home li {
margin-left: 20px;
list-style: none;
float: left;
}
.home a {
text-decoration: none;
font-family: Cambria;
font-weight: lighter;
color: steelblue;
}
.home a:hover {
font-weight: bold;
color: darkblue;
}
.home img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<body style="background-color:mintcream">
<div class="header">
<span style="color:darkblue">const</span>
<span style="color:white">_name =</span>
<span style="color:darkblue">"My_Name"</span>
</div>
<div class="row">
<ul class="home" style="padding-top:20px;">
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">Projects</span>
<span><img src="https://via.placeholder.com/300.png/09f/fff"/
</span>
</a>
</li>
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">About Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
<li class="col-md-2">
<a href="#">
<span style="font-size:35px">Contact Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
</ul>
</div>
</body>
As #apanesar11 pointed out, grids should resolve your problem.
Another solution is the use of the flexbox.
I made you and example with the snippet given by #mplungjan :
https://codepen.io/mdubus/pen/BvXXmJ
.home {
width: 100%;
display:flex;
flex-direction:row;
justify-content:space-around;
}
If you're not satisfied with the alignment, you can also replace the justify-content:space-around; in .home with justify-content:space-between;.
I'm not sure about the kind of alignment you want, but hope it helps ! :)
EDIT :
I also changed the .home a with
display:flex;
flex-direction:column; so that your picture goes under your text.
have you used grid systems? It'll make everything a lot easier to do and your webpage much more responsive. Check out some of my sample code here: https://github.com/apanesar11/CSS-Grids
The reason you're having this behavior currently is because span is an inline element, whereas div is a block element. Because of this the about.png and phone.jpg images are positioned currently, because start a new, since they are wrapped in a div element. Your project.jpg img is wrapped within a span element and span elements do not start on a new line and they take only the space they need.
It's me again :) today am trying to develop a sliding divs with text navigation, i mean that i can edit the nav not only generated bullets. say that we have three divs containing images and text and i need to center a navigation menu of three different links.. also if you can help me in that, if the current slider is number 3 and I clicked on nav item number 1 I want it to jump to 1 without seeing 2 during the scrolling
here is the original code i need to learn how to develop it http://www.alfaromeo.co.uk/models/giulietta#dynamism
links to a similar article or any help in general would be very appreciated
.item--mobile .slider-item__wrap{height:300px;overflow:hidden}
.row-slide,.row-wrap{*zoom:1;clear:both;position:relative}
.row-slide:before,.row-slide:after,.row-wrap:before,.row-wrap:after{content:" ";display:table}
.row-slide:after,.row-wrap:after{clear:both}
.row-slide .content__text .animated-line,.row-wrap .content__text .animated-line{top:12px}
#media screen and (min-width:769px){.slider-menu{width:100%;font-size:0;position:absolute;right:0;bottom:42px;left:0;text-align:center;z-index:4}
.slider-menu>ul,.slider-menu>ul>li{display:inline-block}
.slider-menu>ul{padding:0;font-size:0;width:100%}
.slider-menu>ul>li{font:14px/14px "ApexNew-Medium",Helvetica,Arial,sans-serif;color:#000;background-color:#fff;text-transform:uppercase;letter-spacing:2px;padding-top:10px;padding-bottom:10px;border-right:1px solid #000;cursor:pointer;max-width:180px;width:100%;text-align:center}
.slider-menu>ul>li:first-child{position:relative}
.slider-menu>ul>li:first-child:before{content:"";width:90%;height:1px;position:absolute;bottom:5px;left:5%;background:#8f0c25}
.slider-menu>ul>li:last-child{border-right:0}
.slider-menu>ul>li.active{background-color:#8f0c25;color:#fff}
}
#media screen and (min-width:1366px){.slider-menu>ul>li{max-width:220px}
}
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current">
images and text goes here 1
</div>
<div class="slide">
images and text goes here 2
</div>
<div class="slide">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a></li>
<li><a>link to slide 2</a></li>
<li><a>link to slide 3</a></li>
</ul>
</div>
</div>
It looks like you want to develop a carousel.
There are several javascript and jQuery carousels, for example Slick and
jCarousel
It will be much easier to use a plugin or somebody else's solution for this. Download one of the examples and follow the site's instructions for how to integrate it into your own site.
Otherwise, use your browser's Developer Tools or script debugging feature to study the script for that site you pointed to. You can also study the code of jCarousel and Slick, for example, or any library.
Here is a very simple example of a custom carousel I threw together that you can study. It uses progressive enhancement and takes advantage of scrolling so that even without javascript users still get a decent experience and can flip through content. (Though you could easily tailor it to hide the scrollbar by swapping images instead, for example).
The main parts are: 1) styling so that only one content panel shows at a time, and 2) the logic to animate the sliding of the panels when user navigates.
$(".slider-menu a").on("click", function() {
var $current = $(".slide.current");
var $li = $(this).closest("li");
var idx = $li.index();
if (idx !== $current.index()) {
$(".slider-menu li.current").removeClass("current");
$li.addClass("current");
var $next = $(".slide").eq(idx);
$current.removeClass("current");
$next.addClass("current");
var $carousel = $(".slider-item-wrap");
var left = $carousel[0].scrollLeft + $next.position().left;
$carousel.animate({
scrollLeft: left
}, 500);
}
});
html,
body,
.row-slide,
.slider-item-wrap {
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 0;
color: #fff;
overflow: hidden;
}
.row-slide {} .slider-item-wrap {
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
.slide {
width: 100%;
height: 100%;
font-size: 24px;
display: inline-block;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.slider-menu {
position: absolute;
margin: 0 auto;
width: 100%;
margin: 0;
border: 0;
padding: 0;
bottom: 20px;
}
.slider-menu ul {
list-style: none;
overflow: auto;
margin: 0 auto;
border: 0;
padding: 20px;
text-align: center;
}
.slider-menu li {
padding: 4px 20px;
display: inline-block;
text-align: center;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.slider-menu li:hover {
background-color: rgba(255, 255, 255, 0.7);
color: #222;
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.slider-menu li.current,
.slider-menu li.current:hover {
background-color: rgba(0, 0, 0, .2);
color: #333;
box-shadow: 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-slide">
<div class="slider-item-wrap">
<div class="slide current red">
images and text goes here 1
</div>
<div class="slide blue">
images and text goes here 2
</div>
<div class="slide green">
images and text goes here 3
</div>
</div>
<div class="slider-menu">
<ul>
<li class="current"><a>link to slide 1</a>
</li>
<li><a>link to slide 2</a>
</li>
<li><a>link to slide 3</a>
</li>
</ul>
</div>
</div>
So I am using this code:
http://jsfiddle.net/xSmNs/
$(document).ready(function() {
$('#lightbox_button').click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
});
To make popups on click of a link. I want multiple links that output different divs. I was going to just make multiple instances of this code (changing the id so that the buttons open their corresponding divs) but I am wondering if there is a more efficient method using this code?
You can use $.fn.lightbox as a function itself and apply it on a DOM object.
http://jsfiddle.net/7rfpwctm/2/
$(document).ready(function() {
$.fn.lightbox = function(){
$(this).click(function() {
$('#lightbox').fadeIn('slow');
$('#lightbox_panel').fadeIn('slow');
});
$('#close_lightbox').click(function() {
$('#lightbox').fadeOut('slow');
$('#lightbox_panel').fadeOut('slow');
});
};
$('#lightbox_button').lightbox();
$('#another_lightbox_button').lightbox();
});
#lightbox_panel
{
position: relative;
z-index: 99;
width: 500px;
height: 100px;
margin: 30px auto 0;
background-color: #CCC;
display: none;
padding: 10px;
}
#lightbox
{
z-index: 90;
position: absolute;
background-color: #000;
opacity: 0.8;
filter: alpha(opacity=80);
width: 100%;
height: 100%;
display: none;
top: 0;
}
#close_lightbox
{
}
#lightbox_button{
position:absolute;
left:0;
top:100%;
width:200px;
}
#another_lightbox_button{
position:absolute;
right:0;
top:100%;
width:400px;
}
.button
{
position: absolute;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #000;
display: inline-block;
bottom: 10px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<a href="#" id="lightbox_button">
<div class="button">button</div>
</a>
<a href="#" id="another_lightbox_button">
<div class="button">another button</div>
</a>
<div id="lightbox_panel">
<h1>lightbox panel</h1>
<a href="#" id="close_lightbox">
<div class="button">close</div>
</a>
</div>
</div>
<div id="lightbox"></div>
Something like this helps?
Give the light box button 2 data-attributes, which points to the divs which needs to be popup when clicking on that. Also use a common class for all light box buttons.
<a href="#" class="lightbox_button" data-box="#lightbox" data-panel="#lightbox_panel">
<div class="button" >button</div>
</a>
Then you can re-use the code like,
$('.lightbox_button').click(function () {
$($(this).data("box")).fadeIn("slow");
$($(this).data("panel")).fadeIn("slow");
});
Fiddle
You could use this function:
function doModal(boxid,show) {
if (show) {
$('#'+boxid).fadeIn('slow');
$('#'+boxid+'_panel').fadeIn('slow');
} else {
$('#'+boxid).fadeOut('slow');
$('#'+boxid+'_panel').fadeOut('slow');
}
}
And then on your buttons or links:
<span onclick="doModal('Box1',true)">Open Box 1</span>
<span onclick="doModal('Box2',true)">Open Box 2</span>
For closing the boxes:
<span onclick="doModal('Box1',false)">Close Box 1</span>
<span onclick="doModal('Box2',false)">Close Box 2</span>
I know how to answer my question, I'm just posting to see if there's a better way to do what I'm already doing.
Let's say I'm making a website that sells 4 different types of posters. I want the user to see each of the posters in a row. and when they hover over each picture the image will change to show the price, and measurements of the poster.
How I achieved this:
<ul>
<li> image link here using onmouseover and onmouseout for hover over effects </li>
<li> same as above </li>
<li> same as above </li>
<li> same as above </li>
</ul
Then I just styled the list to remove bullets and aligned it horizontally. Now here's my question... I am currently using onmouseover and onmouseout for hover over effects Because you need 2 images in order to achieve this you need a lot of data, especially if you're going to do this for, say, a grid of 25 images for an art portfolio.
Is this a bad way to get a hover over effect? I'm assuming because I'm new at web-development anything I can throw onto a webpage is going to be somewhat crude and not efficient.
You could have another div within the <li> containing the info you wanted. Have this absolutely positioned over the image and then show it on hover using opacity.
Demo
HTML
<ul>
<li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li>
<li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li>
<li><img src="http://placehold.it/350x150" alt="" /><div class="info">Info here</div></li>
</ul>
CSS
ul,li {
list-style: none;
}
li {
display: inline-block;
position: relative;
z-index: 1;
}
img {
display: block;
}
.info {
opacity: 0;
color: white;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 2;
background: red;
.transition(opacity 0.5s ease);
}
li:hover .info {
opacity: 1;
}
I made an example for you :)
You can line .image next to each other with display: inline-block;
Have a fiddle!
HTML
<div class="image">
<img src="http://www.placehold.it/200X200" />
<div class="text">Hello</div>
</div>
CSS
.image {
position: relative;
width: 200px;
height: 200px;
}
.text {
display: none;
}
img {
cursor: pointer;
}
img:hover + .text, .text:hover {
position: absolute;
bottom: 0;
height: 50px;
background: rgba(0, 0, 0, 0.5);
display: block;
padding: 10px;
width: 180px;
cursor: pointer;
}
Using jQuery the jquery plugin along with the easing plugin.
I have a series of anchors, in a list which are all fixed heights and widths. Within each div is another I've called 'content', this is positioned absolute and slides into view, from the bottom, when the mouse enters the containing div. When the mouse leaves the containing div, the 'content' div slides back out of view.
I had this working, using a combination of top and bottom values but this doesn't work cross-browser (only works correctly in firefox from what I can tell). The code for this is below (html, css and javascript):
<!doctype html>
<head>
<style>
.index {
float: left;
margin: 0 0 30px 0;
margin-left: 0;
padding: 0;
position: relative;
}
.index li {
border: 2px solid #f3f3f3;
float: left;
list-style: none;
font-family:"Helvetica";
font-size:14px;
font-weight:normal;
margin: 0 10px 10px 0;
padding: 1px;
position: relative;
}
.index li a {
float: left;
height: 126px;
overflow: hidden;
position: relative;
width: 224px;
}
.index li img {
display: block;
}
.index li .content {
background: #f7f7f7;
bottom: auto;
display: block;
margin: 0;
padding: 10px 0 3px;
position: absolute;
top: 132px;
width: 224px;
}
.index li a:hover .content {
bottom: 0;
top: auto;
}
.index .content h3 {
background: url(../img/content/arw-sma.png) no-repeat 0 -100px;
color: #666;
margin: 0 10px 1px;
padding-left: 20px;
}
.index .content p {
color: #999;
display: block;
float: left;
font-size: 12px;
margin: 0 10px 2px;
padding: 0;
}
</style>
<script src="js//jquery-1.6.2.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script type="text/javascript">
$(function(){
$('.index .content').css( {'top':'132px', 'bottom':'auto'});
$('.index li a').hover(
function(){
$(this).find('img').animate({'opacity': '.7'}, 200);
$(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});
},
function(){
$(this).find('img').animate({'opacity': '1.0'}, 200);
$(this).find('.content').animate({'top':'132px'}, 150);
}
);
});
</script>
</head>
<body>
<ul class="index panel">
<li>
<a href="#" title="TITLE TEXT.">
<img src="thumb-1.jpg" alt="ALT TEXT." />
<div class="content">
<h3>Title Here</h3>
<p>Other content goes here</p>
</div>
</a>
</li>
<li>
<a href="#" title="TITLE TEXT.">
<img src="thumb-1.jpg" alt="ALT TEXT." />
<div class="content">
<h3>Title Here</h3>
<p>Other content goes here</p>
</div>
</a>
</li>
<li>
<a href="#" title="TITLE TEXT.">
<img src="thumb-1.jpg" alt="ALT TEXT." />
<div class="content">
<h3>Title Here</h3>
<p>Other content goes here</p>
</div>
</a>
</li>
</ul>
</body>
Different browsers don't like using both top and bottom values. So ideally, I'm guessing I need to just use 'top'. The problem is, I don't know how tall the 'content div' will be, so I can't set an explicit value, as if its taller, it will chop off some of the content.
Since I know the anchor will be 126 pixels in height. I've been trying to use .height() to detect the height of the 'content div'. Then subtract this value from 126 - which would leave me with the value I need to set 'top' to be, to position it within the div.
Does this sound plausible and am I making sense? Hopefully this isn't to long winded, just trying to be as detailed as I can.
Hope someone can help and I love forward to you replies!
demo jsBin
Use SPAN instead of DIV (DIV are block level elements, and AFAIK it won't validate your document.)
You can just set an initial bottom value like -132...-150 ...or whatever you prefer for your .content
.index li .content {
background: #f7f7f7;
bottom: -132px;
display: block;
margin: 0;
padding: 10px 0 3px;
position: absolute;
top: 132px;
width: 224px;
}
jQ:
$(function(){
$('.panel li a').hover(
function(){
$(this).find('img').animate({'opacity': '.7'}, 200);
$(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});
},
function(){
$(this).find('img').animate({'opacity': '1.0'}, 200);
$(this).find('.content').animate({'bottom':'-132px'}, 150);
}
);
});
THe other solution I would use is to: at DOM ready, calculate each content height ( var outerH = $(this).outerHeight(true) ) and set that value as a data-height for each element. ($(this).data('height', outerH);). Than you can animate on hover the exact N of px that is stored in that element data-height.