I use Wordpress as a CMS for my website. I'm Using the Sugarland Theme by Thomas Rodus (Which uses WP-Bakery as a page builder), unfortunately my support has run out and I JUST realized that right click-save as/downloading images from my website is disabled/inaccessible. This isn't great as it means any potential clients, agencies, etc, can't quickly save my images and store them for later viewing.
My knowledge is limited but I've managed to do some customizing myself throughout the years of using WP and hosting my website and whatnot. I can usually figure out what's wrong and fix it, but I can't find which element is causing the issue, if it's the PHP files (content-portfolio-ajax , content-portfolio-nav) for the AJAX overlay, or the Jquery files (jquery.fancybox.pack) as I can't see anything obvious suggesting something is disabled.
------ Content-portfolio-ajax:---------
<?php
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
?>
<div id="project-title" class="centered">
<div class="parent">
<div class="child">
<?php
the_title('<h3>', '</h3>');
the_excerpt();
?>
<?php esc_html_e('Details', 'sugarland'); ?>
</div>
</div>
</div>
<div id="project-slider">
<figure class="images">
<?php the_post_thumbnail('full'); ?>
</figure>
<?php if(!empty($next_post)) : ?>
<a class="ajax-prev" href="<?php echo esc_url(get_permalink($next_post->ID)); ?>"></a>
<?php endif; ?>
<?php if(!empty($prev_post)) : ?>
<a class="ajax-next" href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>"></a>
<?php endif; ?>
</div>
-------- or content-portfolio-nav: ---------
<?php
global $post;
$url[] = '';
$url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$prev_post = get_adjacent_post(false, '', true);
$next_post = get_adjacent_post(false, '', false);
$displays = get_option('ebor_cpt_display_options');
$slug = ( $displays['portfolio_slug'] ) ? $displays['portfolio_slug'] : $slug = 'portfolio';
?>
<div class="padding-0 clearfix" data-ref="mixitup-container">
<?php if(!empty($prev_post)) : ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio lifestyle" data-ref="mixitup-target">
<a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>">
<figure class="images">
<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id( $prev_post->ID ), 'full'); ?>
<img src="<?php echo esc_url($src[0]); ?>" alt="<span><?php echo ebor_the_terms('portfolio_category', ', ', 'name'); ?></span><?php echo get_the_title($prev_post->ID); ?>" class="slip" />
</figure>
</a>
</div>
<?php endif; ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio blank" data-ref="mixitup-target">
<a href="<?php echo esc_url( home_url('/') . $slug ); ?>">
<figure class="images">
<img src="<?php echo EBOR_THEME_DIRECTORY; ?>assets/images/blank.jpg" alt="Blank Image" />
</figure>
<div class="info-box-content">
<div class="parent">
<div class="child">
<h5><i class="fa fa-th"></i> <?php esc_html_e('Overview', 'sugarland'); ?></h5>
</div>
</div>
</div>
</a>
</div>
<?php if(!empty($next_post)) : ?>
<div class="mix item clearfix col-sm-4 col-xs-12 home portfolio travel" data-ref="mixitup-target">
<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>">
<figure class="images">
<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id( $next_post->ID ), 'full'); ?>
<img src="<?php echo esc_url($src[0]); ?>" alt="<span><?php echo ebor_the_terms('portfolio_category', ', ', 'name'); ?></span><?php echo get_the_title($next_post->ID); ?>" class="slip" />
</figure>
</a>
</div>
<?php endif; ?>
</div>
----Or this JS (jquery.fancybox.pack) (I didn't paste the entire thing because it's large and I'm not sure which bit would be relevant to the problem. ------
(function(C,z,f,r){var q=f(C),n=f(z),b=f.fancybox=function(){b.open.apply(this,arguments)},H=navigator.userAgent.match(/msie/i),w=null,s=z.createTouch!==r,t=function(a){return a&&a.hasOwnProperty&&a instanceof f},p=function(a){return a&&"string"===f.type(a)},F=function(a){return p(a)&&0<a.indexOf("%")},l=function(a,d){var e=parseInt(a,10)||0;d&&F(a)&&(e*=b.getViewport()[d]/100);return Math.ceil(e)},x=function(a,b){return l(a,b)+"px"};f.extend(b,{version:"2.1.4",defaults:{padding:0,margin:10,width:800,
height:600,minWidth:100,minHeight:100,maxWidth:9999,maxHeight:9999,autoSize:!0,autoHeight:!1,autoWidth:!1,autoResize:!0,autoCenter:!s,fitToView:!0,aspectRatio:!1,topRatio:0.5,leftRatio:0.5,scrolling:"auto",wrapCSS:"",arrows:!0,closeBtn:!0,closeClick:!1,nextClick:!1,mouseWheel:!0,autoPlay:!1,playSpeed:3E3,preload:3,modal:!1,loop:!0,ajax:{dataType:"html",headers:{"X-fancyBox":!0}},iframe:{scrolling:"auto",preload:!0},swf:{wmode:"transparent",allowfullscreen:"true",allowscriptaccess:"always"},keys:{next:{13:"left",
34:"up",39:"left",40:"up"},prev:{8:"right",33:"down",37:"right",38:"down"},close:[27],play:[32],toggle:[70]},direction:{next:"left",prev:"right"},scrollOutside:!0,index:0,type:null,href:null,content:null,title:null,tpl:{wrap:'<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',image:'<img class="fancybox-image" src="{href}" alt="" />',iframe:'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen'+
Sorry, I know this is probably a long shot. And I'm sorry about my obvious cluelessness around this, but I've spent the last few weeks trying to figure out what the problem is. Thank you so much to anyone who looks over this.
There are a number of ways to disable right click, but a common way is
document.addEventListener('contextmenu', event => event.preventDefault());
If you're going to disable the disabling, you'll need to find the reference to contextmenu or onContextMenu or something similar.
The snippets you included didn't have this in it, so it's probably somewhere else in the theme or plugin folder.
Without more code, I can't help much, but good luck trying to find it yourself! Let us know if there's more info you can give.
i am showing travel packages from database in loop on a page, where more than 40-50 packages getting shown.
i want only four packages to be shown at start and when i click on show more button it should show 4 more packages and so on.
<?php foreach($blogrand as $blogsrand){ ?>
<div class="grid-item-wrap large-4 medium-4 small-12 columns group-0">
<div class="shadow grid-item rel bdg1">
<div class="img"><a href="<?=base_url();?>tours/<?php echo $blogsrand['tourslug'];?>"><img alt="<?php echo $blogsrand['tourname'];?>" class="mmtTI hide" src="<?php echo $blogsrand['banner'];?>" /><img alt="<?php echo $blogsrand['tourname'];?>" class="mmtTIM" src="<?php echo $blogsrand['banner'];?>" />
</a></div>
<div class="content eq-7" style="height:110px">
<h3><?php echo $blogsrand['tourname'];?></h3>
<div style="background-color: transparent;width:100%;display: inline-block;padding-top: 1px;padding-bottom: 1px;font-size: 12px; color:#ff9016;" class="bld lsp upc drk" data-popup="range-reveal-1">Trip Type : <?php echo $blogsrand['tourtype'];?><br><span style="text-transform:capitalize; color:black;">Trip Duration : <?php echo $blogsrand['hotels'];?></span><br><span style="text-transform:capitalize; color:#959595;">Places Covered : <?php echo $blogsrand['tourplaces'];?></span></div>
</div>
</div>
</div>
<?php } ?>
<div class="cnt"><a class="bld f19 wht wrBCol3 colLinkPad viewMoreTrigger5">Show More</a></div>
how to achieve this by CSS or Javascript.
Here's a snippet to get you started. Try it out, play around with it, try to adopt it to your use case, and when you encounter specific issues you're unable to debug and figure out yourself, then feel free to ask on stackoverflow. Be sure to include minimum reproducing examples when applicable.
let data = [...Array(50)].map((_, i) => ({i, r: Math.random()}));
document.querySelector('#more-button').addEventListener('click', () => {
let showing = document.querySelector('#container').childElementCount;
for (let i = 0; i < 4; i++) {
let row = document.createElement('div');
let d = data[showing + i];
row.textContent = `${d.i}, ${d.r}`;
document.querySelector('#container').appendChild(row);
}
});
<div id="container"></div>
<button id="more-button">more</button>
I am using bxslider to call images for individual records
The slider is working fine and I have it set to auto page through the images related to the specific record, but I am having a problem linking the thumbnails to the slider.
At the present time if I click on a thumbnail below the slider it is loading the image in a lightbox (if that is the correct terminology) instead of moving the slider along to the relevant image.
Below is my code that I am using and any suggestions would be appreciated
thank you - Mel
<div> <script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: 'false',
auto: 'true',
autoControls: 'true',
});
});
</script>
<ul class="bxslider list-unstyled"><?php foreach($images as $key=>$image) { ?>
<li class="img-responsive list-unstyled"><img src="<?php echo $image ['image']; ?>" /></li><?php } ?>
</ul></div>
<div id="bx-pager">
<div class="row">
<?php foreach($images as $key=>$image) { ?>
<div class="col-md-3 col-sm-4 col-xs-6 bx-pager">
<a class="image_group thumbnail" rel="image_group" href="<?php echo $image['image']; ?>" title="<?php echo $this->escape($image['title']); ?><?php if($image['description']) { ?> - <?php } ?><?php echo $this->escape($image['description']); ?>">
<img src="<?php echo $image['thumb']; ?>" alt="<?php echo $this->escape($image['title']); ?><?php if($image['description']) { ?> - <?php } ?><?php echo $this->escape($image['description']); ?>">
</a>
</div>
<?php } ?>
</div>
</div>
I'd like to check the id of the parent element, to display either the big or the small version of an image.
<div id="content">
<?php include 'test.php';?>
</div>
<div id="sidebar">
<?php include 'test.php';?>
</div>
In test.php, an if-statement checks if the parent has the demanded id.
Is there a way to get the parentnode-id without JavaScript?
No. PHP do nothing with the rendered page.
But why don't you create a function and call that with parameters?
include 'test.php'
?>
<div id="content">
<?php showImage(); ?>
</div>
<div id="sidebar">
<?php showImage(true); ?>
</div>
<?php
And in test.php
function showImage($smallImage = false) {
if (!$smallImage) {
echo '<img src="path/to/bigimage" alt="" />';
} else {
echo '<img src="path/to/smallimage" alt="" />';
}
}
Or there are an alternative way. Set a variable before you include your file, and you can set an if condition in your test.php when you want to show the image.
<div id="content">
<?php
$parentNode = 'content';
include 'test.php'
?>
</div>
<div id="sidebar">
<?php
$parentNode = 'sidebar';
include 'test.php'
?>
</div>
I am building a webpage where i am displaying about 10 photos in a slider.The photos are being fetched from a folder where it is uploaded,the code is given below.
<div class="main">
<div class="main_slider">
<div id="bg"> <img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" /> </div>
<div id="preloader"> <img src="images/ajax-loader_dark.gif" width="32" height="32" /> </div>
<!--<div id="img_title"></div>-->
<div id="toolbar"> <img src="images/toolbar_fs_icon.png" width="50" height="50" /> </div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php
include("connect.php");
$s=mysql_query("Select image from gallery where active_home=1 ") or die(mysql_error());
while($row=mysql_fetch_array($s))
{
$img=$row["image"];
//$image= "<img src=\"images/gallery/$img\" width=200 height=120>";
echo "<div class=content_img>";
echo "<div> <img src=\"images/gallery/$img\" height=138 width=238 alt=image class=thumb style=opacity:0.6;/> </div>";
echo " </div> ";
}
?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
The page is loading very slow in the server and browser crashing frequently.I have tried reducing the image size but nothing improves.
You can clean up your code like this:
// Main PHP part
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
// Main HTML part
?>
<div class="main">
<div class="main_slider">
<div id="bg">
<img src="images/c.jpg" width="1680" height="1050" alt="Test Image 1" title="" id="bgimg" />
</div>
<div id="preloader">
<img src="images/ajax-loader_dark.gif" width="32" height="32" />
</div>
<div id="toolbar">
<a href="#" title="Maximize" onClick="ImageViewMode('full');return false">
<img src="images/toolbar_fs_icon.png" width="50" height="50" /></a>
</div>
<div id="thumbnails_wrapper">
<div id="outer_container">
<div class="thumbScroller">
<div class="container">
<?php foreach ($images as $image) { ?>
<div class="content_img">
<div>
<a href="images/gallery/<?= $image; ?>">
<img src="images/gallery/<?= $image; ?>" height="138" width="238" alt="image" class="thumb" style="opacity:0.6;" />
</a>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
In that way, you have properly separated the HTML from the PHP. Now, all bugs should be more obvious and easier. You can add checks at the end of the PHP, you can forget about needing to escape the " with \" manually and your code is more focused and clean. Note that I've changed the code from mysql_ to PDO, so now it shouldn't really work (you need to create the $DB = new PDO(), normally in connect.php.
Even more, now you can test where the problem is by doing something like this:
$start = microtime(true);
include("connect.php");
$STH = $DB->query("SELECT image FROM gallery WHERE active_home=1");
$rows = $STH->fetchAll(PDO::FETCH_ASSOC);
$images = array();
foreach ($rows as $row) {
$images[] = $row['image'];
}
echo "Load time: " . (microtime(true) - $start) . "<br>";
In that way you know if it's your PHP or your HTML (check it with the browser's network profiler) what takes ages to load.
Try
Jpeg images instead of png
Save images with option "Save image for web"
You can use RIOT image optimisation tool
For reducing load time you can use CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often used for mouse-over states on buttons. E.g. with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over the image.
Do not use an Image at all. we can generate rounded rectangles, gradients, drop shadows, and transparent images using CSS
I think you should try to store images on disk and check if images load faster from hard drive .