Problem: How do I clone each image from a list and "paste" them into another list?
I have searched but haven't found any solution close enough for my solution.
Short brief: I am creating a slideshow with thumbnails (jQuery-library: Slippry Slider). I want the thumbnails to work dynamicly, depending on the amount of slides.
So first I have some HTML containing the slides:
<ul id="thumbnails">
<li>
<a href="#slide1">
<img src="img/image-1.jpg" alt="This is caption 1">
</a>
</li>
<li>
<a href="#slide2">
<img src="img/image-2.jpg" alt="This is caption 2">
</a>
</li>
<li>
<a href="#slide3">
<img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
</a>
</li>
Now I want to create wrapping elements for my thumbnails, first a div and then a ul-element:
// Create thumb-wrapping-elements
$('.demo_wrapper').append('<div class="thumb-box"></div>');
$('.thumb-box').append('<ul class="thumbs"></ul>');
And I want to check how many slides there is in the HTML above:
// How many thumbs? Check how many slides there is.
var count = $("#thumbnails li").length;
Create right numbers of li-elements and set the right width and values:
// Loop through and create li-elements and links
for (var thumbcounter = 0; thumbcounter < count; thumbcounter++) {
// Whats the width of each thumb?
var thumbwidth = (100/count) + '%';
thumburl = thumbcounter + 1;
$('.thumbs').append('<li><a href="#' + thumburl + '" data-slide="' + thumburl + '" style="width:' + thumbwidth + ';">
Here I would like to loop through each slide img from ul#thumbnails li a above and print them here. How the heck do I do that? :)
</a></li>');
};
See all code here: http://jborg.se/dev/slippry/demo/test.html
Now "a" is inside each a-element, just to make them visible.
Edit:
Made width of thumb more effective, thanks to answer below.
This is what I would like as output by the jQuery loop above (Right now I have everything right, except the images - which I do not know how to copy from the HTML and print here as each thumbnail):
<div class="thumb-box">
<ul class="thumbs">
<li>
<a href="#1" data-slide="1">
<img src="img/image-1.jpg" alt="This is caption 1">
</a>
</li>
<li>
<a href="#2" data-slide="2">
<img src="img/image-2.jpg" alt="This is caption 2">
</a>
</li>
<li>
<a href="#4" data-slide="3">
<img src="img/image-4.jpg" alt="And this is some very long caption for slide 4.">
</a>
</li>
</ul>
</div>
something like this?
$(document).ready(function() {
var html = '<div class="thumb-box"><ul class="thumbs"></ul></div>';
$('.demo').append(html);
var count = $("#thumbnails li").length;
var width = (100.00/count) + '%';
var counter = 0;
$('#thumbnails li').each(function() {
counter++;
var newItem = '<li>';
newItem += '<a href= "' + $(this).find('a').attr('href') + '" ';
newItem += 'data-slide="' + counter + '">';
newItem += '<img src="' + $(this).find('img').attr('src') + '" alt="' + $(this).find('img').attr('alt') + '"/>';
newItem += '</a></li>';
$('ul.thumbs').append(newItem);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ORIGINAL<br/>
<ul id="thumbnails">
<li>
<a href="#1" data-slide="1">
<img src="img/image-1.jpg" alt="This is caption 1"/>
</a>
</li>
<li>
<a href="#2" data-slide="2">
<img src="img/image-2.jpg" alt="This is caption 2"/>
</a>
</li>
<li>
<a href="#4" data-slide="3">
<img src="img/image-4.jpg" alt="And this is some very long caption for slide 4."/>
</a>
</li>
</ul>
<br/>
DEMO
<div class="demo">
</div>
Try
// exported and edited the thumbwidth var for efficiency
var thumbwidth = (100/count) + '%';
// Loop through and create li-elements and links
for (var x = 0; x < count; x++) {
var imgEl = $('#thumbnails').find('img').eq(x).prop('outerHTML');
$('.thumbs').append('<li>'+ imgEl + '</li>');
}
PS- Sorry for no explanation and the mess, I'm on an iPad.
Related
I have a page which lists a series of news posts, and each post has a number of images where the URL's are placed into span's. These are then converted into images when you hover over the related post title. I've done this due to performance issues with so many images on the page.
My problem though is that when you hover over the post title each span within that particular post is then replaced with an image using only the 'first' image url. So where was: image-1, image-2, image-3, it then becomes: image-1, image-1, image-1.
Do I need to loop through the spans one by one to do this?
I have used the following javascript:
$('.article-post').hover(function() {
// Find our span
var elem = $(this).find('span.image');
// get our img url
var src = elem.attr('data-original');
// Change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"/>');
});
And here is my HTML layout:
<article class="article-post">
<header class="article-header">
<h1>Title...</h1>
<div class="image-preview">
<ul>
<li>
<span class="image" data-original="http://www..../wp-content/uploads/2016/04/image-1.jpg" >
</li>
<li>
<span class="image" data-original="http://www..../wp-content/uploads/2016/04/image-2.jpg" >
</li>
<li>
<span class="image" data-original="http://www..../wp-content/uploads/2016/04/image-3.jpg" >
</li>
</ul>
</div>
</header>
...
</article>
You need to use .each() to iterate all span.image elements and perform the desired operation.
$('.article-post').hover(function() {
// Find all span's iterate and replace with image
$(this).find('span.image').each(function(){
var elem = $(this);
// get our img url
var src = elem.attr('data-original');
// Change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"/>');
})
});
$('.article-post').hover(function() {
// Find all span's iterate and replace with image
$(this).find('span.image').each(function() {
var elem = $(this);
// get our img url
var src = elem.attr('data-original');
// Change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"/>');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="article-post">
<header class="article-header">
<h1>Title...</h1>
<div class="image-preview">
<ul>
<li>
<span class="image" data-original="https://i.stack.imgur.com/lJ0Rx.jpg?s=32&g=1"></span>
</li>
<li>
<span class="image" data-original="https://i.stack.imgur.com/xOwgU.png?s=32&g=1"></span>
</li>
</ul>
</div>
</header>
</article>
this is a question link to another question I've already asked (see here: Sort list items from random child).
The problem is that I have a list of items that I want to split from a random item. I'm trying with "IndexOf()" but it returns always -1. Any ideas what I'm doing wrong?
Here is my code:
HTML
<ul class="myClass">
<li class="item">
<a href="URL" title="Company A" target="_blank">
<span class="logo">
<img src="images/logo1.jpg">
</span>
</a>
</li>
<li class="item">
<a href="URL" title="Company B" target="_blank">
<span class="logo">
<img src="images/logo2.jpg">
</span>
</a>
</li>
<li class="item">
<a href="URL" title="Company C" target="_blank">
<span class="logo">
<img src="images/logo3.jpg">
</span>
</a>
</li>
<li class="item">
<a href="URL" title="Company D" target="_blank">
<span class="logo">
<img src="images/logo4.jpg">
</span>
</a>
</li>
<li class="item">
<a href="URL" title="Company E" target="_blank">
<span class="logo">
<img src="images/logo5.jpg">
</span>
</a>
</li>
...
</ul>
JAVASCRIPT
function randomizeChild(){
var listItems = [];
$('ul.myClass li').each( function() {
listItems.push(this);
});
var randomChild = Math.round(Math.random() * listItems.length);
console.log("Random Child ---> " + randomChild);
var indexToSplit = listItems.indexOf(randomChild);
var first = listItems.slice(0, indexToSplit);
var second = listItems.slice(indexToSplit + 1);
console.log(indexToSplit); // it returns always -1 :(
console.log(first, second);
}
Your issue is you are getting the index which is an integer and checking the indexOf of the integer which doesn't exist in your array. You have an array of elements.
http://jsfiddle.net/h2a4L67k/
Try this:
function randomizeChild() {
var listItems = [];
$('ul.myClass li').each(function () {
listItems.push(this);
});
var randomChild = Math.round(Math.random() * listItems.length);
console.log("Random Child ---> " + randomChild);
var randomChildObject = listItems[randomChild];
var indexToSplit = listItems.indexOf(randomChildObject);
var first = listItems.slice(0, indexToSplit);
var second = listItems.slice(indexToSplit + 1);
console.log(indexToSplit); // it returns always -1 :(
console.log(first, second);
}
You don't even need to do what is above. You already have a random index so just use it right away:
function randomizeChild() {
var listItems = [];
$('ul.myClass li').each(function () {
listItems.push(this);
});
var randomIndex = Math.round(Math.random() * listItems.length);
console.log("Random Child ---> " + randomIndex);
var first = listItems.slice(0, randomIndex);
var second = listItems.slice(randomIndex + 1);
console.log(randomIndex); // it returns always -1 :(
console.log(first, second);
}
Fiddle: http://jsfiddle.net/h2a4L67k/1/
i am using this slideshow made with html and javascript:
http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/
the slideshow works good hovewer the large images are not clickable. It has the property but how to make them work so when i click to a picture to send me to the specific link (the link that i write in href="")
it gets the values from this:
<div class="es-carousel">
<ul>
<li><a href="http://www.google.com">
<img src="images/cityPlaces_images/thumbs/1.jpg" data-large="images/cityPlaces_images/1.jpg" alt="image01"
data-description="From off a hill whose concave womb reworded" />
</a></li>
and it generates in this gallery.js:
var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
You could try including the url associated with each thumb as a data-attribute on the element:
<div class="es-carousel">
<ul>
<li><a href="#">
<img src="images/cityPlaces_images/thumbs/1.jpg" data-large="images/cityPlaces_images/1.jpg" alt="image01"
data-description="From off a hill whose concave womb reworded"
data-url="http://google.co.uk"/>
</a></li>
And update the gallery.js code so that it wraps the img element it creates for the large image when the thumb is clicked with an a tag:
var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');
url = $thumb.data('url');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
i am looking to replace a particular image when i click on it and change it to active image. but then i click on any other image, the clicked image becomes active and the other image becomes inactive again.
the html markup looks like this:
the HTML that i am using is:
<ul id="weeklyPrizeBlockThumb">
<li class="active"> <img src="images/bts/bts_overlay_wp_box_thumbw1.jpg" alt="Week1" id="week1" />
<p class="text"> <span>Gearing Up for School:</span> <span>$100 of Mead® School Supplies!1</span></p>
</li>
<li> <img src="images/bts/bts_overlay_wp_box_thumbw2.jpg" alt="Week2" id="week2" />
<p class="text"> <span>Sticking to a Schedule:</span> <span>$100 Gift Card from The Container Store®!</span></p>
</li>
<li> <img src="images/bts/bts_overlay_wp_box_thumbw3.jpg" alt="Week3" id="week3" />
<p class="text"> <span>Doing Lunch:</span> <span>Soft Lunch Bag with $100 of Unilever Products!</span></p>
</li>
</ul>
The JS is:
var src1 = $('ul#weeklyPrizeBlockThumb li').find('img').attr("src").replace("_active.jpg", ".jpg");
$('ul#weeklyPrizeBlockThumb li').find('img').attr("src", src1);
//$('#overlay_wp_weekImg div').find('img').attr("src").replace("_active", "");
var src = $(this).find('img').attr("src").match(/[^\.]+/) + "_active.jpg";
$(this).find('img').attr("src", src);
this is not working correctly. it does not de-active-ate the previous images.
try this~
$(function(){
$("#weeklyPrizeBlockThumb li").each(function(){
var li = $(this);
li.click(function(){
$("#weeklyPrizeBlockThumb>li>img").each(function(index){
$(this).attr("src","images/bts/bts_overlay_wp_box_thumbw"+ (index + 1) +".jpg");
alert($(this).attr("src"));
})
li.find("img").attr("src","images/bts/_active.jpg");
alert(li.find("img").attr("src"));
})
})
})
I have a div that contains a few pictures, using javascript i scroll left and right in that div, my problem is that for some reason in firefox the values are different that in chrome (works fine):
function scroll_right() {
document.getElementById('left').style.opacity = '1';
document.getElementById('left').style.filter = 'alpha(opacity=100)';
document.getElementById('scroller').scrollLeft += PixelPerInterval;
if (!stop) t = setTimeout('scroll_right()', 10);
else stop = false;
scrX = document.getElementById('scroller').scrollLeft;
pwidth = document.getElementById('cont').clientWidth;
awidth = document.getElementById('cont').scrollWidth;
//document.getElementById('type').innerHTML = scrX + ' ' + (awidth-pwidth);
if (scrX >= awidth - pwidth) {
//type.innerHTML = scrX + ' right';
document.getElementById('right').style.opacity = '0.4';
document.getElementById('right').style.filter = 'alpha(opacity=40)';
}
}
using scroll_left it's easy, just have scrX = 0.
The outer container is called scroller its width is fixed, and the inner container is called cont and its width isn't set by the user so unlimited pictures can be entered.
Any ideas? (without using jquery).
thanks alot.
Btw html code:
<img src="left.png" id="left" onmouseover="scroll_left();" onmouseout="stop_scroll();" />
<div id="scroller">
<div id="cont">
<a onclick="main(this);" href="#">
<img class="thumb" id="persp" src="sport/911-persp.png" alt="persp" />
</a>
<a onclick="main(this);" href="#">
<img class="thumb" id="side" src="sport/911-side.png" alt="side" />
</a>
<a onclick="main(this);" href="#">
<img class="thumb" id="front" src="sport/911-front.png" alt="front" />
</a>
</div>
</div>
<img src="right.png" id="right" onmouseover="scroll_right();" onmouseout="stop_scroll();" />