Develop Reference

Jquery - How to loop this slider?

So I've been working on a slider and I don't really know how to make it repeat itself. So far I've only listed 10 slides but in the end I'll have around 20.
Here's a link to a JS fiddle so you can see what I've got so far:
https://jsfiddle.net/sth23e2w/
$(document).ready(function() {
//settings for slider
var width = 360;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $(".characters");
var $slideContainer = $(".slide-characters", $slider);
var $slides = $(".char-avatar", $slider);
$(".right-slide").click(function() {
$slideContainer.animate(
{ "margin-left": "+=" + width },
animationSpeed,
function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css("margin-left", 0);
}
}
);
});
$(".left-slide").click(function() {
$slideContainer.animate(
{ "margin-left": "-=" + width },
animationSpeed,
function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css("margin-left", 0);
}
}
);
});
});
Or if you really want you could check out the live version I've got over at Codepen: https://codepen.io/Crownedpride/project/editor/ZmbqRv/
If you want to know what it's going to be used for:
I'm currently writing a fantasy novel which I've got an artist drawing characters for. I want to display those characters on my own website via that setup I've made. There's roughly going to be 20 different characters that he'going to draw for me, although later there might be more depending if there'll be a Volume 2.
I'm looking forward to your replies.
ps: I'm really new to Jquery/js so please go easy on me >_<

Is there an universal solution for looping through and animating series of .png frames with jQuery / JavaScript?

I want to display a few animated "illustrations" on a website I'm working on.
.gif is not an option due to significant loss of quality.
Is there any solution out there that would allow me to iterate through a folder of PNG's and display them on screen?
Thanks in advance.

something like this will work if the images are named 1.png through 25.png for example.
var slides = 25; //number of slides
var i = 1; //first slide
var delay = 200; //set delay
var timer;
function pngani() {
if (i <= slides) {
$('#show img').attr('src', 'pathtofile/' + i + '.png');
}
i++;
}
$('#start').click(function () {
timer = setInterval(pngani, delay);
pngani();
});
$('#pause').click(function () {
clearInterval(timer);
timer = null;
});
$('#reset').click(function () {
i = 1;
$('#show img').attr('src', 'pathtofile/' + i + '.png');
});
I added a start, pause, and reset button, so the execution can be controlled.
made a fiddle: http://jsfiddle.net/filever10/Kur9u/

how to use Javascript for slide left

i have use the javascript for sliding the element up and down as fallow
<script type="text/javascript">
$(function () {
var $divSlide = $("div.slide");
$divSlide.hide().eq(0).show();
var panelCnt = $divSlide.length;
setInterval(panelSlider, 3000);
function panelSlider() {
$divSlide.eq(($divSlide.length++) % panelCnt)
.slideUp("slow", function () {
$divSlide.eq(($divSlide.length) % panelCnt)
.slideDown("slow");
});
}
});
</script>
which slide the panel up and down having slide tag panals are added as fallow
//protion
DataTable promo = SQl.ExecuteSelectCommand("select Promo_Code,Promo_Discription,Promo_Min_Ammount,Persent_Off,Start_Date,End_Date,Supp_Name from Prommosion_Details_View ");
if (promo.Rows.Count > 0)
{
for (int i = 0; i <= promo.Rows.Count - 1; i++)
{
Panel p = new Panel();
p.CssClass = "slide";
PromoUC PUC = (PromoUC)Page.LoadControl("PromoUC.ascx");
PUC.setText(promo.Rows[i][3].ToString(), promo.Rows[i][1].ToString(), promo.Rows[i][4].ToString(), promo.Rows[i][5].ToString(), promo.Rows[i][0].ToString(), " From " + promo.Rows[i]["Supp_Name"].ToString());
p.Controls.Add(PUC);
searchBoxPromoPlaceHolder.Controls.Add(p);
}
}
above code is working fine but the problem is tat i have to scroll it left and right with elastic effect

You should check the jQuery.animate() which helps you to do any animation effect.
you can animate any css property,in your case the width could fit your needs.check the examples online.

jQuery Slider Fade

I'm looking for a decent jQuery slider. I would like it so during the transition phase, the image fades away, hides, then fades in the next image. Like this: http://i47.tinypic.com/6gygko.gif
Right now I'm using Plus Slider but it doesn't exactly hide the image during the transition. Instead it loads the next image then, hides it while showing the second. See this: http://jsfiddle.net/EgkFq
Does anyone know of a decent slider that does what I asked above or at the very least help me with the fiddle to do what I'm suggesting? Also, the images will be dynamic and have transparent backgrounds.
Additionally I would like numeric pagination so the transition only works if you click on the number. I was told I would have to use jQuery to detect how many images, etc.
Other than than the scrollbar issue, it's solved. http://jsfiddle.net/h7Y3F

http://jsfiddle.net/EgkFq/5/
(function slider(){
var slides = $("#slider > img");
var currentIndex = 0;
var slideCount = slides.length;
var timePerSlide = 5000;
var fadeDuration = 1000;
var nextSlide = function(){
var nextIndex = currentIndex + 1;
if (nextIndex == slideCount)
nextIndex = 0;
$(slides[currentIndex ]).fadeOut(fadeDuration);
$(slides[nextIndex ]).fadeIn(fadeDuration);
currentIndex = nextIndex;
setTimeout(nextSlide, timePerSlide);
};
setTimeout(nextSlide, timePerSlide);
})();
Plugin shmugin.
Here is an example of how to center the image within the "slider" http://jsfiddle.net/EgkFq/9/
(function slider(){
var slides = $("#slider > img");
var currentIndex = -1;
var slideCount = slides.length;
var timePerSlide = 5000;
var fadeDuration = 1000;
var nextSlide = function(){
var nextIndex = currentIndex + 1;
if (nextIndex == slideCount)
nextIndex = 0;
var me = $(slides[currentIndex]);
var nxt = $(slides[nextIndex]);
var w = nxt.width();
var h = nxt.height();
me.fadeOut(fadeDuration);
nxt.fadeIn(fadeDuration);
nxt.css({
"left":"50%",
"margin-left":w/2 * -1,
"top":"50%",
"margin-top": h/2 * -1
});
currentIndex = nextIndex;
setTimeout(nextSlide, timePerSlide);
};
setTimeout(nextSlide, 0);
})();

There are a lot of sliders for you to choose from. Have a look at 70+ Awesome jQuery Slider Plugins. Most of them have fading effect.

Displaying images like Google Image Search

Does anybody know of a script that will let me diplay image results in the way that Google Image Search does (image grid view) with hover to enlarge and details? Something that I can just "plug-and-play" so to speak.

Have a look at Masonry http://masonry.desandro.com/

First, you need to put all images inside a container element:
<div class="parent">
<img src="">
<img src="">
<img src="">
</div>
Then you need to make sure that the images are displayed in one line. This can be done by e.g. float: left. You should also set vertical-align to remove the small gap underneath each image:
img {
float: left;
vertical-align: top;
}
Finally you need some JavaScript to loop through all images and calculate the ideal rowHeight based on their dimensions. The only thing you need to tell this algorithm is the maximum row height that you want (rowMaxHeight)
// Since we need to get the image width and height, this code should run after the images are loaded
var elContainer = document.querySelector('.parent');
var elItems = document.querySelector('.parent img');
var rowMaxHeight = 250; // maximum row height
var rowMaxWidth = elContainer.clientWidth;
var rowWidth = 0;
var rowRatio = 0;
var rowHeight = 0;
var rowFirstItem = 0;
var rowIsLast = false;
var itemWidth = 0;
var itemHeight = 0;
// Make grid
for (var i = 0; i < elItems.length; i++) {
itemWidth = elItems[i].clientWidth;
itemHeight = elItems[i].clientHeight;
rowWidth += itemWidth;
rowIsLast = i === elItems.length - 1;
// Check if current item is last item in row
if (rowWidth + rowGutterWidth >= gridWidth || rowIsLast) {
rowRatio = Math.min(rowMaxWidth / rowWidth, 1);
rowHeight = Math.floor(rowRatio * rowMaxHeight);
// Now that we know the perfect row height, we just
// have to loop through all items in the row and set
// width and height
for (var x = rowFirstItem; x <= i; x++) {
elItems[i].style.width = Math.floor(rowRatio * itemWidth * (rowMaxHeight/itemHeight)) + 'px';
elItems[i].style.height = rowHeight + 'px';
}
// Reset row variables for next row
rowWidth = 0;
rowFirstItem = i + 1;
}
}
Note that this code is not tested and a very simplified version of what this vanilla JavaScript plugin does: https://fld-grd.js.org

Two solutions that I have found so far.
tutorial blog
jsfiddle
$(function() {
$(window).on('resize', function() {
$('.openEntry').remove();
$('.entry').hide();
var startPosX = $('.preview:first').position().left;
console.log(startPosX);
$('.entry, .preview').removeClass("first last");
$('.entry').each(function() {
if ($(this).prev('.preview').position().left == startPosX) {
$(this).prev('.preview').addClass("first");
$(this).prevAll('.entry:first').addClass("last");
}
});
$('.entry:last').addClass("last");
});
$(window).trigger('resize');
$('.trigger').click(function() {
$('.openEntry').slideUp(800);
var preview = $(this).closest('.preview');
preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(800);
});
$('body').on('click', '.close', function() {
$('.openEntry').slideUp(800).remove();
});
})

codrops actually puts the photo enlargement/details inline instead of as a modal overlay:
http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

This might be what you are looking for... http://www.gethifi.com/demos/jphotogrid

Have a look at the gPop plugin
DEMO
Download in Github

Check out this jQuery Plugin: https://github.com/brunjo/rowGrid.js
It places images like on the Google image search.

Simply just repeat your images like this:
<img style="float: left; height: 12em; margin-right: 1%; margin-bottom: 0.5em;border:1px solid lightgray" src="ImgSrc " />