I'm in the process of finding a mobile alternative to Colorbox. Swipebox seemed like a great alternative, but unlike colorbox it doesn't seem to allow every individual image open but combined all of them into a gallery. The conventional way of adding swipebox is as so:
$('.class').swipebox();
which adds everything with that class into a swipebox gallery. Is there a way to instead open each item of a certain class individually?
It looks like you just need to separate your images into "galleries", which may seem counter intuitive as you don't want galleries...
Check the advanced docs for gallery:
You can add a rel attribute to your links to separate your galleries.
Like I said it's counter intuitive, but the feature that's designed to group images together into galleries can be used to separate them. Basically you're setting up galleries of one by adding a different rel attribute to each one.
Working Example on jsFiddle
$('.swipebox').swipebox();
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption" rel="gallery-1">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption" rel="gallery-2">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
If adding a rel attribute to every swipebox looks tedious, you can add the rel attribute with a little script:
$('.swipebox').swipebox();
var X = 0; // set a global var
$('.swipebox').each(function() { //for each swipebox
X += 1; //increment the global var by 1
$(this).attr('rel', 'gallery-' + X); // set the rel attribute to gallery- plus the value of X
});
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
My simple solution :)
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox();
$( '.swipebox2' ).swipebox();
} )( jQuery );
</script>
<img src="small/1-1.jpg" />
<img src="small/1-2.jpg" />
<img src="small/2-1.jpg" />
<img src="small/2-2.jpg" />
Related
I have this simple bit of HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button href="#" class="btn btn-primary">Small (32)</button>
<button href="#" class="btn btn-danger">Medium (64)</button>
<button href="#" class="btn btn-warning">Large (128)</button>
<hr />
<img class="swap" title="jack-o-lantern" alt="jack-o-lantern" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png">
<img class="swap" title="Christmas tree" alt="Christmas tree" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f384.png">
<img class="swap" title="fireworks" alt="fireworks" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f386.png">
<img class="swap" title="sparkler" alt="sparkler" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f387.png">
<img class="swap" title="sparkles" alt="sparkles" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/2728.png">
I'm trying to work out if it would be possible to use javascript to set the image source by clicking the buttons at the top of the snippet.
For example - when the page first loads, the image url is hard coded as:
https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png
But then if a user were to click the Small (32) button, is it possible for all of the image source URLs to be updated without a page load to e.g. for a single image:
https://cdn.jsdelivr.net/emojione/assets/3.1/png/32/1f383.png
And the equivalent for the Medium and Large buttons?
I have searched for e.g. replacing part of an img src, and found this post:
Changing part of image's source
With this solution:
$(function(){
$('#myLink').click(function(){
$('img').each(function(){
var $this = $(this)
$this.attr('src',$this.attr('src').replace('gray','green'))
})
})
})
However - in my case, I wouldn't be only replacing one value with another, but would need to change between 32, 64 and 128 depending on which button is clicked.
A simple solution to your problem is by giving each button an id represent the number to change this size for like this example
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button href="#" id="32" class="btn btn-primary">Small (32)</button>
<button href="#" id="64" class="btn btn-danger">Medium (64)</button>
<button href="#" id="128" class="btn btn-warning">Large (128)</button>
now add a script that select all this buttons by their id and then add listener to the click event and change the src attribute for all the images by selecting all of them
this is the complete solution
const small = document.getElementById('32');
const medium = document.getElementById('64');
const large = document.getElementById('128');
// select all images
const allImages = document.querySelectorAll('.swap') ;
// this function takes number and change the src of all images
function changeImagesSrc(number) {
allImages.forEach(img=>{
// here we use regular expression to select the number and change it to a new one
img.src = img.src.replace(/32|64|128/,number);
})
}
small.addEventListener('click',()=>{
changeImagesSrc(32);
})
medium.addEventListener('click',()=>{
changeImagesSrc(64);
})
large.addEventListener('click',()=>{
changeImagesSrc(128);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button href="#" id="32" class="btn btn-primary">Small (32)</button>
<button href="#" id="64" class="btn btn-danger">Medium (64)</button>
<button href="#" id="128" class="btn btn-warning">Large (128)</button>
<hr />
<img class="swap" title="jack-o-lantern" alt="jack-o-lantern" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f383.png">
<img class="swap" title="Christmas tree" alt="Christmas tree" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f384.png">
<img class="swap" title="fireworks" alt="fireworks" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f386.png">
<img class="swap" title="sparkler" alt="sparkler" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/1f387.png">
<img class="swap" title="sparkles" alt="sparkles" src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/128/2728.png">
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.
The code below works to make one copy of the image clicked. I am needing the code below to work for multiple images.
For example if I click 5 images on the screen, the same 5 images should generate at the bottom of the page. The user should be able to select 5 out of 10 images. Any thoughts? Thanks!
JS:
function changeImage() {
var imgSrc = 'http://placehold.it/150';
if (document.getElementById('myImage').src === imgSrc) {
document.getElementById('new').src = imgSrc;
}
}
HTML
<a href="#" onClick="changeImage()">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200">
You can use JQuery clone() function
$('img').click(function() {
$('body').append($(this).clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50/000000/ffffff">
<img src="http://placehold.it/50x50/1C90F3/ffffff">
<img src="http://placehold.it/50x50/F2BB7C/ffffff">
you can use jquery to do that
HTML
<a href="#" id="my-image">
<img id="myImage" src="http://placehold.it/150"></a>
<img id="new" src="http://placehold.it/200" />
JS
$('#my-image').click(function(){
//setting attribute src to be equal as src from #myImage
$('#new').attr('src', $('#myImage').attr('src'));
//returning false in order to avoid default action
return false;
});
So that is it :)
Just remember to put this code after your html or into
$(document).ready(function(){ ..... });
I hope this helps.
I have this piece of code :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<p class="demo">test </p>
<a href="xx" class="focusme">
<img src="images/testimage.gif" alt="" >
</a>
<a href="xx" class="focusme">
<img src="images/testimage.gif" alt="">
</a>
</div>
<script type="text/javascript" src="js/jquery.2.1.4.min.js"></script>
<script>
$(function () {
$(".focusme").focus(function(){
$(this).img.invert();
});
});
</script>
</html>
What I want to do is to invert the images when the <a> tag got focus, but I'm stuck to register the focus and blur event for them.
Here is what I'm trying to achieve :
for example, the html :
<a href="xx" class="focusme">
<img src="images/testimage.gif" alt="" id="img1">
</a>
So at this point, it's easy to access the img above because it has an ID :
$("#img1").invert();
but what i want is :
$(function () {
$(".focusme").focus(function(){
var img = $(this).img;
img.invert();
});
});
P/s : the invert() function is from a seperated js file, and is working well if I manually call it like this :
$("#img1").invert();
How can this be done?
Use the focus on <a> and use find() for the image
$(function () {
$("a.focusme").focus(function(){
$(this).find('img').invert();
});
});
The problem is that <img> tags cannot be focused by default. However, you can allow them to be focused by setting the tabIndex property.
$(".focusme").each(function(i) {
$(this).attr('tabIndex', i + 1)
})
After adding that, your code will be executed when you click on the images, and when you tab between them.
example: http://codepen.io/anon/pen/xZzzOm?editors=1010
<html>
<head>
<link rel="stylesheet" href="css/general.css" />
<link id="style_replace" rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<style type="text/css">.pretty { color:pink; }</style>
<script type="text/javascript">
function showApple(bakedGood)
{
$("#applepie_off, .apple_description").show();
$("#applepie_on").hide();
}
function hideApple(bakedGood)
{
$("#applepie_off, .apple_description").hide();
$("#applepie_on").show();
}
function showBanana(bakedGood)
{
$("#banana_off, .banana_description").show();
$("#banana_on").hide();
}
function hideBanana(bakedGood)
{
$("#banana_off, .banana_description").hide();
$("#banana_on").show();
}
function showCarrot(bakedGood)
{
$("#carrot_off, .carrot_description").show();
$("#carrot_on").hide();
}
function hideCarrot(bakedGood)
{
$("#carrot_off, .carrot_description").hide();
$("#carrot_on").show();
}
function showCookie(bakedGood)
{
$("#cookie_off, .cookie_description").show();
$("#cookie_on").hide();
}
function hideCookie(bakedGood)
{
$("#cookie_off, .cookie_description").hide();
$("#cookie_on").show();
}
function changeStyleSheet(styleName)
{
$("#style_replace").attr("href", "css/" + styleName + ".css");
}
$(function()
{
$(".contract, .apple_description, .banana_description, .carrot_description, .cookie_description").hide();
});
</script>
Original
Larger Text
<h1>Recepie List</h1>
<div id="list">
<div id="apple_pie" class="recepie">
<h3>Apple Pie</h3>
<a class="expand" id="applepie_on" href="#" onClick="showApple()">expand</a>
<a class="contract" href="#" id="applepie_off" onClick="hideApple()">contract</a>
<img class="desert_img" src="images/apple_pie.jpg" />
<p class="apple_description">
This was my grandmother's apple pie recipe. <br />
I have never seen another one quite like it. <br />
It will always be my favorite and has won me <br />
several first place prizes in local competitions. <br />
I hope it becomes one of your favorites as well!
</p>
</div>
<div id="banana_bread" class="recepie">
<h3>Banana Bread</h3>
<a class="expand" id="banana_on" href="#" onClick="showBanana('banana_bread')">expand</a>
<a class="contract" id="banana_off" href="#" onClick="hideBanana('banana_bread')">contract</a>
<img class="desert_img" src="images/banana_bread.jpg" />
<p class="banana_description">
Why compromise the banana flavor? This banana <br />
bread is moist and delicious with loads of <br />
banana flavor! Friends and family love my recipe <br />
and say it's by far the best! It's wonderful toasted!! Enjoy!
</p>
</div>
<div id="carrott_cake" class="recepie">
<h3>Carrott Cake</h3>
<a class="expand" id="carrot_on" href="#" onClick="showCarrot('carrot_cake')">expand</a>
<a class="contract" id="carrot_off" href="#" onClick="hideCarrot('carrot_cake')">contract</a>
<img class="desert_img" src="images/carrott_cake.jpg" />
<p class="carrot_description">
Why compromise the banana flavor? This banana <br />
bread is moist and delicious with loads of <br />
banana flavor! Friends and family love my recipe <br />
and say it's by far the best! It's wonderful toasted!! Enjoy!
</p>
</div>
<div id="holiday_cookies" class="recepie">
<h3>Holiday Cookies</h3>
<a class="expand" id="cookie_on" href="#" onClick="showCookie('holiday_cookies')">expand</a>
<a class="contract" id="cookie_off" href="#" onClick="hideCookie('holiday_cookies')">contract</a>
<img class="desert_img" src="images/holiday_cookies.jpg" />
<p class="cookie_description">
This is an old family recipe that makes a very <br />
delicious cookie.
</p>
</div>
</div>
function showMyStuff(name,what) {
if(what) {
$("#"+name+"_off, ."+name+"_description").show();
$("#"+name+"_on").hide();
}
else {
$("#"+name+"_off, ."+name+"_description").hide();
$("#"+name+"_on").show();
}
}
usage:
showMyStuff("carrot",true) // this equals to the showCarrot();
showMyStuff("carrot",false) // this equals to the hideCarrot();
This can be greatly simplified
$(function() {
$(".contract, [class$='_description']").hide();
$("a[id$='_on']").click(function(e){
e.preventDefault();
$(this).siblings(":not(img,h3)").add(this).toggle();
});
$("a[id$='_off']").click(function(e){
e.preventDefault();
$(this).siblings(":not(img,h3)").add(this).toggle();
});
});
I used the ends with [$=''] attribute selector, the not selector :not() selector, and the add add() traverser. Since you're using jQuery you don't have to inline bind your onclick events, use a click event binder.
The click event finds all of the siblings of the clicked element except h3 and img tags and calls toggle() which shows it if it is hidden and hides it if it is shown.
working example: http://jsfiddle.net/hunter/SPtqW/
See example of the following here.
First, I've removed your onclick handlers from your HTML and placed them inside the jQuery instead.
Then in the click functions I've used the methods next(), prev() and nextAll() to help find the appropriate elements to show and hide. See http://api.jquery.com/ for more information on these methods.
$('.expand').click(function(e){
e.preventDefault();
$this = $(this);
$this.nextAll('p').first().show();
$this.next('.contract').show();
$this.hide();
});
$('.contract').click(function(e){
e.preventDefault();
$this = $(this);
$this.nextAll('p').first().hide();
$this.prev('.expand').show();
$this.hide();
});
See example.
It looks like you're attempting to create an accordion style interface. If so, you might want to take a look at the accordion widget that's a part of JQuery UI:
http://jqueryui.com/demos/accordion/
And if you want to focus your changes on the "Description" and "Button", you can change the #hunter's answer with:
$(this).siblings(".expand, [class$='_description']").add(this).toggle();
And
$(this).siblings(".contract, [class$='_description']").add(this).toggle();
Here is a fork of #Hunter's Fiddle, with these modification : http://jsfiddle.net/akarun/FTRHQ/