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>
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 make a responsive sticky navigation bar which will shorten when the screen gets too small (for mobile). The navigation bar works fine without the hamburger bars on my laptop, but i am struggling to implement the following code on W3C with my code.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
the following is a link to jsfiddle with the HTML, CSS and Javascript code I am using.
HTML
https://jsfiddle.net/cpeotvsf/25/
below is my code
<body>
<div class="top-container">
<h1>testing header</h1>
<h3>Scroll down to see learn more.</h3>
</div>
<div class="header" id="myHeader">
<div class="navbar" id="Mynavbar">
Home
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Red or Black Tarmac Drives and Paths
Fencing and Gates
Shingle and Coloured Gravels
Drainage Work
Patios and Crazy Paving
Block Paved Driveways and Paths
Turfing and Artificial Grass
Brick and Purbeck Stone Walls
Decking and Rockeries
</div>
</div>
Gallary
Before and After
Testimonials
Contact Us
<a href="javascript:void(0);" class="icon" onclick="myFunctionn()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
The CSS and Javascript I am using are in the jsfiddle link above
Any help on this would be greatly appreciated
Your js is fine but jsFiddle keeps the script's load-type on load rather than at the bottom of the page so the onClick can't find the following function:
function myFunctionn() {
// place this script below your body content.
}
To make the above function run properly in jsFiddle, just click JavaScript + No-Library (pure JS) ▼ and change the load type to bottom of body then re-run the script.
jsFiddle with load type updated: https://jsfiddle.net/cpeotvsf/35/
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?
I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>
remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.
Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.
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!