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>
In Magento "best-sellers" block, I have fixed images that I want to replace with mouseover images.
Here is the initial code in best-sellers.phtml :
<div>
<a href="<?php echo $_product->getProductUrl($_product); ?>">
<img src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>" width=« 220" height=« 276" alt="<?php echo $_product->getName(); ?>" />
</a>
</div>
I changed the inital code to this :
<img onmouseover="this.src='http://www.mywebsite/media/wysiwyg/chaise-design-italie-hip_trans-Verso_1.png';
" onmouseout="this.src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>"
" src="<?php echo $_imgHelper->init($_product, 'thumbnail')->resize(220, 276); ?>"
width=« 220" height=« 276" alt="<?php echo $_product->getName(); ?>" />
The result is : the source image appears, the mouseover image appears BUT nothing happens on mouseout, it keeps showing the mouseover image.
Any idea what I did wrong ?
Many thanks for your help !
please refer to this may be it can help you http://magentocodes.blogspot.in/2013/09/change-product-image-on-hover-in.html
So what I want to do is have a wordpress content area that will display the next post when a link is clicked. I have this as my post query
<?php
$args = array();
$lastposts = get_posts( $args );
foreach ( $lastposts as $post )
{
setup_postdata( $post );
$posts[] += $post->ID;
}
$current = array_search(get_the_ID(), $posts);
$prevID = $posts[$current-1];
$nextID = $posts[$current+1];
?>
Then I have this as the pagination links
<?php if (!empty($prevID)) { ?>
<li class="previous">
<a class="panel" href="<?php echo get_permalink($prevID); ?>" title="<?php echo get_the_title($prevID); ?>">← Older</a>
</li>
<?php }
if (!empty($nextID)) { ?>
<li class="next">
<a class="panel" href="<?php echo get_permalink($nextID); ?>" title="<?php echo get_the_title($nextID); ?>">Newer →</a>
</li>
<?php } ?>
I can't figure out how to tell the guts of a post (the_permalink, the_content) to display the next post. My goal is to add some sort of transition but that is not as important as having the next post show up. Any ideas, is it even possible?
I have always hated Carousels and sliders but this particular slider has always been my go to as it's super easy and very customizable.
jcarousellite is the name of it and it majestic. Heres is the website http://www.gmarwaha.com/jquery/jcarousellite/
If you have a basic understanding of css you will love this but heres an example mockup.
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js"></script>
</head>
<body>
<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
<ul>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$(".anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
</script>
</body>
In this I would host at least the jcarousellite.js file on your server as theres a bunch of settings in there to play around with like showing 1 image at a time, but I hope this helps you! Don't forget you can add id's to the buttons to make them look nice and wrap everything in css to make it look sexy.
replace the li's in the middle with this
<?php
$thumbnails = get_posts('numberposts=5');
foreach ($thumbnails as $thumbnail) {
if ( has_post_thumbnail($thumbnail->ID)) {
echo '<li><a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '">';
echo get_the_post_thumbnail($thumbnail->ID, 'medium');
echo '</a></li>';
}
}
?>
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';