I am working in Squarespace and quite new to Javascript and HTML.
In the screenshot below you could see that I am trying to create an effect that when you hover on one of the titles on the left, the image on the right in summary block changes. Since I am learning as I go I have created a code block for the titles and included a javascript in there as well. I assigned a id number to each title corresponding to the photo. However I just can not figure out how to make it work. All the info came from expecting other websites and seeing what code they are using. Could someone help me where I am going wrong - probably all sorts of things :-(
enter image description here
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script>
$( window ).ready(function() {
var screenRes = $(window).width();
$(window).resize(function () {
screenRes = $(window).width();
});
setTimeout(function(){
if (screenRes >= 768) {
jQuery('.summary-item-list .summary-item').each(function(){
var ids = jQuery(this).attr('id');
console.log(ids);
$(this).find('.summary-title').attr('data-id', ids);
var link = $(this).find('.summary-title-link').attr('href');
if (typeof link !== 'undefined') {
$(this).find('.summary-title a').wrapInner('<span></span>');
}
else {
$(this).find('.summary-title').wrapInner('<span></span>');
}
$(this).find('.summary-title').appendTo('.gallery-titles');
});
jQuery('.gallery-titles .summary-title:first-of-type').addClass('active');
var dataid = $('.gallery-titles .summary-title:first-of-type').data('id');
var link = $('#' + dataid + ' .summary-title-link').attr('href');
$('#' + dataid).addClass('active');
jQuery('.gallery-titles .summary-title').on("mouseover", (function(){
jQuery('.gallery-titles .summary-title').removeClass("active");
jQuery('.summary-item').removeClass("active");
$(this).addClass('active');
var dataid = $(this).data('id');
console.log(dataid);
$('#' + dataid).addClass('active');
}))
}
}, 200);
if (screenRes < 768) {
$('.summary-item-list').slick({
slide: '.summary-item',
infinite: true,
centerMode: false,
slidesToShow: 1,
autoplay: false,
dots: false,
fade: true,
cssEase: 'linear',
lazyLoad: 'ondemand',
});
}
});
</script>
<div class="gallery-titles">
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11534">
<a href="/blog/tempus-blandit" class="summary-title-link">
<span>Tempus blandit</span>
</a>
</div>
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11536">
<a href="/blog/Tempus-porttitor" class="summary-title-link">
<span>Tempus porttitor</span>
</a>
</div>
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11538">
<a href="/blog/Curabitur-blandit" class="summary-title-link">
<span>Curabitur blandit</span>
</a>
</div>
<div class="summary-title" data-id="yui_3_17_2_1_1599508505867_11540">
<a href="/blog/Curabitur-blandit-tempus-porttitor" class="summary-title-link">
<span>Curabitur blandit tempus porttitor</span>
</a>
</div>
</div>
Here is a nice pure CSS solution:
p {
font-family: sans-serif;
}
p:hover {
color:red;
}
#image {
position: absolute;
right:1vw;
top:0;
width: 70vw;
height:40vh;
}
#a:hover ~ #image {
background: url("x") red;
}
#b:hover ~ #image {
background: url("y") green;
}
#c:hover ~ #image {
background: url("z") blue;
}
<p id="a">Image Description 1</p>
<p id="b">Image Description 2</p>
<p id="c">Image Description 3</p>
<img id="image" />
Of course you should replace
background: url("y") green;
with
background: url("/path/to/image/");
Related
I'm using fancybox (2.15) and elevatezoom (3.0.8) that come with Magento 1.9.2.4, to zoom the main image and create a fancybox gallery with the other images of the gallery. Fancybox is opened when clicking on the main image.
What i need, is to use the thumbnail helper to navigate the thumbnails while the fancybox is open, but the problem is that I'm not able to initialize it in the easiest and suggested way, like
$(selector).fancybox({config});
and the way i'm using has no effect on the fancybox appearance.
This is the code i'm using
js
$(document).ready(function() {
if($('.thumb-link').size() == 0){
var ez = $('.gallery-image.visible').first().data('zoom-image');
}else{
var ez = $(".thumb-link");
}
$.fancybox({
'width':400,
'height': 500,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
$(".gallery-image.visible").bind("click", function(e) {
$.fancybox(ez);
return false;
});
});
where .gallery-image.visible is the main image and the .thumb-link are the thumbnails in my Html.
Following other questions like this one using fancybox set height and width
but I actually get not visible effect on the fancybox.
Is there a different way to re-initialize fancybox configurations before calling it effectively?
EDIT:
Actually I changed my code in this way:
var fancyConfig = {'width' : 200, 'height': 300,...};
$(".gallery-image.visible").bind("click", function(e) {
$.fancybox(ez, fancyConfig);
return false;
});
and I can see some effects but no trace of thumbs....I included and can see the proper libraries for fancybox thumbnails helper.
I think that this piece of code does not do anything, I do not see any selector or collection of objects here:
$.fancybox({
'width':400,
'height': 500,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
I think you should replace $.fancybox(ez); with $.fancybox.open(ez, {config});
Actually I found out that using the libraries used in the fiddle and not the ones I was loading in my server, makes the scripts compatible and it works.
So in this way it works:
var fancyConfig = {
helpers : {
thumbs : {
width : 50,
height : 50
}
}
};
$(".gallery-image").click(function(e) {
$.fancybox(ez, fancyConfig);
return false;
});
and the fiddle
$(document).ready(function() {
if($('.thumb-link').size() == 0){
var ez = $('.gallery-image.visible').first().data('zoom-image');
}else{
var ez = $(".thumb-link");
}
var fancyConfig = {
'speedIn' : 1000,
'speedOut' : 1000,
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
};
$(".gallery-image.visible").bind("click", function(e) {
$.fancybox(ez, fancyConfig);
return false;
});
});
ul {
list-style: none;
margin: 0;
padding: 0;
}
.product-image-thumbs li:first-child {
margin-left: -1px;
}
.product-image-thumbs li{
display: inline-block;
margin-right: 2%;
}
.product-image-thumbs a {
display: inline-block;
border: 1px solid #cccccc;
overflow: hidden;
}
.product-image-thumbs a img{
width: 122px;
height: 122px;
overflow: hidden;
}
.product-image-gallery .gallery-image {
display: none;
}
.product-image-gallery .gallery-image.visible {
display: block;
}
.product-img-box .product-image img {
max-width: 100%;
max-height: 750px;
width: 500px;
max-width: 500px;
margin: 0px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet"/>
<div class="product-img-box">
<div class="product-image product-image-zoom zoom-available">
<div class="product-image-gallery">
<img id="image-main"
class="gallery-image visible"
src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg"
alt="custom-alt"
title="img-title"
data-zoom-image="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
<img id="image-main"
class="gallery-image"
src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
<img id="image-0"
class="gallery-image"
src="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg" />
<img id="image-1"
class="gallery-image"
src="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=" />
<img id="image-2"
class="gallery-image" src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" />
</div>
</div>
</div>
<div class="more-views">
<ul class="product-image-thumbs">
<li>
<a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="2" href="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg">
<img src="https://static.pexels.com/photos/111755/pexels-photo-111755.jpeg" alt="custom-alt" />
</a>
<a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="0" href="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg">
<img src="https://static.pexels.com/photos/67832/sunrise-sky-blue-sunlight-67832.jpeg" alt="custom-alt" />
</a>
<a class="thumb-link" title="my-title" rel="fancybox-thumb" data-image-index="1" href="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=g">
<img src="https://media.istockphoto.com/photos/majestic-sunrise-over-the-mountains-picture-id185067762?k=6&m=185067762&s=612x612&w=0&h=QFGIsuncZGtiLeCQk6aMR14nOUrJNsFmXgpbT7oEU0c=" alt="custom-alt" />
</a>
</li>
</ul>
</div>
I have this code, but I do not know how to hide the video when clicking outside.
Here is my code:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
I tried everything but clearly I am doing something wrong.
Thank you in advance.
This example shows the video when clicking on the image and hides when you click anywhere else:
$(".popup").click(function (e) {
e.stopPropagation();
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});
$(document).click(function() {
$("#video-view").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
The trick is to add a hidden layer on all the screen. When the user clicks on that layer, you will hide the movie.
keep attention to the z-index, it's important.
Like this:
$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
$('.overlay').show();
});
$('.overlay').click(function(){
$(this).hide();
$('#video-view').html('');
});
#video-view {
z-index: 2;
position:relative;
display: inline-block;
}
.overlay {
position: absolute;
z-index:1;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>
<div class="overlay"></div>
I would like to show img on mouseover event over a thumbnail with help of data-attr but only the first thumbnail is working.
DEMO http://jsfiddle.net/3gn0kj1k/
I have tried a lots of things but without the success therefore I am here.
JS code :
enter code here
var animIcon = $(".graph-icons img");
var dataAnim = $(".graph-anim .animation").data("anim");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
if ($(this).data("img") === dataAnim) {
console.log(dataAnim);
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
}
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
From the .data documentation (with my own emphasis):
return the value at the named data store for the first element in the
set of matched elements.
A way to fix it would be to simply use $(this).data("img") (which you're already checking against):
var dataAnim = $(this).data("img")
$('.graph-anim .animation[data-anim=' + dataAnim + ']').css({
"opacity": "1"
});
Updated Fiddle
you can just get the attribute and display according to this . Try following code.here is updated fiddle fiddle
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var attr=$(this).attr('data-img');
$('.animation[data-anim=' + attr + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
li {
list-style: none;
}
.graph-icons img {
width: 70px;
display: inline-block;
float: left;
padding-right: 30px;
margin-bottom: 50px;
cursor: pointer;
}
.graph-icons:after {
clear: both;
content:"";
display: block;
}
.graph-main {
position: relative;
}
.graph-anim .animation {
position: absolute;
top: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- ICONS -->
<div class="graph-icons">
<li>
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png" data-img="kenny">
</li>
<li>
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg" data-img="stan">
</li>
<li>
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067" data-img="kyle">
</li>
</div>
<!-- anim -->
<div class="graph-main">
<div class="graph-main-img">
<img src="http://2.images.southparkstudios.com/default/image.jpg?quality=0.8" alt="">
</div>
<div class="graph-anim">
<div class="animation" data-anim="kenny">
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/KennyMcCormick.png">
</div>
<div class="animation" data-anim="stan">
<img src="http://static.giantbomb.com/uploads/scale_small/0/4810/1202378-stan1.jpg">
</div>
<div class="animation" data-anim="kyle">
<img src="https://em.wattpad.com/0bf45eee023c7403ca0cb15d127e6c8852a57d28/687474703a2f2f736f7574687061726b73747564696f732e6d74766e696d616765732e636f6d2f7368617265642f636861726163746572732f6b6964732f6b796c652d62726f666c6f76736b692e6a7067">
</div>
</div>
</div>
Not sure if this approach would be ok for you, but I simplified your script to look like this:
var animIcon = $(".graph-icons img");
animIcon.mouseenter(function () {
$(".graph-main-img").css({
"opacity": "0"
});
var character = $(this).data("img");
$('.graph-anim .animation[data-anim=' + character + ']').css({
"opacity": "1"
});
});
animIcon.mouseleave(function () {
$(".graph-main-img").css({
"opacity": "1"
});
$(".animation").css({
"opacity": "0"
});
});
I have a list where if you click prev next it goes left and right as shown in this fiddle
HTML
<div>
<span id="prev">prev</span>
<ul id="scrolllist">
<li><img src="http://dummyimage.com/100x100/000000/fff"></li>
<li><img src="http://dummyimage.com/100x100/f33636/fff"></li>
<li><img src="http://dummyimage.com/100x100/0c5b9e/fff"></li>
<li><img src="http://dummyimage.com/100x100/0c9e0c/fff"></li>
</ul>
<span id="next">next</span>
</div>
CSS
div {
float: left;
width: 550px;
}
li {
float: left;
list-style-type: none;
margin: 0 5px;
}
#prev {
cursor: pointer;
float: left;
}
#next {
cursor: pointer;
float: right;
}
JS
$(function () {
$('#prev').click(function () {
var first = $('#scrolllist li:first-child');
$('#scrolllist li').parent().append(first).animate({ "left": "-=50px" }, "slow" );
});
$('#next').click(function () {
var last = $('#scrolllist li:last');
$('#scrolllist li').parent().prepend(last).animate({ "left": "+=50px" }, "slow" );
});
});
This works moves them across as expected however I want to scroll the list items across to get the affect of them going in the clicked direction similar to what can be seen in http://coolcarousels.frebsite.nl/c/58/
What do I need to do to get this working?
The trick to doing it right is to place the images in a hidden container div and then animate that container to the left or right as needed, cloning the first or last img in the list and then appending or prepending depending on the direction.
The img container div must be placed inside another div with an explicit height and width with overflow set to hidden. This prevents the wide img container from being visible to the user.
Here is the HTML:
<div>
<span id="prev">prev</span>
<div class="scroll-container">
<div class="img-container">
<img src="http://dummyimage.com/100x100/000000/fff">
<img src="http://dummyimage.com/100x100/f33636/fff">
<img src="http://dummyimage.com/100x100/0c5b9e/fff">
<img src="http://dummyimage.com/100x100/0c9e0c/fff">
</div>
</div>
<span id="next">next</span>
And the JavaScript:
$(function () {
$('#prev').click(function () {
if(!$('.img-container').is(':animated')) {
var first = $('.img-container img:first-child');
var firstClone = first.clone();
$('.img-container').append(firstClone);
$('.img-container').animate({ "left": "-=110px" }, "slow", function() {
first.remove();
$('.img-container').css("left", "0");
});
}
});
$('#next').click(function () {
if(!$('.img-container').is(':animated')) {
var last = $('.img-container img:last-child');
var lastClone = last.clone();
$('.img-container').css("left", "-110px");
$('.img-container').prepend(lastClone);
$('.img-container').animate({ "left": "0" }, "slow", function() {
last.remove();
});
}
});
});
Note the 'if not animated' check at the beginning of each function. This prevents the user from running the functions again before the animation has completed (which would cause weird errors).
Here is a modified version of your fiddle: http://jsfiddle.net/fJqKV/17/
I'm trying to do function to sliding new added content, using jQuery slide effect but I can't apply any solutions to put two divs in a single line. How to fix code below to slide from left to the right side by side? Maybe this code is completely to rebuild?
jsFiddle:
jsfiddle
JS:
$(function() {
$("#hello").html("Hello");
$('#edit').toggle(function() {
var newhtml = '<input type="text" id="hello_input" value="" />';
slideNewContent(newhtml);
}, function() {
var newhtml = $("#hello_input").val();
slideNewContent(newhtml);
});
});
function slideNewContent(c) {
$("#slideOut").empty();
$("#slideIn").children().clone().appendTo("#slideOut");
$("#slideIn").find("#hello").html(c);
var slideOut = $("#slideOut");
var slideIn = $("#slideIn");
slideOutIn(slideOut, slideIn);
}
function slideOutIn(outElement, inElement) {
var hideoptions = { "direction": "right", "mode": "hide" };
var showoptions = { "direction": "left", "mode": "show" };
$(outElement).effect("slide", hideoptions, 1000);
$(inElement).effect("slide", showoptions, 1000);
}
HTML:
<div class="span3">
<div id="slider">
<div id="slideIn" class="content">
<span>
<span id="hello"></span>
<button class="btn btn-mini" id="edit">Edit</button>
</span>
</div>
<div id="slideOut" class="content"></div>
</div>
</div>
CSS:
#slider {
/*float:left;*/
display: inline-block;
}
#slideIn {
width: 270px;
/*display: inline;*/
}
#slideOut {
width: 270px;
/*display: inline;*/
}
#hello_input {
width:160px;
}
Edit to this
$(outElement).effect("slide", hideoptions, 0);
$(inElement).effect("slide", showoptions, 0);