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'm creating a website for a client, but I'm primarily a front-end developer. I had to create a while loop (which works just fine) to build a gallery. The client wants a before/after display on the gallery. I elected to use the TwentyTwo jQuery plugin. However, I am having an issue. It is only displaying the first container, which displays just fine.
The necessary jQuery, inline , and css files are displayed on that page linked above. I am using bootstrap as a framework. Here is my code:
$(window).load(function() {
$("#container1").twentytwenty();
});
<div class="row">
<div class="col-lg-12">
<h2><span class="color">Our Gallery</span> </h2>
<?php
//Selects all images
$sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery ORDER BY postDate DESC") or die($GLOBALS['gmysqli']->error);
while ($row = $sql->fetch_assoc()) {
$image = $row["image"];
?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container1" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php } ?>
</div>
</div>
The problem here is the duplicate ID you generating in the php loop. This results in invalid html and can cause problems when using it as a selector.
You can switch to using a class selector:
$(document).ready(function(){
$(".twentytwenty-container").twentytwenty();
});
I updated your ready handler to the recommend structure. Or for the shorthand:
$(function() {
$(".twentytwenty-container").twentytwenty();
});
When using the class selector you can get rid of the ID in the HTML element
If you want to stick to the ID you can add a iteration variable to your loop and use the attribute selector:
$(function() {
$( "div[id^='container-']" ).twentytwenty();
});
<?php
$i = 0;
while($row = $sql->fetch_assoc()) {
$image = $row["image"]; ?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container-<?php echo $i; ?>" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php
$i++;
} ?>
try without order by statement.
Example:
<div class="row">
<div class="col-lg-12">
<h2><span class="color">Our Gallery</span> </h2>
<?php
//Selects all images
$sql = $GLOBALS['gmysqli']->query("SELECT image FROM gallery") or die($GLOBALS['gmysqli']->error);
while($row = $sql->fetch_assoc())
{ $image = $row["image"]; ?>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<div id="container1" class="twentytwenty-container">
<img src="<?php echo $beforeimage; ?>">
<img src="<?php echo $afterimage; ?>">
</div>
</div>
<?php } ?>
</div>
</div>
If you could share how you database are filled out could more easy to help you.
And the project link.
I hope helped you out anyway.
I have researched this and cannot find an answer. The solutions I have found have not resulted in success.
I am building a WordPress Template and I have a section that contains dynamic tabs. When the user selects a particular tab, the data below it changes accordingly.
However, I cannot get it to scroll down on focus like a normal in-page anchor would do. My relevant code is:
Link:
<span><?php the_sub_field('work_tab_title');?></span>`
Anchor:
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
My current functionality is working in terms of the tabs changing except for the scroll/focus of the anchor. This would be easier if I could give you the URL but I am not sure if that is against etiquette here, let me know please.
Thank you
It has come to the point where a larger section of code is needed for context and better understanding:
<div class="container">
<ul class="tab-strips">
<?php $i=0; $j=1; while(has_sub_field('work_slider')):?>
<?php
$string=get_sub_field('work_tab_title');?>
<li data-bottom-top="top:-30px; opacity:0;" data-center="top:0px; opacity:1;"><a href="#<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content"><span>
<?php the_sub_field('work_tab_title');?>
</span></a></li>
<?php $i++; $j++; endwhile;?>
</ul>
</div>
<?php $i=1; while(has_sub_field('work_slider')): ?>
<?php $string = get_sub_field('work_tab_title'); ?>
<?php $slider_title = get_sub_field('slider_title'); ?>
<div id="<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$i;?>-content" class="<?php if($i==1){ echo '';}?> tab-content">
<?php ?>
<script type="text/javascript">
document.getElementById('<?php echo strtolower(substr($string, 0, strpos( $string, ' ') )).$j;?>-content').scrollIntoView(true);
</script>
<?php if(get_sub_field('inner_slider')):?>
<div class="container">
<div class="row" style="margin-left:9.6%;">
<h3>
<?php echo $slider_title; ?>
</h3>
</div>
</div>
<div class="slider">
<div class="container">
<div class="row">
<ul class="clearfix work-slider-controls" id="work_slider_controls<?php echo $i;?>">
<?php $j=0; while(has_sub_field('inner_slider')):?>
<li><a class="work-slider-tab" href="#" data-work-index="<?php echo $i-1;?>" data-slider-index="<?php echo $j;?>" rel="<?php echo $j;?>">
<?php the_sub_field('work_inner_title');?>
</a></li>
<?php $j++; endwhile;?>
</ul>
</div>
</div>
</div><!-- slider -->
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
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';