I'm using the AnythingSlider to display a mashup of tweets, blog posts, flickr photos, and youtube videos, and initially it works great. I'm trying to add sort functionality, but to do so I need to remove all slides on a button click -> add the new slides -> and re-initialize the plugin.
The AnythingSlider documentation (as well as the code) hints at the ability to remove slides and the plugin should just take it in stride. I haven't been able to find any kind of remove code anywhere, so I fiugured something like this would work:
$("#slider li:not(.cloned)").remove();
but so far i've had no luck. Anyone have any experience with something like this? Many Thanks.
There isn't any built in code to remove slides, so you could use the code above, or if you really want to just remove all the slides, do this (no need to avoid removing the cloned slides):
$('#slider li').remove();
Then add in whatever new slides you want (sorted or whatever)
$('<li>New Stuff</li>').appendTo('#slider');
Then update the slider
$('#slider').anythingSlider(); // don't include options
The above code is essentially the same code as see on the AnythingSlider demo page (the buttons next to the theme selector). I've included it below with more comments :)
// Add a slide
var imageNumber = 1;
$('button.add').click(function(){
$('#slider1')
// add a new slide, but cycle between two images
.append('<li><img src="images/slide-tele-' + (++imageNumber%2 + 1) + '.jpg" alt="" /></li>')
// update the slider
.anythingSlider();
});
$('button.remove').click(function(){
// don't let the last slide get deleted - it's ok if you do delete it, it's just not purdy ;)
if ($('#slider1').data('AnythingSlider').pages > 1) {
// remove the last slide (the cloned slide is actually the last, that's why there is a ":not()" in there
$('#slider1 > li:not(.cloned):last').remove();
// update the slider
$('#slider1').anythingSlider();
}
});
Related
I have found a way to display text on each of my empty slides. so far, so good. But at you can see in my codepen project, there's a can displaying on the first slide. Instead of the text 'Hello' on each of my slides, how do I display a loop of cans on each slide?
https://codepen.io/Rosstopherrr/pen/GVRvxJ
I had it like this thinking it will show all cans in each slide but it doesn't show any cans...
$('#products article').each(function() {
$(this).append(initApp())
});
what am I doing wrong?
$('#products article').each(function() {
$(this).append('hello')
});
EDIT - progress so far
so in the each.function(index) - I can add the index, and then in initApp(index) - I can add index. and then in the initApp function I can adjust so that bottle[index] gets selected and then added.
But nothing seems to work?? What am I doing wrong?
I know there is a bunch of ways I can do this.
Like could I skip the initApp() function and add all the code in the .each(function() { my code to append bottle})??
in initApp() you define const $container = getElement('.container'); getElement function calls document.querySelector(selector); that returns just the first element that matches the selector, in this case the first div with class .container in the first article tag. That's the first error.
In order to add a bottle to each container you need a list of .containers, that you can obtain with $containers = [...document.querySelectorAll('.container')]
once you have all .container you can integrate the forEach function call, maybe in this way
[$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
$bottle.classList.add('bottle' + i);
$containers[i].append($bottle)
});
it's possible that you will still not find the bottles like in the first item; that's because the single .bottle1, .bottle2, .bottle3 etc have wrong letf and top css properties; in addition, the .side divs miss the background-image property.
we are running e-shop on Prestashop and we need to create Ajax search to find battery and adapter compatibilities on page.
I have made this code: https://jsfiddle.net/fgfjo2n9/
I have 2 problems.
• 1st
I need output to display only heading with compatibilities, not all headings.
Pic: http://imgur.com/a/XAupI
•2nd
We have alot of compatibilities, so page is very slow when you try to search. Is there any way without database, to increase speed while searching?
Demo of slow load: www.powerparts.cz/adaptery-k-notebookum/9-nabijecka-na-notebook-asus-lenovo-msi-toshiba-19v-342a-55x25#idTab_dm_newtab
Thanks alot for any help or tip.
To display only the heading with compatibilities you can alter your $(".komp").each function like so
$(".komp").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
//added
if($(this).siblings(':hidden')) {
$(this).parent().prev().fadeOut();
}
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).parent().prev().fadeIn(); //added
$(this).show();
count++;
}
});
Explanation: Check if all the siblings/items are hidden ($(this).siblings(':hidden')) and if so, fadeOut the parents' previous element(heading) else if any one of the siblings/items matches the search then show(fadeIn) the heading.
Fiddle here
Secondly, to improve the performance of your search, you could implement techniques like Lazy Loading & moving few scripts to the bottom of the body etc. There is much more to it and hence have provided you with links to go through.
https://friendlybit.com/js/lazy-loading-asyncronous-javascript/
http://desalasworks.com/article/javascript-performance-techniques/
I have a (very raw) test site up at http://belmontfeed.com/site/ where I am trying to get the vertical carousel on the right to control the photo on the left.
The Previous/Next buttons work fine, and generally clicking on a carousel item will load the photo associated with it, but whenever I allowWrap on the carousel the click no longer functions.
I believe it is because the appending/prepending messes up the count that the click function is based off of, but I am fairly new to jQuery and am not sure where to turn.
The complete code should be viewable on the above site. Any help would be much appreciated!
if ( opts.allowWrap !== false ) {
// prepend and append extra slides so we don't see any empty space when we
// near the end of the carousel. for fluid containers, add even more clones
// so there is plenty to fill the screen
// #todo: optimize this based on slide sizes
opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).appendTo( wrap );
if ( opts.carouselVisible === undefined )
opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).appendTo( wrap );
opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).prependTo( wrap );
if ( opts.carouselVisible === undefined )
opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).prependTo( wrap );
wrap.find('.cycle-slide-active').removeClass('cycle-slide-active');
opts.slides.eq(opts.startingSlide).addClass('cycle-slide-active');
}
UPDATE: The most direct click function code is as follows:
$('#cycle-2 .cycle-slide').click(function(){
var index = ($('#cycle-2').data('cycle.API').getSlideIndex(this)-8);
slideshows.cycle('goto', index);
});
I added a ghetto fix of just subtracting the count by 8 (as that is the number of prepends) but it stops functioning once it reaches number 8 until it auto rotates back to one. A more sustainable fix would be lovely...
Using the new spec for jquery, you can call
$(document).on('click', '.cycle-carousel-wrap > div', function(e) {...});
This way, jquery finds the object each time, regardless of whether it's been modified/appended/etc.
Hope this helps!
Fixed it! By taking my quick fix and switching the operator from '-' to '%,' I was able to achieve the results I wanted. To set it to a dynamic number I will just swap the eight out for a variable representing the number of looped posts.
$('#cycle-2 .cycle-slide').click(function(){
var index = ($('#cycle-2').data('cycle.API').getSlideIndex(this)%8);
slideshows.cycle('goto', index);
});
I am building a worpdress site and have multiple galleries on a page built using the shortcode. At the moment all the image are given the rel attribute 'prettyPhoto[1]' but I need each gallery to be separate.
I have 56 images in total on the page, so when the first image of gallery 1 opens in lightbox it says 1/56 and I can click through all 56 images, what I want is for gallery one to say 1/16
then gallery 1/16 etc.
I was told to edit this line of script in my raw.js file:
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
but nor sure what to do it with it? Any help would be greatly appreciated.
Here is a link to the page in question:
http://www.tetra-shed.co.uk/news/
prettyPhoto groups galleries together based on the contents of the square brackets. So you are getting all 56 images in the same gallery because they have all been assigned to gallery 1.
What you really want is the first sixteen in gallery 1;
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
And the next 16 in gallery 2;
$(".gallery-icon a").attr('rel', 'prettyPhoto[2]');
The question is- how to do that given that the rel attribute is being assigned via JS? Well I would look at doing it based on the parent parent div id. Each gallery-icon element has a gallery-item parent. Each of those is part of a gallery class which has a specific ID. For example
<div id='gallery-3' class='gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail'>
<dl class='gallery-item'>
<dt class='gallery-icon'>
So you would want to assign that unique gallery id as the pretty photo rel value. ie;
$(".gallery-icon a").attr('rel', 'prettyPhoto[gallery-3]');
I would do it by finding all gallery-icons and using closest() to find the parent gallery id, like this;
Finding the id of a parent div using Jquery
I've not tested it or anything but something like this should get you going in the right direction;
$('#content').find('.gallery-icon a').each(function() {
var gallid = $(this).closest("div").attr("id");
$(this).attr('rel', 'prettyPhoto['+ gallid +']');
});
I maybe came with easier solution, I am just going through all my gallery div in each function and then initializing the prettyPhoto in images inside them.
$(document).ready(function(){
$.each($(".gallery"), function(i, val) {
var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']";
$(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false});
});
});
All that needs to be done is to change the rel in the html where you add your gallery that looks something like this rel="prettyPhoto[pp_gal]"
in your first gallery you create inside your div change the rel="prettyPhoto[pp_gal]" to "prettyPhoto[gallery1]" (for example)
and the next to "prettyPhoto[gallery2]" and so on.
I am trying to create an image gallery, I am using numbers instead of left/right arrows. At the moment, I am trying to get it working with only 2 image (i.g 2 numbers)
this is the html . the id page, is the highlighted number
<div class="grid_1 pagelink" id="page"><p>1</p></div>
<div class="grid_1 pagelink"><p>2</p></div>
the first time the page loads, the code below works. so when I click on link 2 the the code bellow runs fine. But then I want the same code to be triggered when I click back on the first link; but when I do that, the page refreshes by ignoring the code bellow:
$('.pagelink').live('click', function(e){
e.preventDefault();
var frame = $(this).text() - 1;
var frames = 240 * frame;
// $('#gal').animate({marginLeft:'500px'},'slow');
$('#gal').animate({marginLeft: "+="+frames+'px'},'slow');
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
// $('#book').animate({ left: '50' });
})
I thought that the .live() would do that for me but it is not working.
I hope you could help
thank you
Previous, this is because you are removing the class of link "pagelink" which were used to map the clicked event.
Also, use another class instead of id(#page) to identify the #page link, id might be problem if its already assign to other link. like
$(this).removeClass('pagelink').addClass('page');
$('.page').addClass('pagelink').removeClass('page');
live should work fine. i think you have a bug in your code, and its probably here:
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
what exactly are you trying to accomplish with this code?
when you click on page2, the you set the div's id to be page, but now you have 2 elements with an id of page, and when you select that id, you get the first one (ie page1), but you still remove the class pagelink from page2
in other words, the bug is that at some point you will have 2 elements with the same id (and ids must be unique btw) so when you select that id with $('#page') you always get the first one