I have built my first jQuery mobile image gallery, but I have a bug I can't seem to fix. When an image is tapped it pops up to full screen and to carousel all the images I can swipe the images or tap prev/next arrows.
Edit: The problem has changed slightly since I wrote this question, therefor I need to make a few changes in my question and my code.
The images now swipe to every other image, according to the order they are shown in the gallery. I'm dynamically adding a data-index to each image, but somehow the result is tabindex="0" for each image that pops up.
<body>
<!-- gallery content -->
<div data-role="content" id="pagecontent" class="gallerycontent">
<a href="#imgshow" data-transition="pop" data-rel="dialog">
<img src="../img/someimage.jpg" alt="someimage.jpg"/>
</a>
<!-- plus more unordered images -->
</div> <!--/content-->
</div><!-- /page -->
<!-- full screen image preview -->
<div data-role="dialog" id="imgshow" data-theme="d">
<div data-role="header" data-theme="d">
<div id="dialoghead"></div>
</div>
<div data-role="content" data-theme="d">
<center><div id="dialogcontent"></div></center>
</div>
<div data-role="footer">
<center>
Previous
Next
</center>
</div>
</div>
</body>
The 'on-touch' function and 'gonext' function in jquery.
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$(this).parent().addClass('selectedimg');
});
function gonext() {
var current = $('a.selectedimg');
if (current.hasClass('last')) {
var next = $('a.first')
} else {
var next = current.next();
}
var src = next.find('img').attr("src");
var alt = next.find('img').attr("alt");
next.addClass('selectedimg');
current.removeClass('selectedimg');
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
}
Any thought or hints?
I think the problem might be that the selectedimg class isn't being removed when the popup is opened. Try adding this line
$('.selectedimg').removeClass('selectedimg');
just before the addClass line into this function, like this:
//on-touch function
$('.gallerycontent img').bind('tap',function(event, ui){
var src = $(this).attr("src");
var alt = $(this).attr("alt");
$('#dialogcontent').empty().append('<img src="' + src + '" style="width:100%;"/>' );
$('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>' );
$('.selectedimg').removeClass('selectedimg');
$(this).parent().addClass('selectedimg');
});
Related
I have several different galleries of images that have image captions. I'm attempting to append a download link of the corresponding image to the end of each of the gallery captions. The download link needs to be based on the img src for each image.
I can get it to append the download link to the caption. However, it's also appending a download icon for each image contained in the gallery on every image caption. Instead of one download link per image.
HTML
<div>
<figure class="gallery-item">
<!-- BoGalleryImg -->
<div class="gallery-icon landscape">
<a href="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" data-rel="lightbox-gallery-1">
<img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-823">
</a>
</div>
<!-- EoGalleryImg -->
<!-- BoCaption -->
<figcaption class="wp-caption-text gallery-caption" id="gallery-1-823">
<a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2515">
CRKIS-2515
</a>
</figcaption>
<!-- EoCaption -->
</figure>
<br />
<figure class="gallery-item">
<!-- BoGalleryImg -->
<div class="gallery-icon landscape">
<img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2379b.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-817">
</div>
<!-- EoGalleryImg -->
<!-- BoCaption -->
<figcaption class="wp-caption-text gallery-caption" id="gallery-1-817">
<a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2379B">
CRKIS-2379B
</a>
</figcaption>
<!-- EoCaption -->
</figure>
</div>
jQuery
$(document).ready(function() {
$('.attachment-full').each(function(index, element){
// create variable from img src
var imgSrc = $(element).attr('src');
console.log(imgSrc);
//Append Download Link to Caption
$('.gallery-caption').append('</span>');
});
});
I have been trying to figure this out for a couple days now and I'm so close I'm just not sure how to get it to append only one download icon for the corresponding image. Thank you in advance for any help that can be provided.
My CODEPEN DEMO
Your html is a bit hairy to parse. Here is some jQuery that reproduces your output with the desired icon count:
images = ['http://srsounds.com/j3/images/easyblog_articles/2943/han_solo.jpg', 'https://lumiere-a.akamaihd.net/v1/images/chewie-db_2c0efea2.jpeg?region=0%2C154%2C1592%2C796'];
labels = ['CRKIS-2515', 'CRKIS-2379B']
images.forEach(function(value, index) {
$('body').append("<img src=" + value + " width=350><br>" + labels[index] + " <i class='fa fa-download' aria-hidden='true'></i><br><br>");
$('body').css('color', 'steelblue');
})
If you want to use these icons bring in awesome fonts:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
There may be other requirements in terms of your gallery layout, but hopefully this will help you get started on a cleaner approach.
If you're having issues adding link attributes to your icons, or achieving additional layouts let me know.
******** EDIT ********
If you want/need to stick with your original approach, then change your jQuery to this:
$(document).ready(function() {
download_ids_hold = [];
imgSrc_hold = [];
$('.attachment-full').each(function(index, element){
// create variable from img src
var imgSrc = $(element).attr('src');
imgSrc_hold.push(imgSrc)
console.log(imgSrc);
//Append Download Link to Caption
$('.gallery-caption').each(function(ind_2, elem_2) {
add_id = 'a_' + Math.floor((Math.random() * 100000) + 1);
download_ids_hold.push(add_id)
if(index == 0) {
$(this).append('<a id=' + add_id + ' download><i class="fa fa-download" aria-hidden="true"></i></span></a>');
}
})
});
for(id=0;id<download_ids_hold.length;id++) { $('#' + download_ids_hold[id]).attr('href', imgSrc_hold[id]) }
});
We track the image sources and download ids, and use them appropriately at the end.
Here is my code
$('.thumb-container-xs').click(function() {
///alert("You have clicked!");
var img = $(this).find('img');
var img_src = img.attr('src');
var img_title = img.attr('title');
var img_alt = img.attr('alt');
$("#productImage0").attr({
src: img_src + '?' + new Date().getTime(), //adding random number at the end of the src not working
title: img_title,
alt: img_alt
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 thumb-container clearfix" id="activeProductImgContainer">
<!--Big Image-->
<a href="#" class="img-bg" id="activeProductImgBg">
<img src="http://cdn3.wpbeginner.com/wp-content/uploads/2016/02/stocksnap.jpg" class="thumb-img img-thumbnail thumb-custom" id="productImage0" alt="Mypic" title="My pic">
</a>
</div>
<div class="clearfix">
<!---small images-->
<div class=" col-xs-3 thumb-container-xs">
<a class="img-bg-xs" id="productImage2" href="#"><img class="thumb-img-xs img-responsive thumb-custom" src="http://cdn3.wpbeginner.com/wp-content/uploads/2016/02/stocksnap.jpg" title="f" alt="f"></a>
</div>
<div class=" col-xs-3 thumb-container-xs">
<a class="img-bg-xs" id="productImage3" href="#"><img class="thumb-img-xs img-responsive thumb-custom" src="https://s3.amazonaws.com/media.spl/1353_bof.jpg" title="g" alt="h"></a>
</div>
<div class=" col-xs-3 thumb-container-xs">
<a class="img-bg-xs" id="productImage4" href="#"><img class="thumb-img-xs img-responsive thumb-custom" src="https://www.bensound.com/bensound-img/betterdays.jpg" title="h" alt="h"></a>
</div>
<div class=" col-xs-3 thumb-container-xs">
<a class="img-bg-xs" id="productImage5" href="#"><img class="thumb-img-xs img-responsive thumb-custom" src="https://www.bensound.com/bensound-img/littleplanet.jpg" title="i" alt="i"></a>
</div>
</div>
What the code actually does is update the big image whenever i click on a small image thumbnail.
Everything is working fine in Crome and firefox but not working in Internet Explorer. When I'm clicking on the small image thumbnail the 'src' of the image is changing but the image is not updating. How can I solve this issue?
I found the solution.No problem with my code.As internet explorer does not support object-fit css property,I had to hide the <img> tag and set a background-image property to it's parent which is #activeProductImgBg and what I did just changed the image src which is hidden in IE.But I had to change the background property of it's parent also at the same time.Now it's working fine.
Here is the additional code
$("#activeProductImgBg").css('background-image', 'url(' + img_src + ')');
Try running this code instead of yours and see if load() triggers. They claim with URLs fix you did (adding a seed in the end) it should work. I just don't have IE11 installed to test it out.
$('.thumb-container-xs').click(function() {
///alert("You have clicked!");
var img = $(this).find('img');
var img_src = img.attr('src');
var img_title = img.attr('title');
var img_alt = img.attr('alt');
$("#productImage0").attr({
src: img_src + '?' + new Date().getTime(), //adding random number at the end of the src not working
title: img_title,
alt: img_alt
});
$("#productImage1").attr({
src: img_src + '?' + new Date().getTime(), //adding random number at the end of the src not working
title: img_title,
alt: img_alt
});
$("#productImage0").load(function(){console.log(0)});
$("#productImage1").load(function(){console.log(1)});
});
If the images are not loaded console.logs will not fire, if they do then is a matter of refreshing the DOM.
This trick worked for me to force the browser to redraw the element, you hide show their parent in quick succession.
$('#activeProductImgContainer').hide().show(0);
I have a gallery function with an imagezoom at the big image.
When the big image is changed and i click on it to activate the zoom function, it shows the old image.
I think the variable isnt changed in javascript?
<script type="text/javascript">
function change_img(imgurl) {
image = document.getElementById('preview');
image.src = imgurl
imageURL = imgurl
}
$(document).ready(function(){
var imageURL = document.getElementById('preview').src;
$('#ex3').click(function() {
var imageURL = document.getElementById('preview').src
$('#ex3')
.zoom({ on:'click', magnify:1.8, url:imageURL })
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block');
})
});
EDIT:
This way the thumbnails will be created:
<span class='zoom' id='ex3'>
<img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
<span class="zoom-btn"></span>
</span>
<!-- BEGIN thumbs -->
<div class="thumbnails">
<img id="thumbimg" onclick="change_img('{PATH}/{thumbs.ID}')" name="img" src="{PATH}/{thumbs.ID}" alt="" />
</div>
<!-- END thumbs -->
In javascript .zoom it should be the changed path at "url:imageURL".
Anyone knows how to get the actual path in imageURL?
EDIT: Will this work?--I'm honestly not sure if this zoom function changes the img source or not. If it doesn't, changing that from here, should be fairly easy. There seemed, from a search, to be several of which you could be using.
<span class='zoom' id='ex3' data-src="changedimg.jpg">
<img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
<span class="zoom-btn"></span>
</span>
<script type="text/javascript">
$(document).ready(function(){
$('#ex3').click(function() {
var newURL = this.data('src')
$('#ex3')
.zoom({ on:'click', magnify:1.8, url: newURL })
.wrap('<span style="display:inline-block"></span>')
.css('display', 'block');
})
});
</script>
So i tried to make my gallery more better. I want when user click on element to open image in the middle of the screen. I'm sure that there is efficient way to do this with adding class or something.
What should i do ?
HTML
<ul class="gallery">
<li>
<img src="img/1.png" />
<div class="caption" onclick="view('1.png')">
<div class="blur"></div>
<div class="caption-text">
<h1>+</h1>
</div>
</div>
</li>
<li>
<img src="img/2.png" onClick="view('2.png');">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>+</h1>
</div>
</div>
</li>
<ul>
Javascript:
<script type="text/javascript">
function view(imgsrc) {
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
I think I have exactly what you are looking for.
You can look for some css and an example here
This is where the magic happens:
popup = {
init: function(){
$('li').click(function(){
popup.open($(this));
});
$(document).on('click', '.popup img', function(){
return false;
}).on('click', '.popup', function(){
popup.close();
})
},
open: function($li) {
$('.gallery').addClass('pop');
$popup = $('<div class="popup" />').appendTo($('body'));
$fig = $li.clone().appendTo($('.popup'));
$bg = $('<div class="bg" />').appendTo($('.popup'));
$close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig);
$shadow = $('<div class="shadow" />').appendTo($fig);
src = $('img', $fig).attr('src');
$shadow.css({backgroundImage: 'url(' + src + ')'});
$bg.css({backgroundImage: 'url(' + src + ')'});
setTimeout(function(){
$('.popup').addClass('pop');
}, 10);
},
close: function(){
$('.gallery, .popup').removeClass('pop');
setTimeout(function(){
$('.popup').remove()
}, 100);
}
}
popup.init()
This should cover the popup logic.
For the centering issue you should check out the link above and look at the css documentation
Fabio Ottaviani's work, nicely done.
Hope it helps :)
You might want to try out imgZoom, a jQuery plugin to easily integrate zooming function to your current images: http://odyniec.net/projects/imgzoom/
I'm making a slider for my webpage and I'm using jquery's plugin called "Cycle". I have faced a problem with accessing source of images used in slider. It's quite hard to explain so here is my code from 'head' part:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').before('<ul id="pager">').cycle({
fx: 'scrollHorz',
speed: 900,
timeout: 5500,
pause: 1,
pager: '#pager',
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + slide.src + '" width="120" height="65" /></li>';
}
});
</script>
Here is the html part:
<div id="slider_container">
<div id="slider">
<div class="items">
<img src="1.jpg"/>
<div class="info">
<h2>Tile Nr. 1</h2>
</div>
</div>
<div class="items">
<img src="2.jpg"/>
<div class="info">
<h2>Tilte Nr. 2</h2>
</div>
</div>
</div>
<div id="pager">
</div>
</div>
In my slider div I want to display blocks, each of them containing image and some title but in pager div I want to display only the images from those blocks used in slider. I'm sure that the problem is in slide.src expression in the third javascript. How should I change that expression to get the source of an image stored in appropriate items block?
Could you set up a jsFiddle that sources the jquery files you need here?
My guess is that slide.src isn't what you want. If slide is a reference to an element in the DOM, then you access its 'source' attribute like this: $(slide).attr('src')
Updated:
Turns out 'slide' is the containing div so we need this instead:
$(slide).find('img').attr('src')
When you inspect the argument slide inside pagerAnchorBuilder-function you find slide being a div-element with class items and containing the img-element as first child-element. So you can access the img and it's src-attribute like so:
pagerAnchorBuilder: function(idx, slide) {
var source = $('img', slide).attr('src');
return '<li><img src="' + source + '" width="120" height="65" /></li>';
}
There are also some other ways of writing it, all with same result:
var source = $(slide).find('img').attr('src');
// or in native js
var source = slide.querySelector('img').getAttribute('src');
var source = slide.querySelector('img').src;
var source = slide.firstElementChild.src