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 );
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>
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.
I've got an image viewer that combines a thumbnail/large image block that works great...
looks like this:
<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
<ul class="holder">
<li class="slide first"><img src="galleries/kids/01.jpg" data-large="galleries/kids/06.jpg" alt="1st image description" /></li>
<li class="slide"><img src="galleries/kids/02.jpg" data-large="galleries/kids/07.jpg" alt="2nd image description" /></li>
<li class="slide"><img src="galleries/kids/03.jpg" data-large="galleries/kids/08.jpg" alt="3rd image description" /></li>
<li class="slide"><img src="galleries/kids/04.jpg" data-large="galleries/kids/09.jpg" alt="4th image description" /></li>
<li class="slide"><img src="galleries/kids/05.jpg" data-large="galleries/kids/10.jpg" alt="5th image description" /></li>
</ul>
<div class="clear"></div>
</div>
<script>
$('.holder').delegate('img','click', function(){
$('#largeImage').attr( 'src',$(this).attr('data-large') );
});
</script>
However when I try to combine this with a carousel (the simplest one I found here - http://www.flintstudio.biz/stuff/sliders/1.html )
It stops working...
the code looks like this
<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
<a class="button prev" ><img src="images/arrow_left.png"/></a>
<a class="button next" ><img src="images/arrow_right.png"/></a>
<ul class="holder">
<li class="slide first"></li>
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
<div class="clear"></div>
</div>
<script>
$( window ).load(function(){
var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];
$.preloadImages( images, init );
function init() {
$( '#gallery-scroller' ).imgSlider( images );
}
$('.holder').delegate('img','click', function(){
$('#largeImage').attr( 'src',$(this).attr('data-large') );
});
});
</script>
from a concept standpoint the only difference is that the list is populated after the window loads -
I've tried changing
.delegate('img','click', function(){
to
.on( 'click', 'img', finction(){
but that doesn't help..
OH - one important point - I changed one line in the carousel.js - so it's not doing a background-image css change, but adding an image...
so I changed this (line 37)
$( e ).find( '.holder > li' ).eq( i ).css( 'background', 'url('+images[i]+') no-repeat' );
to
$( e ).find( '.holder > li' ).eq( i ).html( '<img class="thumb" src="' + images[i] + '" />' );
What am I missing...???
jsfiddle of the simple thumbnail viewer... http://jsfiddle.net/cBpvZ/
jsfiddle of the carousel version... http://jsfiddle.net/ZJzLd/
I think you are binding the events on wrong DOM object, so instead of IMG it should be LI. You can inspect the HTML using firebug and can see that there is no IMG tag inside UL.holder. Try the following code.
$('.holder').delegate('li','click', function(){
var imgSrc = $(this).css('background-image').replace('url("','').replace('")','');
$('#largeImage').attr( 'src',imgSrc);
});
Ideally I should have used the RegExp to replace the string, however this works.
thx Mahesh
forest thru the trees... I couldn't see it because I'd fiddled with it so much... the missing reference to data-large was indeed the issue.
the solution was (defined by me) to have TWO arrays - one for thumbs and one for large..(I could take the path of adding some suffix or prefix to the image names and keep them correlated that way - but I choose not to - and therefor want the flexibility to name things whatever... and this needs two arrays)
var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];
var large = ['galleries/kids/06.jpg', 'galleries/kids/07.jpg', 'galleries/kids/08.jpg', 'galleries/kids/09.jpg', 'galleries/kids/10.jpg'];
$('#gallery-scroller').append('<img src="images/loader.gif" id="gallery-loader" style="position:absolute; top:45%; left:45%;"/>');
$.preloadImages( images, init );
function init() {
$( '#gallery-loader' ).remove();
$( '#gallery-scroller' ).imgSlider( images, large );
}
of course this mean altering the carousel.js to handle the additional passed array - no prob there...
works like a charm. I can now populate this with data, and place the carousel anywhere I need, and the large image viewer where I need it... bravo - thanks for the assist.
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 am using a image gallery in WordPress, images are fetching from database and displaying it into front end.
In my case a big image container, and three image thumbnail,
I want, when when i click on the thumbnail of the image the previous image which in container goes fade out and clicked image set in to image container.
My Html Markup
<!--A container Div which have 1st image from the thumbnail-->
<div class="wl-poster">
<a href=#" id="wl-poster-link">
<img id="poster-main-image" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg">
</a>
</div>
<!--For Thumbnails-->
<div id="wl-poster-thumb">
<ul id="posterlist">
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/Ruderatus_farm.jpg" rel="http://www.cnn.com/">
</li>
<li class="poster-thumb">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/3047006581_1eec7f647d.jpg" rel="http://yahoo.com">
</li>
<li class="poster-thumb" style="margin-right: 0pt;">
<img alt="Thumbnail" src="/wp-content/uploads/2010/09/lush-summer-louisville-kentucky-wallpapers-1024x768.jpg" rel="http://apple.com">
</li>
</ul>
</div>
Used jQuery
if(jQuery('.homepage-poster').length > 0){ // since this will return a empty
var img_src = jQuery("#wl-poster-thumb ul li:first img").attr('src');
var href_path = jQuery("#wl-poster-thumb ul li:first img").attr('rel');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('.wl-poster img').attr('src',final_src);
jQuery('.wl-poster a').attr('href',href_path );
}
jQuery('#posterlist .poster-thumb img').click(function(){
var href_path = jQuery(this).attr('rel');
var img_src = jQuery(this).attr('src');
var final_src = img_src.replace(/&h=.+/gi, '&h=380&w=450&zc=1');
jQuery('#poster-main-image').remove(function() {
jQuery('a#wl-poster-link').attr('href',href_path);
jQuery('#poster-main-image').attr('src',final_src)..fadeOut('slow').fadeIn('slow');
// $('#img1').fadeOut('slow').remove();
// $('#img1').fadeOut('slow').fadeIn('slow');
});
});
Please help me to solve this issue.
try it with this code:
jQuery('#wl-poster-link').attr('href', href_path);
jQuery('#poster-main-image').fadeOut('slow').attr('src',final_src);
//wait till image has loaded, you could think about a loading-gif laying above your image-container..
jQuery('#loading').show(); //or fadeIn
jQuery('#poster-main-image').load(function() { jQuery('#loading').hide(); jQuery(this).fadeIn('slow'); });
You added a point too much on your chaining. Also, the remove-function is not needed.
You forgot a beginning " on your a#wl-poster-link for the href. Fix this too.