I have fancybox opening when I click on the "main image" area in my gallery, and no matter what image is open fancybox always starts at the first image in the gallery. For example when a user clicks on the 4th image thumbnail, it loads into the "main image" area correctly, but when clicking on the main image fancybox starts from the beginning.
I understand why it's doing this, because the main image area is wrapped in:
<a rel="gallery" class="fancybox" href="#hover0"> <img/> </a>
But what I would like to happen is to have the href '#hover0' change to #hover2, #hover3, #hover4 etc when the corresponding image is loaded in the main area. Not sure how to go about doing this.
Test Page: http://www.pixlsnap.com/j/testb.php
Alright, so I have tested this by saving your whole page (along with all the resources linked to your live site, so glad the images had a direct path), you could do the following, but before I go to that there is a script error that you need to correct:
$(function(){
// Bind a click event to a Cloud Zoom instance.
$('#1').bind('click',function(){
^ You have not closed this function correctly, it needs an extra }); at the end.
Now there are 2 things you need to do for your problem:
1) Paste the following code above the function I mentioned previously (the order matters so it needs to be above it):
$(document).ready(function(){
$('#imgconstrain img').on('click',function(){
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#1').closest('a').attr('href','#'+$new_hoverid);
});
});
To explain what this code is doing, when the big image is clicked, we are going to get the active image, in case you haven't noticed, when you click on a thumbnail it gets the class cloudzoom-gallery-active. So, on click of the bigger image, we are going to retrieve the id of the thumbnail with the cloudzoom-gallery-active class.
Now, since we are getting the id attribute, each image should have a unique id. So here we go for the second part:
2) Give your thumbnails image a unique id like:
<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
<!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
<!-- ^ here -->
...till hover6 and that's it.
Let me know if that works for you and feel free to ask if the explanation wasn't clear enough ^-^
Edits:
So as per the comments, here's a few things to be done:
1) In your this anchor tag:
<div id="imgconstrain">
<a rel="gallery" class="fancybox" href="#hover0">
<img class = "cloudzoom" id="1" src =
Take out rel="gallery" (this is the reason fancybox is showing from start on click of next) and remove fancybox class and instead add open-fancybox (the reason for this is coming later)
2) All these lines:
<script type="text/javascript">
function displayCaption() {
var caption = document.getElementById('caption');
caption.innerHTML = this.alt;
}
document.getElementById('1').onclick = displayCaption;
document.getElementById('2').onclick = displayCaption;
//....
</script>
is not needed, we will do this in a smaller way
3) Like I mentioned previously, please add the ids here:
<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
<!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
<!-- ^ here -->
and so on till the last image.
4) Now the final piece:
$('ul#carousel.elastislide-list img').on('click',function(){
//here we get the updated id (hover1, hover2 etc.)
//and pass it to the cloud-zoomed anchor tag
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#imgconstrain a').attr('href','#'+$new_hoverid);
//get the caption of the thumbnail image and set it to the
//p tag with id caption
caption_text = $(this).attr('alt');
var caption_element = document.getElementById('caption');
caption_element.innerHTML = caption_text;
});
//what this code does is, when the cloud-zoomed image is clicked,
//we get the updated href (which is what the above code does)
//and we are going to make that href get clicked so that the fancybox opens
$('#imgconstrain a.open-fancybox').on('click',function(){
$to_open = $(this).attr('href');
$('a.fancybox[href="'+$to_open+'"]').click();
});
});
You can take out this code which was in my previous answer as I have already placed it in the new one:
$(document).ready(function(){
$('#imgconstrain img').on('click',function(){
$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
$('#1').closest('a').attr('href','#'+$new_hoverid);
});
Full code pastebin
Let me know if it works for you :)
Related
I have two separate images for each 'active' and 'inactive' link on my page. Each link toggles a different article on my web page.
<img src="/img/active.png" />
<img src="/img/inactive.png" />
I'm initially displaying all the inactive images on my page, but would like to display the active image respective to the link a user clicks.
Note * Each link, both active and inactive, will have a unique image url
<a href="#">
<div>
Click here for foo
<img src="/img/inactive-123.png" />
</div>
</a>
<a href="#">
<div>
Click here for bar
<img src="/img/inactive-345.png" />
</div>
</a>
There will potentially be 100+ links on my page, so I am looking for the most efficient & maintainable way to do this in jquery. I've thought about indexing these images with a number, but that could easily lead to incorrect associations between my articles - any ideas?
Sorry for clear JS, not JQuery as you mentioned
var tab = document.getElementsByTagName("img");
for (var i = 0; i < tab.length; i++){
tab[i].addEventListener('click', function () {
if (this.src.indexOf("inactive") !== -1){
this.src = this.src.substring(0, this.src.length -12)
this.src += "active.png"
}
else {
this.src = this.src.substring(0, this.src.length -10)
this.src += "inactive.png"
}
})
}
It will work as long as inactive.png or either active.png are on the end of the src value.
You can accomplish this without jQuery pretty simply. I'm assuming that the structure of the elements inside the <a> will be the same as you wrote. But you can create a function that takes this (a element) and the src you want to replace the inner img tag with. Of course you'll want to edit the function to be a bit more safe of about handling errors, e.g. index out of range exceptions.
activateImg = function (elm, imgSrc) {
elm.children[0].children[0].src = imgSrc;
}
<a href="#" onclick="activateImg(this, 'https://placeholdit.imgix.net/~text?txtsize=33&txt=ACTIVE%20FOO&w=350&h=150')">
<div>
Click here for foo
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=INACTIVE%20FOO&w=350&h=150" />
</div>
</a>
<a href="#" onclick="activateImg(this, 'https://placeholdit.imgix.net/~text?txtsize=33&txt=ACTIVE%20BAR&w=350&h=150')">
<div>
Click here for bar
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=INACTIVE%20BAR&w=350&h=150" />
</div>
</a>
Edit:
If you want to swap the images back and forth just pass in both image links and swap depending on which one is the current src. http://plnkr.co/edit/LUDZEQF1AHXEZ7L83Fyb?p=preview
Edit2: I just re-read your comment and I think only one image can be active at a time. For that you could use an attribute to manage the state like data-active. I'll have an example soon.
If your links route to another page, something like the following should work:
$(function () {
var pathname = window.location.pathname.replace(/\//g, "");
$('a[href=' + pathname + '] img').attr('src', "/img/active.png");
});
Or do you need the image to change without refreshing the page?
I came up with a simple solution I'm happy with; I have created two data attributes on each image
<img
src=""
data-inactive-src="/inactive-123.png"
data-active-src="/active-123.png"
/>
<img
src=""
data-inactive-src="/inactive-345.png"
data-active-src="/active-345ng"
/>
Then when it comes time to swap the active for the inactive image, I do this
var currentIcon = $("#link-"+target).find('a div img') // don't worry about this line
var allIcons = $('a div img');
/** This section SHOULD keep track of the last
icon changed and change it back to inactive instead of looping through each element**/
allIcons.each(function(index) {
$(this).attr("src", $(this).data("inactive-src"));
});
/** Set the active icon image for the current target **/
currentIcon.attr("src", currentIcon.data("active-src"));
The each() loop will have to be swapped out, but this gives me perfect control of the active/inactive images. If you see any flaws with this please let me know!
I'm trying to modify specific images as the site displays a lower resolution file than the original, and also replace the link href for that image -- appending something to the end of that link to make it downloadable.
The website in particular, does not properly send the information about the image to the browser when you right click/save (file saves as content.jpg), but they have a download link which does properly send the filename to the browser (All it does is append &dl=1 to the end of the URL)
I have found some example code, and modified it to do the img src changes I require, but am having issues appending to the link href.
There are many types of links on the page so specific URL replacement is required:
Clickable Links all over page (Don't touch):
example.com/view/UNIQUEID
Image Src (Low Res): example.com/subdir/preview?page=UNIQUEID
Image Src (Original Res): example.com/subdir/content?page=UNIQUEID
I only wish to change the image sources from content/preview to content/content to display the full resolution image in the browser, but also add an href link (this can be copied from the img src as its the same link, but also append something to the end of it without affecting any other links.)
Here's what I have so far which works for replacing the specific img src:
image = document.getElementsByTagName("img");
for (i = 0; i < image.length; i++) if (image[i].parentNode.href) {
//Remove onclick attribute, cancelling their own Image Viewer
image[i].parentNode.removeAttribute('onclick');
//Replace regular sized preview image, with the full sized image
image[i].src = image[i].src.replace('example.com/subdir/preview?page=','example.com/subdir/content?page=');
image[i].parentNode.removeAttribute('width');
image[i].parentNode.removeAttribute('height');
}
Now I've found that adding
image[i].parentNode.href = image[i].src + '&dl=1';
at the end of my current script works. But it affects every image, so it breaks a lot of other things.
Any suggestions to simply append &dl=1 to the end of the now replaced 'subdir/content?page=UNIQUEID' href links?
TLDR:
Looking to change:
<a href="http://example.com/subdir/content?page=12345" onclick="imageviewer.open(); return false;">
<img src="http://example.com/subdir/preview?page=12345&filename=this+is+the+filename.jpg">
</a>
into:
<a href="http://example.com/subdir/content?page=12345&dl=1">
<img src="http://example.com/subdir/content?page=12345&filename=this+is+the+filename.jpg">
</a>
This question is almost a duplicate of: How to relink/delink image URLs to point to the full image?
The trick is to use querySelectorAll() (or jQuery) to fine-tune which images are processed.
Also, I recommend not changing the image source (keeps page fast and saves bandwidth), but just rewriting the link. Once the link is rewritten, you can right-click to save larger versions of just the pics you are interested in. Or, you can then use the excellent DownThemAll extension to bulk download images by link.
In your case, code like this should work:
var thumbImgs = document.querySelectorAll ("a > img[src*='subdir/preview?']");
for (var J = thumbImgs.length-1; J >= 0; --J) {
var img = thumbImgs[J];
var link = img.parentNode;
var lnkTarg = link.href + "&dl=1";
link.href = lnkTarg;
link.removeAttribute ('onclick');
//-- Not recommnded to change thumbnail...
//var imgTarg = img.src.replace (/\/preview/, "/content");
//img.src = imgTarg;
}
<a href="http://example.com/subdir/content?page=12345" onclick="alert('I shouldn\'t fire on click!'); return false;">
<img alt="Target img 1" src="http://example.com/subdir/preview?page=12345&filename=filename_1.jpg">
</a><br>
<a href="http://example.com/subdir/content?page=aaa" onclick="alert('I shouldn\'t fire on click!'); return false;">
<img alt="Target img 2" src="http://example.com/subdir/preview?page=aaa&filename=filename_2.jpg">
</a><br>
<a href="http://example.com/some/random/link" onclick="alert('I should still fire on click!'); return false;">
alt="Img shouldn't be altered" <img src="http://example.com/some/random/image.jpg">
</a>
I'm working with Isotope and I have a lot of images in it.
The problem is that when visiting my one page website from a smartphone it takes quite a bit to load the page as isotope load all the images thumbnails as soon as isotope itself loads.
So, basically I want to hide/not load all the images that mustn't be shown if it's category isn't clicked and what I did was use two workarounds:
set the figure to display:none so that it doesn't show the void where it was supposed to be and the other images can actually occupy that space
set the img src to about:blank so that it doesn't load until it's category is clicked
then when the link "Click me!"(category) is clicked the figure gets set to display:block and the img src gets replaced by the real image path.
style:
#showfigure{
display:none; !important
}
body:
Click me!
<figure id="showfigure" class="filter imgtoshow">
<img id="showimg" src="about:blank" alt="">
</figure>
script:
<script>
function showAll() {
document.getElementById("showfigure").style.display = 'block';
$("#showimg").attr("src","example.jpg");
};
</script>
Now, the only way I got it to work with multiple figures/images was giving each figure and image it's own id (showfigure1, showfigure2, showfigure3 etc... and showimg1, showimg2, showimg3, etc...) as using the same id only works for the first figure/img in the code.
Am I missing something?
I tried replacing the path of the img src like this:
http://jsfiddle.net/F6Gds/28/
But I can't get it to do the same with the onclick function from the link "Click me!", and anyways there's the same problem with the ids.
Thanks in advance for any help!
So I'm working on a website for my job's store, a sort of gallery of our products. I've gotten the main web page, cut out the fat, put in the meat, and have tested it numerous times along the way. Now I am having some troubles with the JQuery not working properly. I have provided direct links to the JQuery code, a copy of the website itself, and the source code below..
The general layout of the JQuery(or Javascript, I'm not exactly sure which) is:
window.onload = function() {
function displayImage() {
var mainImg = document.getElementById('Main_IMG');
var caption = document.getElementById('caption');
mainImg.src = this.src;
caption.innerHTML = this.alt;
}
document.getElementById('Zero').onclick = displayImage;
document.getElementById('One').onclick = displayImage;
document.getElementById('Two').onclick = displayImage;
// Etc etc
}
Here is a segment of the website (with some extra fluff removed):
<h1 class="Wrapper Main ClearFix">Image Gallery</h1>
<div id="Main" class="Wrapper Main ClearFix">
<div id="container11">
<img id="Main_IMG" src="img/100___06/IMG_0001.JPG" alt=""><br>
<p id="caption"></p>
</div>
<div id="gallary">
<img id="One" src="img/100___06/IMG_0020.JPG" alt="Headboard Pricing">
<img id="Two" src="http://images.craigslist.org/00P0P_84oo9H7byag_600x450.jpg" alt="Needle Point Upholstered Chair Price: $40">
<!-- etc etc -->
The program is simple: When a user clicks on an image (say in a table for example), that image will display to the left of the gallery with the alt tag being the product and price and such.
The problem: At image number 16 I needed to give it a... different-from-normal tag
(tag I wanted to use: sixteen.
Tag I used: F_sixteen)
The program then worked fine for a few more 'numbers' up until the 36's and 40 where the program refuses to respond properly.
This is a link to the website as of writing this question:Here
This is a link to the actual jquery code: Here
And for those on mobile, the link to the source code is: Here
I apologize for the size of this question, as well as if this seems complicated. Thank you for viewing this, as I appreciate any help.
EDIT: I am not sure if the web page will work in Safari. If it doesn't, I'll see what I can do to change it.
OK, I hate to suggest using jQuery to someone who bravely is not. But use it. You can cut out the 40 calls to document.getElementById and reduce the risk of typos. Just include jquery in your page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then you can use the following code:
window.onload = function() {
function displayImage(img) {
var mainImg = document.getElementById('Main_IMG');
var caption = document.getElementById('caption');
mainImg.src = img.src;
caption.innerHTML = img.alt;
}
$("#gallary img").click(function(){
displayImage(this);
});
}
I've kept the required changes in the above code to a minimum. To 'jquerify' it further you could write this equivalent code instead:
$(function(){
var mainImg = $('#Main_IMG');
var caption = $('#caption');
$("#gallary img").click(function(){
mainImg.attr('src', this.src);
caption.html(this.alt);
});
});
Loading the site produces javascript error: "Uncaught TypeError: Object # has no method 'getElementByID'"
Examining the javascript, some of your calls are to getElementById, and some to getElementByID. Javascript is case-sensitive, you have a typo.
i am working on a jquery slider that have thumbnails in the bottom and i want them to link with related videos. what i am doing for that is i am adding a post from admin, the title contain the title of image, the content area contain the thumbnail image and for the video link i am adding a custom field.
come to slider again if i am doing the same process for images only(not video) it work fine. i click on thumbnail in the bottom and large image displays in slider. i am getting the source of image that i am clicking through this line of code
var url = $(this).attr("src");
it gives me the source of the image from img tag. every thing is fine. but now my exact point is that i want to get the custom field value through the above piece of code but i dont know how to do that as i tried so many methods randomly from the internet but nothing work fine for me.
hope you guys will understand what i am saying if not i will give further details with code if required.
any help will be grately appriciated.
here is my full code(php and html)
</div>
<div class="video-gallery">
<a class="prev browse left"><<</a>
<div class="scrollable" id="scrollable">
<div class="items">
<?php if (have_posts()) : ?>
<?php
$thePosts = get_posts('numberposts=50&category=4');
foreach($thePosts as $post) :
setup_postdata($post);
$custom_field = get_post_meta($post->ID,'video path', true);
echo '<div class="myclass" style="display:none" id="'.$custom_field.'"></div>';
the_content();?>
<?php endforeach; ?>
<?php else : ?>
No Results
<?php endif; ?>
</div>
</div>
here is the javascript jquery
<script type="text/javascript">
$(".video-gallery img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $('.myclass').attr('id');
alert(url);
// get handle to element that wraps the image and make it semi-transparent
var wrap = $(".image_wrap").fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("iframe").attr("src", url);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".video-gallery img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
});
</script>
you need to use the get_post_meta() function to retrieve the desired custom field, like so:
$custom_field = get_post_meta($post->ID,'CustomFieldName', true);
You can use custom attributes prefixed with data-, add this when you retrieve every thumbnail:
<img data-video="get_post_meta($post->ID,'video_ulr', true);" src="...">
And you can manipulate this "data" using Jquery. For example, to retrieve data in your example use this:
var url = $('this').data('video');
take a look at the jQuery documentation for more info/examples.