Im working on the products page or an ecommerce site and currently there are 3 small images and one large image. the three small images are clickable and when the user clicks one of the images the larger image is changed to show that image using:
onMouseDown="document.Image.src=/img1.jpg;"
This works fine. The trouble I am having is when trying to link this with colorbox. What I would like to do is for the user to click one of the smaller images and then the larger image is loaded then when they click that larger image the colorbox function is called and the image is shown in the colorbox popup. Is there anyway to do this?
Currently my code shows as follows:
jQuery("a.largeImgPop").colorbox({opacity:0.4, rel:'largeImgPop', photo:true});
<a class="largeImgPop" href="/img1.jpg">1</a>
<a class="largeImgPop" href="/img1.jpg">2</a>
<a class="largeImgPop" href="/img1.jpg">3</a>
<img src="/img1.jpg" name="Image" alt="Image 1" />
Is this possible?
A couple of things.
Why not skip right to the colorbox after clicking the small image?
But assuming you have one large placeholder image and several thumbnails swapping them, this is how I would do it.
Give this an id. You can set the size to whatever you need.
<img src="/main.jpg" id="mainImg" name="Image" alt="img_placeholder" />
Try using the .click() && .live() functions with jquery.
Note: live() has been deprecated in later versions of jquery. try using on() if that doesn't work.
$(function(){
$('.largeImgPop').click(function(){
var img = $(this).attr('src');
$('#mainImg').attr("src", img);
});
$('#mainImg').live('click',function(){
$(this).colorbox({opacity:0.4, rel:'largeImgPop', photo:true});
});
});
I don't know if this will work...also I don't know why you would load one image to another. You never specified your image directory structure. You could add rel="/images/larger/img1.jpg" and get that.
And change to.
var img = $(this).attr('rel');
$('#mainImg').attr("src", img);
<img src="/img1.jpg" name="Image" alt="Image 1" onMouseDown="myFunction()"/>
Related
I'm having an issue with some lightbox galleries.
I have to make multiples galleries in one page, but in each thumbnail it'll have multiples images from another div. I tried some Jquery lightbox, but it didnt have this feature. (fancy, feather, etc.)
a href="#gallery1"
a href="#gallery2"
...
div id="gallery1"
multiple images
multiple images
div id="gallery2"
multiple images
multiple images
The only "solution" i think about was to make some thumbnails with display none linking to the other images, but it's more than 200 images, and i think is a "bugged" solution...
There's any solution for that? Or Any specific Jquery can do it?
Thanks!
Well, it does not matter if you have 2 or 200 images, you still need to somewhere store the data. Possible solutions (using fancyBox3):
1) Create links for all images, but make visible only the first one for each gallery. Something like this:
<p>
<a href="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" data-fancybox="images-preview">
<img src="https://c1.staticflickr.com/1/357/31876784275_fbc9696913_m.jpg" />
</a>
</p>
<div style="display: none;">
<a href="https://farm1.staticflickr.com/582/32752534825_4b35b2df81_o_d.jpg" data-fancybox="images-preview"
data-thumb="https://farm1.staticflickr.com/582/32752534825_c25321a594_m_d.jpg"></a>
<a href="https://farm3.staticflickr.com/2859/33395734202_522f9d8efd_k_d.jpg" data-fancybox="images-preview"
data-thumb="https://farm3.staticflickr.com/2859/33395734202_15a81c4ef3_m_d.jpg"></a>
</div>
As you can see, you do not need to create thumbnail image for each link, you can use data-thumb attribute instead. See the last example here - https://codepen.io/fancyapps/pen/mqEMGX?editors=1000
2) Create custom click handler for your preview images that opens gallery programmatically, e.g., using $.fancybox.open( [array of images], { your options });. You can choose to store data in some variable or to use ajax to retrieve the list.
I'm trying to create the following gallery:
- One large image
- Thumbnails of gallery images below
- Large image should open all images on click in a lightbox gallery
I have the lightbox gallery working using PhotoSwipe and it fires when I click the large image. I also have the thumbnails in place below the large image. My question now is how do I change the large image when I click one of the thumbnails? I've seen a lot of examples (also quite simple ones), but none of them seem to work in my case.
Here's the code that I have for the thumbnail:
<a href="<?php echo $image['url']?>" data-size="<?php echo $image['width']?>x<?php echo $image['height']?>" data-index="0">
<img src="<?php echo $image['url']?>">
</a>
What I want is that when I click the href of the thumbnail that it changes the big image, which is display with this code:
<img class="bigimg" src="imageurl.jpg">
The thumbnail needs to have the href tag because this is required for the lightbox function to work.
I've seen some jQuery examples that replace the src of the bigimg with the src of the thumbnail, but I can't quite get it to work with the href also in place.
For reference,
this is the situation.
Example: JSFiddle
Try,
var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
$('.thumbnailLink').click(function() {
$('.big a').attr('href', $(this).attr('href'));
$('.bigimg').attr('src', $(this).attr('href'));
});
here is the fiddle https://jsfiddle.net/91oq8ja2/2/
Is this what you are looking for?
I'm not intimately familiar with lightbox, but if I understand you correctly, you want it to just do what it's already doing, but in addition, change the src of your img.bigimg. If that's the case, it should work to add your own listener on the a tag as long as you don't prevent the default action. Something along the lines of this:
var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
thumbnailLinks.on('click', function() {
$('img.bigimg').attr('src', $(this).attr('href')); // Set img.bigimg src attribute to the href attribute of the link that was clicked.
});
There may be some weaknesses to this. For example I'm not sure if this will work if a user tabs through links and activates it using the enter key, though it should be possible to add other events than just click to help with that. This is also untested code at the moment, but have a go and see if it works for you.
Currently i using a header banner with theme option, where my banner code looks like
<img src="#" alt="" title="" />
that i can use a single image in my above banner.
But now my advertiser want me to use two images instead of one (advertise link remain same), where images will be change randomly each time page is loaded/refreshed.
Please, help me on this issue.
Thanks!
using php rand(1,2); function that return 1 or 2 , then using this random value to show image url on img src.
this may help
https://wordpress.org/support/topic/random-imagelogo-on-header
Pretty simple question:
Can I force a browser to not download any images or other resources if they are display:none, but then, of course download when display is switched to inline?
Here is the concept: A lecture presentation with many slides as images all set to display:none by default then changed to display:inline when the video reaches a certain time index. The browser still tries to load all of the images even though they are not displayed which might cause a hang on the video or elements that should load after the slide images.
I have a series of these:
<figure class="lectureNotCurrent" data-start="0" data-end="259">
<a href="img1_large.JPG" target="_blank">
<img src="img1_large.JPG" class="lectureSlidesImg" /></a></figure>
EDIT - SHOULD WORK?
<img data-src=/path/to/img.png src="">
//js
loadNextImages() {
document.querySelectorAll("#slidesContainer footer").map(function () {
this.getElementsByTagName('img').src = this.getElementsByTagName('img').dataset.src;
delete this.dataset.src;
});
}
Update your html so that the hidden images don't have src (or have a one transparent pixel file as the source, for example) and use data-src and change the src when it's displayed:
<img data-src=/path/to/img.png src="">
//js
loadNextImages() {
document.querySelectorAll("#container img").map(function () {
this.src = this.dataset.src;
delete this.dataset.src;
});
}
Here is what I ended up doing.
HTML
<figure class="lectureNotCurrent" data-start="0" data-end="259">
<a href="img1_large.JPG" target="_blank">
<img data-src="img1_large.JPG" src="" class="lectureSlidesImg" /></a></figure>
In the function that runs the timings for the slides I added the variable:
var imgNames = document.getElementsByClassName('lectureSlidesImg');
I then added this statement in the section of code (a 'for' loop) that applies display:inline to the figure tags at the correct moments according to the video's current time.
imgNames[i].src = imgNames[i].getAttribute('data-src');
So in addition to displaying the figure tag in question it will also take the data-src value for the image in question and insert it in the src attribute. The image then loads.
There is a lot of power behind the data-* custom attributes. Glad I learned about those.
One would think, however, that display:none should prevent loading the content unless the display is changed.
I'm using Lightbox2 in a fairly standard implementation: click on an image in a series (all with rel="lightbox[gallery]") and it opens in the Lighbox with the next/prev arrows pointing to the next and previous image in the series. I also have a text link that points to the first image and opens the gallery (also with rel="lightbox[gallery]").
The problem is that, for some reason, that text link is counting as an image in the series. So when the 6 image gallery loads, it claims there are 7 images (the first counting twice). What's more is that it loads on image 2 of 7, skipping the first one (which is a duplicate anyway).
If I remove that text link, all is well. But, of course, I can't. So what are my options? Can I use javascript to initiate the Lightbox (so the link doesn't count as an image in the gallery)? Anyway, code:
<script type="text/javascript" src="lightbox.js"></script>
<!-- THIS IS THE TEXT LINK. NOTE THAT IT IS IDENTICAL TO THE FIRST IMAGE LINK -->
View Gallery
<!-- THESE ARE THE GALLERY IMAGES. NOTE THAT THERE ARE 6 OF THEM. WHEN GALLERY LOADS, IT WILL THINK THERE ARE 7 BECAUSE OF THE TEXT LINK ABOVE -->
<img src="first_sm.jpg">
<img src="second_sm.jpg">
<img src="third_sm.jpg">
<img src="fourth_sm.jpg">
<img src="fifth_sm.jpg">
<img src="sixth_sm.jpg">
Figured it out! I added an id to the first image:
<a id="first_img" href="first.jpg" title="I am image one of three" rel="lightbox[gallery]"><img src="first_sm.jpg"></a>
Then I change the text link to a <span> with an onClick like so:
<span onclick="$('#first_img').click();">View Gallery</span>
I styled the <span> to look and behave like a link, and voila!
(Sometimes all it takes is writing out your question to get to the answer!)