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 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>
Clicking each thumbnail on the side of the product page will switch the big_image to show that image as normal. Works fine on anything other than Internet Explorer 9 or lower. Don't see any immediate reason why though. I am testing by using the Dev tools of internet explorer to emulate v9 and below as I don't have them installed. Some people have previously said that they have no issue though but I and second & third computer with IE definitely has too.
Live URL: http://bit.ly/1bEfjYf
<?php if ($thumb || $images) { ?>
<div class="left">
<div class="image-additional">
<img class="side_thumb" src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" />
<?php foreach ($images as $image) { ?>
<img class="side_thumb" src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />
<?php } ?>
</div>
</div>
<div id="big_image">
<img width="320" height="320" name="main" src="<?php echo $popup; ?>" alt="">
</div>
<?php } ?>
JavaScript
$('.side_thumb').click(function(e){
e.preventDefault();
console.log($(e.currentTarget).parent('a').attr('href'));
$("#big_image").html($('<img width="320" height="320">').attr("src", $(e.currentTarget).parent('a').attr('href')));
//$("#big_image").prop('src',$(e.currentTarget).attr('href'));
})
In some versions of IE, the console object isn't present until Developer Tools are opened, which can often cause Heisenbugs where things don't work, then you open Dev Tools to see why and they start working.
Testing your site on IE8, this seems to be the case, and I do get a "console is undefined" error in the lower left corner, so try removing your call to console.log.
Just use this to target the image in the handler
$('.side_thumb').click(function(e){
e.preventDefault();
console.log($(this).parent('a').attr('href'));
$("#big_image").html('<img width="320" height="320" src="'+$(this).parent('a').attr('href')+'">');
})
I've got this little project where I want to swap an image for another, and display the new image in a lightbox.
The code below works as follows; when I click one of the small images, the image src of the large image is replaced with the src of the small image. However, when I click the large image, it still opens the default large image in my lightbox.
Is there any way I can make the hyperlink href get swapped the same way the image src is swapped? They need to get the same value.
The javascript:
<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three'];
for(var i=0; i<option.length; i++) {
obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none";
}
}
}
function switchImg(i){
document.images["main-image"].src = i;
}
</script>
The HTML/PHP:
<?php
$image = 'main-image.jpg';
$small_1 = 'small-image-1.jpg';
$small_2 = 'small-image-2.jpg';
?>
<div id="holder">
<div class="large">
<a href="<?php echo $image; ?>" rel="lightbox">
<img id="main-image" src="<?php echo $image; ?>" />
</a>
<a class="original" onclick="switchImg('<?php echo $image; ?>')">Back to original image</a>
</div>
<div class="small">
<a onclick="switchImg('<?php echo $small_1; ?>')">
<img src="<?php echo $small_1; ?>" />
</a>
<a onclick="switchImg('<?php echo $small_2; ?>')">
<img src="<?php echo $small_2; ?>" />
</a>
</div>
</div>
to change the href:
document.getElementById('YOUR_ID').href = 'abraCaDabraDotCom';
I have a main image which is loaded each time with a different image if you rollover the thumbnail. There are 3 thumbnails.
There is also a lightbox effect and here is where my issue happens. Every time I click on the main image, no matter which of the thumbs has been loaded to the main image, image 1 is the one shown in the lightbox.
I clearly see where the issue is, but I am just wondering how I could make it so the image loaded in the mainImage container is the one shown in the lightbox.
Here is my code, maybe it explains better.
Thanks!
<div id="thumbs">
<img class="thumbSelected" src="images/<?php echo $row[thumb1]; ?>.jpg" /><br />
<img src="images/<?php echo $row[thumb2]; ?>.jpg" /><br />
<img src="images/<?php echo $row[thumb3]; ?>.jpg" />
</div>
<div class="mainImage">
<a href="images/<?php echo $row[image1]; ?>.jpg" rel="lightbox" title="<?php echo $row[name]; ?>">
<img class="mainImage" src="images/<?php echo $row[image1]; ?>.jpg" />
</a>
</div>
<script> ////large: ITEM1_01_large small: ITEM1_01_thumb
//
$('#thumbs').delegate('img', {
mouseover: function(){
$('.mainImage').attr('src',$(this).attr('src').replace('thumb','image'));
var $this = $(this),
index = $this.index();
$("#thumbs img").removeClass('thumbSelected');
$this.addClass('thumbSelected');
$("#big-image img").eq(index).show().siblings().hide();
}});
</script>
I can't really see what you are doing. However, if jQuery finds the first element and stop if you are using id selector. If you want to select multiple elements, you need to use class. That's what class is for.