I am using a theme for Wordpress that has fancybox already included in it. Everything works fine, smooth and clean, the way it's supposed to.
Now there is something I'd like to do, and unfortunately I don't have the knowledge for it:
When clicking on the 1st thumbnail of my publicated post, a fancybox slideshow appears and displays all the thumbnails. Cool enough, but I'd like this slideshow to display more than just those thumbnails.. Something like 10 or 20 files maybe, hosted locally.
I believe there's a way to do this, I found this code fragment on another question ( Fancy box - how to show slideshow from a single thumbnail ) but just couldn't make it work, no matter how hard I tried (I can more or less "read" codes, but writing it is not yet something I can do!)
So yeah, to put things simply, I'd like my "post1" fancybox to display X pictures, other than the thumbnails. And also, be able to repeat this trick with X different posts, so I need to find a clean way to do it, not just some structure trick. I tried to include the above code in the html part of my post, but just didn't work.
Feel free to answer! And let me know if you need more info!
I believe this is the interesting part of my HTML's post:
<div id="product-slider">
<div id="product-slides">
<div class="item-slide">
<a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span>
</a>
</div> <!-- .item-slide -->
<div class="item-slide">
<a href="http://www.prepadem.fr/wp-content/uploads/2012/10/Angelique_thumb1.jpg" rel="gallery" class="fancybox">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_267x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span>
</a>
</div> <!-- .item-slide -->
</div> <!-- #product-slides -->
<div id="product-thumbs">
<a href="#" class="active" rel="1">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span>
</a>
<a href="#" class="last" rel="2">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/Angelique_thumb1-724863_69x69.jpg" alt="" width =69 height=69 /> <span class="overlay"></span>
</a>
</div> <!-- #product-thumbs -->
</div> <!-- #product-slider -->
After reading several questions, external links and more, this is how I figured out my issue, and how I believe it works: (Sorry if it sounds quite basic, but I'm just gonna explain it the way I would have liked to read it! Newbie language: ON)
Since fancybox is already activated by my WP theme, there is no need for me to call it in my HTML code on my post. When checking my source code on my post (with 1 thumbnail and no code added), I see this code generated:
<div id="product-slider">
<div id="product-slides">
<div class="item-slide">
<a href="http://www.prepadem.fr/wp-content/uploads/2012/10/cheetah-picture1.jpg" rel="gallery" class="fancybox">
<img src="http://www.prepadem.fr/wp-content/uploads/et_temp/cheetah-picture1-43518_298x226.jpg" alt="" width =298 height=226 /> <span class="overlay"></span>
</a>
</div> <!-- .item-slide -->
</div> <!-- #product-slides -->
Therefore my "rel" value for the slideshow is "gallery". Now, I just need to add as many files as I wish in my post for the slideshow to display them, with the following code:
<a class="fancybox" rel="gallery" href="image02.jpg"></a>
<a class="fancybox" rel="gallery" href="image03.jpg"></a>
<a class="fancybox" rel="gallery" href="image04.jpg"></a>
And that's it, I can add as many pictures as I wish, whilst none of them are displayed as thumbnails! Anyway, thanks to Toni and Janis for their help, if this answer doesn't help anyone else, at least I'm happy to have this working the way I wanted!
Related
I have a webpage on which a lot of images need to load. I want to show a div with a loading gif while the image is loading, but I want to fade out that div when the image is done loading. When I was searching the internet I found the ".load" function, but that's not working on the images. The ".on('load', function(){...})" doesn't work either.
This is what I tried, but doesn't work.
<a data-fancybox="gallery" href="image1.jpg">
<img src="thumbs/image1.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image2.jpg">
<img src="thumbs/image2.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image3.jpg">
<img src="thumbs/image3.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
This is actually working fine.
https://codepen.io/tmdesigned/pen/NWqqXwy
Probably what you are experience is conflict with the gallery library you are using. They often duplicate images in the HTML to achieve their effects. I'd suggests looking at the final output in your inspector and see if the .next() logic still holds.
But, to answer your question if you remove that gallery, as I did in the link above, you'll see the 'loading' image fade out (in the example, all 6 images--3 display images, 3 loading images--are the same, but you can still see the effect).
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
i am trying to create a responsive image that when to click on it another image opens and when you click on the new picture it goes away... disappears.
thanks !!
this is my code:
<div class="item">
<div id="img1"><"https://www.istockphoto.com/il/photos/lion-cub?excludenudity=true&sort=mostpopular&mediatype=photography&phrase=lion%20cub" /></div>
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick=diffImage(this) />
<img src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.display='none';"/>
</div>
The below code works in a similar approach to yours.
I have used the visibility CSS property instead of display and added the correct javascript into the onclick event of the first image
<div class="item">
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick="document.getElementById('other-image').style.visibility='visible'" />
<img id="other-image" src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.visibility='hidden';"/>
</div>
I would recommend looking in to javascript in more detail to be able to do this in a more reproducible way.
I want to target a specific slide with link. But the hyperlink and the slider are in different pages.
The idea is to make a separate navigation page.
Let's say the slider in slider.html and the page with the link is nav.html
<div id="slider1_container">
<div u="slides">
<div>
<img u="image" src="images/1.jpg" />
<img u="thumb" src="images/thumb-1.jpg" />
</div>
<div>
<img u="image" src="images/1.jpg" />
<img u="thumb" src="images/thumb-1.jpg" />
</div>
</div>
</div>
This is called templating.
For example I want my navigation bar to always be at the top with the same items on every webpage. I would have a separate html file for the navigation bar and a footer and require that in my pages!
I mentioned EJS because I thought you were using node however there are much simpler ways to use this if you are not using node. (Actually you can still use EJS but I'm not sure how)
Many libraries like requirejs do this.
Here's a list: https://developer.mozilla.org/en/docs/JavaScript_templates
I´m having a serious problem on my Joomla site.
Joomla 2.5 latest version.
On all pages there are no jQuery conflicts or errors in developers panel (Chrome)
But when I use the plugin collagePlus something very weird happens..
Here is the base HTML layout for collagePlus image gallery:
<section class="Collage effect-parent">
<div class="Image_Wrapper" data-caption="test....">
<a title="test" class="fancybox" rel="group" href="/images/demo/placeholder-large.jpg">
<img class="collageimgs" src="/images/demo/placeholder-large.jpg" alt="test">
</a>
</div>
<div class="Image_Wrapper" data-caption="test....">
<a title="test" class="fancybox" rel="group" href="/images/demo/placeholder-large.jpg">
<img class="collageimgs" src="/images/demo/placeholder-large.jpg" alt="test">
</a>
</div>
</section>
And the jQuery:
jQuery(window).load(function () {
jQuery('.Collage').collagePlus();
});
Whenever the page loads the entire body content of the page is appended into each img container inside the Wrapper divs.
This is very strange indeed.
Has anyone experienced something like this before?
http://2012.delineamultimedia.com/#home_portfolio
If you click on the Icon that jumps when you hover over BRIAN GUEHRING's gallery. You will activate the prettyPhoto pop-up gallery. For some reason it starts with the last image in the gallery. Is there a way to fix this so it starts with the first image in the gallery?
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
This is the script I'm using to start prettyPhoto, I'm scared another script might be screwing this up somehow.
Thank you in advance for your time! I really appreciate it!
yes the around all the images but the first one forces the first image to be 1/x, and subsequent images in the gallery with the div tags appear in the order listed in the code... if there is a better solution I would be happy to hear it ... here is my sample code:
<div class="mask">
<a class="icon-image"
href="../../images/Murals/Residential/GreekBath/GREEK_BATH_514X685.png"
rel="GreekBath[gallery]"
title="Flower Vase Detail">
<i class="icon-search"></i>
</a>
<div style="display:none;">
<a class="icon-image"
href="../../images/Murals/Residential/GreekBath/FLOWER_VASE.png"
rel="GreekBath[gallery]"
title="Toilette">
<i class="icon-search"></i>
</a>
</div>
<div style="display:none;">
<a class="icon-image"
href="../../images/Murals/Residential/GreekBath/TOILETTE.png"
rel="GreekBath[gallery]"
title="Greek Bathroom">
<i class="icon-search"></i>
</a>
</div>
</div>