Forum Replies Created
-
Posts
-
All sorted… I’ve managed a little hack to get it work like I want it to. So far it is the best solution I can find that won’t alter the plugin’s files. If anyone is interested, here is what I did…..
Remember to use child-theme and you will need to be able to add your own jquery to the theme. Please check the forum for this.
Anyways..
1. Create a div just under the opening <body> tag in the header.
<div id="close-image-modal" class="close-image-modal">×</div>
2. Style the div/button as you wish in your child themes stylesheet, but remember to add the fixed positioning. (This is mine)
.close-image-modal { display: none; /* hide initially. important */ position:fixed; top:50px; right:20px; height:50px; width:50px; text-align:center; line-height: 50px; font-size:30px; background-color: #fff; color:#000; z-index:2000; border-radius: 50%; transform: all 0.5s ease-out; } .close-image-modal:hover { background-color: #76787c; color:#fff; } /* hide the close button the magnific poopup creates */ button.mfp-close { display:none !important; opacity: 0 !important; visibility:hidden !important; }3. Now add this jquery to your custom .js file.
(function($) { $(document).ready(function() { $("#close-image-modal").hide(); // make sure that the close button is hidden on document load $(".avia_image").on("click", function() { // when image is clicked it needs to display the close button (if you ot using lightboxes everywhere, you will need play around with classes related. $("#close-image-modal").show(); }); $("#close-image-modal").on("click", function() { // when custom div/button is clicked, it will trigger the actual close button and hide itself again. $(".mfp-close").trigger("click"); $("#close-image-modal").hide(); }); }); })(jQuery);Make sure you clear all cache and all should be good to go. This is a quick solution for me, but if anyone has a more elegant way, please do post.
Cheers.Hi Yigit,
Basically the form will be used as a booking enquiry. The email will be collected by staff and then be dealt with.
I would like to possibly add a table into the email so the info a bit more tabular and spaced out, if possible, have have odd/even color for rows. I need to make the email a bit more readable at quicker rate.
Thanks,
JayYou rock Yigit. Thanks for the quick reply and I will defo bookmark this, but I found another solution which will definitely improve performance too.
The lightbox only calls the ‘large’ size if the original is bigger than that of the ‘large’ size dimensions, otherwise if smaller, no ‘large’ size created, no ‘large’ size called. Keeps performance better with smaller image size and less additional code.
Luckily I only have a few that need manual resizing.
Thanks again for fast support… as usual!!!
JayHi Ismael,
Thanks for checking it out for me. It seems all good now. Can’t believe I did not try clearing cache first.
Thanks again.
JayI think you can set the thumbnail sizes in Settings -> Media. Also make sure ‘crop’ is checked.
If that does not work, then get a plugin called ‘Simple Image Sizes’, That works like magic for my image sizes and regeneration.
Hope that helps!
Hi Elliot,
Thanks for the reply and sorry been a bit late on the reply.
I do have the button in place. I did NOT have the redirect setup. With this setup if I click ‘add to cart’ I don’t get a notice above the product saying ‘product added to cart – view cart’. Instead the ‘floating’ cart on the side opens up and populates with the new product.
I don’t want the floating cart on the side so I have used CSS to hide it, but now there is no way of knowing if a product has been added to cart without going to the cart to check.
If I don’t use the builder, then the notice comes up as it should, but if my product uses the builder the notices does show up.
Jay
Thanks Ismael. Worked perfectly.
Would like to add too if anyone else comes across this. Download ‘Regenerate Thumbnails’ plugin too. It saved me loads of time.
Thanks again.
Hi Simon
If it is the same issue I am having where I have a background image which has most of the imagery at the bottom and captions are centered. Firstly I re-positioned the background to bottom align in quick css. I did it using the function in the slider options but it did not work for some reason. I also changed the sizing to full height rather than full width ( I made images to suit this so you may not need to).
.avia-fullscreen-slider .avia-slideshow > ul > li { background-position: center bottom !important; background-size: auto 100% !important; }Then for mobile devices I had to tweak it a bit because the header is now visible rather than hidden until scrolled. So I added this too:
@media only screen and (max-width:640px) { .avia-fullscreen-slider { top:-100px;margin-bottom:-100px;} } @media only screen and (max-width:360px) { .avia-fullscreen-slider { top:-140px;margin-bottom:-140px; } }The first media query is for mobile landscape which I only bumped up a bit to suit.
The second I pushed a bit more as it is for the portrait version and needed it.
I also made sure the next section was pulled up to meet it because if not there would be a gap created by the ‘negative lift’.Well hope this helps as a guide.
Jay
ok! so I spent a little more time looking into my query above and within the same file (avia.js) on line 1551 it has this:
newTip.animate(animate, 200, function()I have added in a delay there and seems to work the way I want for now. I don’t know what else it may effect as the function is for ‘hide_tooltip’ so I can only assume for now it will be all tooltips, but anyway, here is my new line with a 1 second delay:
newTip.delay(1000).animate(animate, 200, function()Jay
