I have a set of images with names like NH-1,NH-2,NH-3,... and another set NS-1,NS-2,NS-3,.... displayed as gallery images with three images in a row. Now, I will create a div at the left hand side that displays the links to categories. Say this div has categories NH and NS . Suppose when I click on NH, the images in the gallery should get filtered and only images with prefix NH should be displayed and when I click on NS all images with NS as prefix should be displayed.By default if nothing is clicked, then all images should be displayed. How can I do this.
You have got your data structured only, just need to consider the approach
first of you need to catch the click function on the categories
$("category selector").click(function(){
//logic here to call a function to show images and pass prefix
showImageWithPrefix(get NH or NS,send image count accordingly);
});
function showImageWithPrefix(prefix,Count)
{
//now you can show the images using a for loop just by appending `'-`' and
`image extension` to the `image name prefix`
}
You can implement a javascript
function showImages(var type) {
// Based on the type of image, you can display the images as gallery
// For each image element you want to add you can use the following code. Define a CSS class called as .thumbnail to show the image gallery in thumbnail size.
$('#content').prepend('<img id="imgid" src="imgfile.jpg" class="thumbnail"/>')
}
Call the showImages('') method in the onlcick event of the link.
Related
I'm making an extension that grabs an image URL within the "uCW" div on an HTML page.
Currently, I have:
var uCW = jNode.closest("div._q7o");
var image = uCW[0].children[1].getElementsByTagName("img")[0].src;
console.log(image);
That finds the image by going into the div/children and pulling the image. Unfortunately, this method is problematic, since it stops working if the children change, which they regularly do.
Instead, I want to select the image by searching the div and all its children (there are a lot of them) for the first image/string that starts with "https://external" (all the images I want start this way, and that doesn't seem to change.)
This is what I tried:
var uCW = jNode.closest("div._q7o");
var image = $(uCW).find([name^="https://external"]).src;
console.log(image);
This doesn't work. The console just prints "undefined."
You could do it like this, if ucw is a classname (if it's an id, you would write $("#ucw") instead):
var image = $(".ucw").find('[src^="https://external"]').attr("src");
console.log(image);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ucw">
<img src="https://external/1.jpg"/>
</div>
If your images have a name attribute with the source of the image as value, you can also adjust your attempt to fetch the images via their name attribute like you did:
var image = $(".ucw").find('[name^="https://external"]').attr("src");
I’m trying to make my image more reliable / responsive in a modal.
and I’m pulling the image source from my database (MySQL) and show the image on a modal.
I have this code:
<a class='modal-trigger' href='#view-image' onclick='getImage(`<?php image source; ?>`)'></a>
After that this is my JavaScript
function getImage(imgsrc){
$("#item-thumb").attr("src",imgsrc);
var height = $('#item-thumb').height();
if(height > '600'){
console.log(height);
}else{
console.log(height);
}
}
My problem is when I’m getting the height of the image it always outputs 0. I think the script itself is getting only the blank image, I suppose? Is there any other way to get the dimension of an image using jQuery?
First of all you have to pass string to javascript using single quotes ', you are passing with back ticks.
corect
<a class='modal-trigger' href='#view-image' onclick='getImage(`<?php image source; ?>`)'></a>
To:
<a class='modal-trigger' href='#view-image' onclick="getImage('<?php image source;?>')"></a>
Also, what is the purpose of href='#view-image'.
Are you changing the hash on click of link or calling onclick event?
If u need to get the image height then u need to render the image on dom (document) unless , u can't get the image height
If u have image data on database, then do the height operation using PHP
list($width, $height, $type, $attr) = getimagesize("image_name.jpg");
You need to wait for the image to load before getting its height. Try using this code:
$('#item-thumb').load(function () {
console.log($(this).height());
});
I currently have a slideshow run with HTMl CSS and JS at the moment for the navigation buttons below the slideshow it is just placing numbers instead of text. Is there a way to grab the images title and use it or custom text for each slide link. Below i included the Javascript that makes the navigation buttons and adds the text. If you need anything else just let me know.
If i can just specify text in this JS file that would work too.
Also if it may help im using Kickstart HTML Template.
Link to view it http://bliskdesigns.com/clients/timbr/
var items = $(this).find('li');
wrap.append('<ul class="slideshow-buttons"></ul>');
items.each(function(index){
wrap.find('.slideshow-buttons')
.append('<li>'+(index+2)+'</li>');
});
It's difficult to give you a concise answer with what you've provided, however:
Assuming that in the code you've provided:
items is an array containing each slide in your slideshow;
That each element in items contains an img;
That the text that you want to appear in the slideshow nav is the title attribute of each img;
That the unordered list being built by wrap is the navigation;
That the text you want to change is the numeral within the anchor of each item injected into wrap.
Here's a potential answer:
// put all slides into 'items'
var items = $(this).find('li');
// append the wrap element with an unordered list
wrap.append('<ul class="slideshow-buttons"></ul>');
// loop over each item
items.each(function(index){
// grab the title attribute of the img child of this instance of items
var titleText = $(this).find('img').attr('title');
// push a new <li> into 'wrap'
wrap.find('.slideshow-buttons').append('<li>'+titleText+'</li>');
});
This should just be a direct replacement for wherever in your project the code you've included above came from.
As I say: I can't promise that this will work without a lot more information, but in theory it will. Make sure that each of your images has a title:
<img src="/link/to/image.kpg" alt="alternative text" title="text you want to appear in the slider navigation" >
Alternatively, you can use the text in the image's alt tag instead by changing this line from above:
// grab the alt attribute of the img child of this instance of items
var titleText = $(this).find('img').attr('alt');
In the list items you can add the text that you want to display instead of numbers, as shown below.
<li data-displayText="Timber Mart"> <img src="http://i.imgur.com/4XKIENA.png" width="920" /> </li>
Then in above code you can use the text instead of index, as shown below.
wrap.find('.slideshow-buttons')
.append('<li>'+$(items[index]).attr("data-displayText")+'</li>');
I am building a worpdress site and have multiple galleries on a page built using the shortcode. At the moment all the image are given the rel attribute 'prettyPhoto[1]' but I need each gallery to be separate.
I have 56 images in total on the page, so when the first image of gallery 1 opens in lightbox it says 1/56 and I can click through all 56 images, what I want is for gallery one to say 1/16
then gallery 1/16 etc.
I was told to edit this line of script in my raw.js file:
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
but nor sure what to do it with it? Any help would be greatly appreciated.
Here is a link to the page in question:
http://www.tetra-shed.co.uk/news/
prettyPhoto groups galleries together based on the contents of the square brackets. So you are getting all 56 images in the same gallery because they have all been assigned to gallery 1.
What you really want is the first sixteen in gallery 1;
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
And the next 16 in gallery 2;
$(".gallery-icon a").attr('rel', 'prettyPhoto[2]');
The question is- how to do that given that the rel attribute is being assigned via JS? Well I would look at doing it based on the parent parent div id. Each gallery-icon element has a gallery-item parent. Each of those is part of a gallery class which has a specific ID. For example
<div id='gallery-3' class='gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail'>
<dl class='gallery-item'>
<dt class='gallery-icon'>
So you would want to assign that unique gallery id as the pretty photo rel value. ie;
$(".gallery-icon a").attr('rel', 'prettyPhoto[gallery-3]');
I would do it by finding all gallery-icons and using closest() to find the parent gallery id, like this;
Finding the id of a parent div using Jquery
I've not tested it or anything but something like this should get you going in the right direction;
$('#content').find('.gallery-icon a').each(function() {
var gallid = $(this).closest("div").attr("id");
$(this).attr('rel', 'prettyPhoto['+ gallid +']');
});
I maybe came with easier solution, I am just going through all my gallery div in each function and then initializing the prettyPhoto in images inside them.
$(document).ready(function(){
$.each($(".gallery"), function(i, val) {
var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']";
$(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false});
});
});
All that needs to be done is to change the rel in the html where you add your gallery that looks something like this rel="prettyPhoto[pp_gal]"
in your first gallery you create inside your div change the rel="prettyPhoto[pp_gal]" to "prettyPhoto[gallery1]" (for example)
and the next to "prettyPhoto[gallery2]" and so on.
When using NyroModal to display images it automatically shows the image count of how many are in the collection in the H1 tag when the popup occurs i.e. "1/3", "2/3", "3/3"
Does anyone know how to siwtch this off or manipulate the h1 tag?
I'm also interested in NyroModal automatically positioning the h1 tag at the bottom of the image instead of the default (top).
Plugin is located here: http://nyromodal.nyrodev.com/
You should be able to remove the h1 with CSS
h1#nyroModalTitle{display:none}
Looks like there's also a parameter you can pass through: title: null
Alternatively, you should be able to position the h1 tag at teh bottom, but it might involve editing the source javascript.
To remove the 'Page 1 of ...' in NyroModal, use this javascript:
$.nyroModalSettings({ galleryCounts: '' });
To place the nyroModal title/heading below the image then go into the nyromodal javascript code (unpacked) and search for the code below and replace 'modal.contentWrapper.prepend' with 'modal.contentWrapper.append'.
function setTitle() {
var title = $('h1#nyroModalTitle', modal.contentWrapper);
if (title.length)
title.text(currentSettings.title);
else
//modal.contentWrapper.prepend('<h1 id="nyroModalTitle">'+currentSettings.title+'</h1>');
modal.contentWrapper.append('<h1 id="nyroModalTitle">'+currentSettings.title+'</h1>');
}