Adding buttons for previous and next slide in Vegas slider - javascript

I have very simple slider created with Vegas Slideshow. Now I'm trying to add simple Prev/Next buttons. This is the slider
<div class="slide-caption"></div>
<script src="/assets/js/jquery-3.4.0.min.js"></script>
<script src="/assets/js/vegas.min.js"></script>
<script>
$(".slider-wrapper").vegas({
slides: [
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
],
walk: function (index, slideSettings) {
$('.slide-caption').html(slideSettings.text);
}
});
</script>
This works perfectly. It is showing the image and the caption bellow.
Now I've tried to add this for the buttons but nothing is appeared on page. There is no errors in console. I'm not sure also if I need to add the HTML for the buttons or it is pull them from the JS and CSS of the Vegas
<script>
$(".slider-wrapper").vegas({
slides: [
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
{ src: "/assets/images/slide-1.jpg", text: "Deployment" },
],
walk: function (index, slideSettings) {
$('.slide-caption').html(slideSettings.text);
}
});
// buttons
$('a#previous').on('click', function () {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});
$('a#next').on('click', function () {
$elmt.vegas('options', 'transition', 'slideLeft2').vegas('next');
});
</script>
Anyone know how exactly I can add the buttons?

I haven't tested this, but it may get you heading in the right direction...
HTML...
<div id="previous" class="button"></div>
<div id="next" class="button"></div>
JQUERY...
<script>
$("#previous").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('previous');
});
$("#next").click( function() {
$elmt.vegas('options', 'transition', 'slideRight2').vegas('next');
});
</script>
CSS...
.button {
display: block;
height: 100px;
width: 100px;
background-color: purple;
}

Related

Open the menu with Hover and close it by clicking outside the cart

My problem is that by moving the shopping cart button, the card menu opens and by clicking except the card menu, the card box should be closed. I wrote some of these, help me get the solution, thank you.
$(document).ready(function() {
$('.shop').hover(function() {
$('.carts').css('visibility', 'visible');
});
});
You could check if the clicked target (e.target) is not the .carts element (negation with !):
if (!$(e.target).is('.carts')) {
$('.carts').css('visibility', 'hidden');
}
Working example:
$(document).ready(function () {
$('.shop').hover(function () {
$('.carts').css('visibility', 'visible');
});
$('body').click(function(e) {
if (!$(e.target).is('.carts')) {
$('.carts').css('visibility', 'hidden');
}
});
});
.shop {
background-color: yellow;
}
.carts {
background-color: red;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="shop">Shop</span>
<div class="carts">Test</div>
$(document).click(function() {
$(".carts").hide();
});
$(".carts").click(function(event) {
event.stopPropagation();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="carts" style="width: 50px;height: 50px;border: 1px solid;"></div>

v-show inside a v-for loop, i need to open only the clicked option

I just started learning Vue.js and I need some help. I have a v-show within a v-for loop set up, there is a show button within the loop, when I click this, at the moment it opens all the hidden divs, I want it to open only the relevant one that's clicked. Maybe there is another way to do this or a better way I have been reading that v-show might not be suited to be used inside a loop.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
}
.content {
width: 100px;
height: 100px;
background-color: red;
}
.contenttwo {
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div id="root">
<div v-for="item in dropdownVoices" :key="item.voice" class="">
<div v-show="active" class="content">
</div>
<div v-show="!active" class="contenttwo">
</div>
<button type="button" name="button" v-on:click="active = !active">Change me</button>
</div>
</div>
<script charset="utf-8">
var app = new Vue({
el: '#root',
data: {
active:true,
dropdownVoices:[
{ voice: 'One' },
{ voice: 'Two' },
{ voice: 'Three' },
{ voice: 'Four' },
{ voice: 'Five' },
{ voice: 'Six' }
],
},
method:{
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
Thanks in advance for the help.
The problem is you are tracking the active changes with only one variable active but you need to track each item, so you have two options add an active property to each item object or track the active item in an array. I'm going to show you the first
// script
data: {
dropdownVoices:[
{ voice: 'One' , active: true},
{ voice: 'Two' , active: true},
{ voice: 'Three' , active: true},
{ voice: 'Four' , active: true},
{ voice: 'Five' , active: true},
{ voice: 'Six', active: true }
],
}
// template
<div v-for="item in dropdownVoices" :key="item.voice" class="">
<div v-show="item.active" class="content"></div>
<div v-show="!item.active" class="contenttwo"></div>
<button type="button" name="button" v-on:click="item.active = !item.active">Change me</button>
</div>
Note: If you only want to change the div styles you can do it with a bind class.
<div :class="item.active ? 'content' : 'contenttwo'"></div>

Why are images duplicated with append()?

When a "project" is clicked, I want multiple images to be appended to a container element.
Projects and their image URLs are defined in a JavaScript object.
If I click a project, its images are correctly appended. But if I close the project viewer and click that project again, the images are all duplicated. I think this has something to do with append().
What am I doing wrong?
I made a demonstration below:
$(function() {
var projects = {
'project_1': {
'title': 'EduTravel For Credit',
'description': 'Innovative travel for credit.',
'images': [
'http://lorempixel.com/400/30/abstract/1/',
'http://lorempixel.com/400/30/abstract/2/'
]
}
}
var projectData = projects["project_1"];
jQuery('button').on('click', function() {
$.each(projectData.images, function(item) {
$('#project-images').append('<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>')
});
$('#project_images').html('');
});
});
.image_holder {
display: block;
height: 30px;
background-size: cover;
margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLICK ME</button>
<div id="project-images"></div>
View the live website
From the source code on your website, it seems that you might be attempting to remove images from the container before appending new images:
$('#project_images').html('');
However, that selector uses an underscore while the actual element uses a hyphen:
<div id="project-images">
Also, you are clearing the contents after appending images rather than before.
I suggest using jQuery's empty() on the container before appending new images:
$(function() {
var projects = {
'project_1': {
'images': [
'http://lorempixel.com/400/30/abstract/1/',
'http://lorempixel.com/400/30/abstract/2/'
]
},
'project_2': {
'images': [
'http://lorempixel.com/400/30/abstract/3/',
'http://lorempixel.com/400/30/abstract/4/'
]
},
'project_3': {
'images': [
'http://lorempixel.com/400/30/abstract/5/',
'http://lorempixel.com/400/30/abstract/6/'
]
}
}
var projectData = projects["project_1"];
jQuery('button').on('click', function() {
var id=jQuery(this).data('id'),
projectData=projects["project_"+id];
$('#project-images').empty();
$.each(projectData.images, function(item) {
$('#project-images').append('<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>')
});
});
});
.image_holder {
display: block;
height: 30px;
background-size: cover;
margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>
<div id="project-images"></div>
An alternate method is to concatenate a string of new images, and then set the HTML of the container without using append():
$(function() {
var projects = {
'project_1': {
'images': [
'http://lorempixel.com/400/30/abstract/1/',
'http://lorempixel.com/400/30/abstract/2/'
]
},
'project_2': {
'images': [
'http://lorempixel.com/400/30/abstract/3/',
'http://lorempixel.com/400/30/abstract/4/'
]
},
'project_3': {
'images': [
'http://lorempixel.com/400/30/abstract/5/',
'http://lorempixel.com/400/30/abstract/6/'
]
}
}
var projectData = projects["project_1"];
jQuery('button').on('click', function() {
var id=jQuery(this).data('id'),
projectData=projects["project_"+id],
html_string='';
$.each(projectData.images, function(item) {
html_string+='<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>';
});
$('#project-images').html(html_string);
});
});
.image_holder {
display: block;
height: 30px;
background-size: cover;
margin: 0 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>
<div id="project-images"></div>

JS div Popup issue

I have some divs that appear on click of a link, but i am trying to make it so that when you click on a 2nd link to popup, any open ones will be closed before the new one opens. there should only be one open at a time.
the js...
<script>
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
width: 'toggle'
}, "fast", easing, callback);
};
$(function () {
function select($link) {
$link.addClass('selected');
$($link.attr('href')).slideFadeToggle(function () {});
}
function deselect($link) {
$($link.attr('href')).slideFadeToggle(function () {
$link.removeClass('selected');
});
}
$('.contact').click(function () {
var $link = $(this);
if ($link.hasClass('selected')) {
deselect($link);
} else {
select($link);
}
return false;
});
$('.close').live('click', function () {
deselect();
return false;
});
});
</script>
the divs...
<div id='did_{$page_trackid}' class='arrow_box pop_{$page_trackid}' style=''> <img src='".$info4['Image']."' class='subtext_img'>
<h2 class='subtext'><a href='http://www.xxxxxxx.co.uk/dnb/".$info2['username']."'>".$info2['username']."</a></h2>
<p class='subtext'>".$info3['user_title']."</p>
<p class='subtext'><a href='".$info3['website_link']."' target='_blank'>".$info3['website_link']."</a>
</p>
</div>
<div id='did_2_{$page_trackid}' class='arrow_box2 pop_stats_{$page_trackid}' style=''>
<h2 class='subtext'>Stats</h2><br />
<p class='subtext'>Plays: 1m <br />
Downloads: 527, 046
</p>
</div>
the links...
<div style='position: absolute; z-index: 2; padding-top: 30px; padding-left: 699px;'>
<a href='#did_{$page_trackid}' class='contact' ><img style='height: 20px;' alt='Posted by' src='http://www.xxxxxxxxxx.co.uk/play1/skin/user-profile2.png' style=''></a>
</div>
<div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
<a href='#did_2_{$page_trackid}' class='contact'><img style='height: 20px;' alt='Track stats' src='http://www.xxxxxxxx.co.uk/play1/skin/stats.png' style=''></a>
</div>
I have tried replacing the first function with
function select($link) {
$link.addClass('selected');
$('.arrow_box:visible').slideFadeToggle(function () {});
$($link.attr('href')).slideFadeToggle(function () {});
}
but that bugs out, with one pop over lapping the other. I have 2 classes for the divs(1 for each) so i attempted to add
$('.arrow_box2:visible').slideFadeToggle(function () {});
but that too doesnt work.
Am i going about it the right way to close any open arrow_box or arrow_box2 when clicking a link to open a new pop up??
thanks
I copied your html and js into a jsfiddle and modified the select method. Try it out here:
http://jsfiddle.net/mchail/wHyfK/1/
I believe this now does what you asked for. The key is to toggle any shown panes (to hide them) before toggling the new "selected" pane (to show it).
Hope this helps.

Using jquery to show next div element

I am using colorbox.js to display some forms in a lightbox. There are multiple forms on a page and each form has a link that will open the form in the lightbox. Right now, the lightbox will open but the form will not be showing. Here is my jquery script:
jQuery(document).ready(function() {
$('.myForm').hide();
$('.link_to_form').click( function() { $(this).next('.myForm').show() } );
$(".link_to_form").colorbox({
width: "50%",
inline: true,
opacity: ".5",
href: ".myForm",
onClosed: function() {
$(".myForm").hide();
}
});
});
My HTML for two forms and two links is:
Form 1
<div class="myForm">
<form></form>
</div>
Form 2
<div class="myForm">
<form></form>
</div>
Working demo http://jsfiddle.net/2anwK/3/
script
<script type='text/javascript' src="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/colorbox.css">
code
$('.myForm').hide();
$('.link_to_form').click(function() {
$(this).next('.myForm').show()
});
$(".link_to_form").colorbox({
width: "50%",
inline: true,
opacity: ".5",
href: ".myForm",
onClosed: function() {
$(".myForm").hide();
}
});
Working Image
Here is what you have to do:
You can take a look the reference to see how to implement.
HTML
Form 1
<div id="myForm1" class="myForm">
<form>
<p>text1</p>
</form>
</div>
Form 2
<div id="myForm2" class="myForm">
<form>
<p>text2</p>
</form>
</div>
JS
jQuery(".link_to_form").on('click', function() {
var $self = $(this),
$popup = $self.next('.myForm');
$self.colorbox({
width: "50%",
inline: true,
opacity: "0.5",
onOpen: function() {
$popup.show();
},
onClosed: function() {
$popup.hide();
}
});
});
css
.myForm{
display: none;
}
DEMO

Categories

Resources