I would like to ask about the Button with Roll Over Javascript I have in my wordpress theme, the problem is the code is divided in two parts:
The 1st code is about Javascript
<script>
<!--
if(document.images)
{
var image_array = new Array();
// path to the directory with images
var path = '/img/';
// enumeration of the "active" images
image_array[0] = "<?php bloginfo('template_directory'); ?>/button1_red.png";
image_array[1] = "<?php bloginfo('template_directory'); ?>/button2_red.png";
image_array[2] = "<?php bloginfo('template_directory'); ?>/button3_red.png";
var preload_image = new Array ();
for(var i=0; i<image_array.length; i++)
{
preload_image[i]= new Image();
preload_image[i].src = image_array[i];
}
}
function rollover(name, filename)
{
var fullpath = '' + filename;
document.images[name].src = fullpath;
}
//-->
</script>
<!--ROLL OVER SCRIPT-->
and the 2nd is html.
<div id="buttons">
<a href="http://twitter.com/bendaggers" target="_blank" onmouseover=rollover('button2','<?php bloginfo('template_directory'); ?>/button2_red.png'); onmouseout=rollover('button2','<?php bloginfo('template_directory'); ?>/button2_blue.PNG')><img src="<?php bloginfo('template_directory'); ?>/button2_blue.PNG" name="button2" width="35" height="35" border="0" title="Follow us on Twitter!" alt="BenDaggers.com: Follow us on Twitter!"/></a>
<a href="http://feeds.feedburner.com/bendaggers" target="_blank" onmouseover=rollover('button3','<?php bloginfo('template_directory'); ?>/button3_red.png'); onmouseout=rollover('button3','<?php bloginfo('template_directory'); ?>/button3_blue.PNG')><img src="<?php bloginfo('template_directory'); ?>/button3_blue.PNG" name="button3" width="35" height="35" border="0" title="Subscribe to our RSS Feeds!" alt="BenDaggers.com: Subscribe to our RSS Feeds!" /></a>
</div>
Where should i put the javascript code since the Button should be in sidebar (sidebar.php)?
I tried putting the javascript in the index.php and the html code in sidebar.php but its not working.
Any help?
Put the HTML in sidebar.php and javascript in header.php (assuming your theme has a header.php file) inside the <head> tag.
Because your html part depends on the Javascript part, the Javascript part must go first in the page. The simplest way to ensure this without knowing much about the structure of Wordpress is simply include both snippets in the same place, say sidebar.php, one after the other.
Related
SO I try to preview an image from bbcode decoder the code work fine but issue is I need that image inside <a> href link so that people can click it and get the image source and also I put massage on that like: CLICK ON IMAGE FOR FULL SIZE,
So I put here a simple Jscript function and inside it I call a variable and put document.getElementById, after doing that then I put variable.innerHTML and put my image massage and <a href> value.
But when I run on my browser its just load like a endless loop. It just load over and over again.
Here is my full code: 1st code from php bbcode decoder and the 2nd code only html because I was not sure if my php code do that either way It not solving.
1st
<script>
function linkset(img) {
var fio=document.getElementById(img.name);
fio.innerHTML='<strong>Click on image for full size view.</strong><br />'+fio.innerHTML+'';
}
</script>
<?php
$img_count = 0;
function parseimage($matches)
{
global $img_count;
$img_count++;
return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></div>";
}
$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";
$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);
?>
<?php echo $result; ?>
2nd
<script>
function linkset(img) {
var fio=document.getElementById(img.name);
fio.innerHTML='<strong>Click on image for full size view.</strong><br />'+fio.innerHTML+'';
}
</script>
<?php
$ssq = "https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg";
?>
<div id="img" style="font-size:x-small; display:inline;"><img name="img" onload="linkset(this);" src="<?php echo $ssq; ?>" border="0" alt="" /></div>
Result came like that:
<div id="img1" style="font-size:x-small; display:inline;">
<strong>Click on image for full size view.</strong><br>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
<img name="img1" onload="linkset(this);" src="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" alt="" border="0"></a>
</div>
This thing loop over and over but why??????????
<strong>Click on image for full size view.</strong><br>
<a href="https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg" target="_blank">
<strong>Click on image for full size view.</strong><br></a>
Please Help........
OK,,,,,,,, There is 2 way I tested....
1st is in JS obviously
<script>
function linkset(img) {
var massnlink='<strong>Click on image for full size view.</strong><br /><a href="'+img.src+'" target="_blank">'+img.name;
var photo='<img name="img" src="'+img.src+'" border="0" alt="" /></a>';
img1.innerHTML = massnlink + photo;
}
</script>
you can replace you js code
here if all code:
<script>
function linkset(img) {
var massnlink='<strong>Click on image for full size view.</strong><br /><a href="'+img.src+'" target="_blank">'+img.name;
var photo='<img name="img" src="'+img.src+'" border="0" alt="" /></a>';
img1.innerHTML = massnlink + photo;
}
</script>
<?php
$img_count = 0;
function parseimage($matches)
{
global $img_count;
$img_count++;
return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></div>";
}
$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";
$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);
?>
<?php echo $result; ?>
And 2nd thing is that?????? why you need JS code??? you can use PHP all in all
Here is the code:
<?php
$img_count = 0;
function parseimage($matches)
{
global $img_count;
$img_count++;
return "\n<div id=\"img{$img_count}\" style=\"font-size:x-small; display:inline;\">\n<br>\n<a href='$matches[1]'><strong>Click on image for full size view.</strong><img name=\"img{$img_count}\" onload='linkset(this);' src='$matches[1]' border='0' alt='' /></a></div>";
}
$content = "[img]https://www.technocrazed.com/wp-content/uploads/2015/12/beautiful-wallpaper-download-14.jpg[/img]";
$result = preg_replace_callback('/\[img\]((http|ftp|https):\/\/([a-zA-Z0-9\/\-\+\?\&\.\=\_\~\#\'\%\;]*))\[\/img\]/i', 'parseimage', $content);
?>
<?php echo $result; ?>
I can not discuss about PHP code cause it is so easy to understand.... But if you want I can give you note in comment.
I have several different galleries of images that have image captions. I'm attempting to append a download link of the corresponding image to the end of each of the gallery captions. The download link needs to be based on the img src for each image.
I can get it to append the download link to the caption. However, it's also appending a download icon for each image contained in the gallery on every image caption. Instead of one download link per image.
HTML
<div>
<figure class="gallery-item">
<!-- BoGalleryImg -->
<div class="gallery-icon landscape">
<a href="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" data-rel="lightbox-gallery-1">
<img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2515.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-823">
</a>
</div>
<!-- EoGalleryImg -->
<!-- BoCaption -->
<figcaption class="wp-caption-text gallery-caption" id="gallery-1-823">
<a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2515">
CRKIS-2515
</a>
</figcaption>
<!-- EoCaption -->
</figure>
<br />
<figure class="gallery-item">
<!-- BoGalleryImg -->
<div class="gallery-icon landscape">
<img width="300" height="250" src="http://creative.dev.j2noc.com/thehub/wp-content/uploads/2017/10/crkis-2379b.jpg" class="attachment-full size-full" alt="" aria-describedby="gallery-1-817">
</div>
<!-- EoGalleryImg -->
<!-- BoCaption -->
<figcaption class="wp-caption-text gallery-caption" id="gallery-1-817">
<a target="_blank" href="https://jira.j2noc.com/jira/browse/CRKIS-2379B">
CRKIS-2379B
</a>
</figcaption>
<!-- EoCaption -->
</figure>
</div>
jQuery
$(document).ready(function() {
$('.attachment-full').each(function(index, element){
// create variable from img src
var imgSrc = $(element).attr('src');
console.log(imgSrc);
//Append Download Link to Caption
$('.gallery-caption').append('</span>');
});
});
I have been trying to figure this out for a couple days now and I'm so close I'm just not sure how to get it to append only one download icon for the corresponding image. Thank you in advance for any help that can be provided.
My CODEPEN DEMO
Your html is a bit hairy to parse. Here is some jQuery that reproduces your output with the desired icon count:
images = ['http://srsounds.com/j3/images/easyblog_articles/2943/han_solo.jpg', 'https://lumiere-a.akamaihd.net/v1/images/chewie-db_2c0efea2.jpeg?region=0%2C154%2C1592%2C796'];
labels = ['CRKIS-2515', 'CRKIS-2379B']
images.forEach(function(value, index) {
$('body').append("<img src=" + value + " width=350><br>" + labels[index] + " <i class='fa fa-download' aria-hidden='true'></i><br><br>");
$('body').css('color', 'steelblue');
})
If you want to use these icons bring in awesome fonts:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
There may be other requirements in terms of your gallery layout, but hopefully this will help you get started on a cleaner approach.
If you're having issues adding link attributes to your icons, or achieving additional layouts let me know.
******** EDIT ********
If you want/need to stick with your original approach, then change your jQuery to this:
$(document).ready(function() {
download_ids_hold = [];
imgSrc_hold = [];
$('.attachment-full').each(function(index, element){
// create variable from img src
var imgSrc = $(element).attr('src');
imgSrc_hold.push(imgSrc)
console.log(imgSrc);
//Append Download Link to Caption
$('.gallery-caption').each(function(ind_2, elem_2) {
add_id = 'a_' + Math.floor((Math.random() * 100000) + 1);
download_ids_hold.push(add_id)
if(index == 0) {
$(this).append('<a id=' + add_id + ' download><i class="fa fa-download" aria-hidden="true"></i></span></a>');
}
})
});
for(id=0;id<download_ids_hold.length;id++) { $('#' + download_ids_hold[id]).attr('href', imgSrc_hold[id]) }
});
We track the image sources and download ids, and use them appropriately at the end.
When using below code share on Facebook but https://www.facebook.com/dialog/return/close#_=_ does nothing return.
<?php
$social_link = "https://www.google.co.in";
$sharelink = "http://www.facebook.com/sharer.php?u=".urlencode($social_link)."&t=&s=100";
$strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
echo "<script>var win = window.open('$sharelink', '_self', '$strWindowFeatures');</script>";
?>
You can create share button using the given tag and add given script in your script section
<a onclick="shareinsocialmedia('https://www.facebook.com/sharer/sharer.php?u=<?php echo $ShareUrl;?>&title=<?php echo $Title;?>')" href=""> <img src="images/facebook.gif" title="share in facebook"> </a>
<script type="text/javascript" async >
function shareinsocialmedia(url){
window.open(url,'sharein','toolbar=0,status=0,width=648,height=395');
return true;
}
</script>
Hei
I Have this code, to take the pictures from a folder and show them on the page. But when I click on the image, it will open on the same page. So I have to click one page back...
But i wanna that when I cklick on a n image, that the image open with a popup and I can click there "back or next" to see the other images.
What I Have to change in the code?
Thanks a lot
<div id="galima">
<?php
$folder_path = 'gallery/images_nature/'; //image's folder path
$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
$folder = opendir($folder_path);
if($num_files > 0)
{
while(false !== ($file = readdir($folder)))
{
$file_path = $folder_path.$file;
$extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
if($extension =='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp')
{
?>
<img src="<?php echo $file_path; ?>" height="250">
<?php
}
}
}
else
{
echo "the folder was empty !";
}
closedir($folder);
?>
What you need is named Lightbox but
here i am giving a simple example of creating new window in js. May be this will give you a better understanding to implement it in your code.
copy this code into any html file and see the output. i don't know why i can't
add it in code snippet -_-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="">
<img src="http://images5.fanpop.com/image/photos/31300000/beautiful-heart-pic-beautiful-pictures-31395948-333-500.jpg" width="50" height="50" alt="Click to enlarge"
onclick="enlarge(this)" />
</a>
<a href="">
<img src="https://s-media-cache-ak0.pinimg.com/736x/0e/38/60/0e38604bb8c49acf8eb409dc5f9caa15.jpg" width="50" height="50" alt="Click to enlarge" onclick="enlarge(this)" />
</a>
<script type="text/javascript">
var windowFeatures = "'menubar=no,status=no,scrollbars=no,toolbar=no,resizable=no,width=500,height=350,left=400,top=100'";
function enlarge(x) {
window.open(
x.src,
'largeimage',
windowFeatures
);
}
</script>
</body>
</html>
you can open the image in a new page using target _blank like this
...
I'm in the process of finding a mobile alternative to Colorbox. Swipebox seemed like a great alternative, but unlike colorbox it doesn't seem to allow every individual image open but combined all of them into a gallery. The conventional way of adding swipebox is as so:
$('.class').swipebox();
which adds everything with that class into a swipebox gallery. Is there a way to instead open each item of a certain class individually?
It looks like you just need to separate your images into "galleries", which may seem counter intuitive as you don't want galleries...
Check the advanced docs for gallery:
You can add a rel attribute to your links to separate your galleries.
Like I said it's counter intuitive, but the feature that's designed to group images together into galleries can be used to separate them. Basically you're setting up galleries of one by adding a different rel attribute to each one.
Working Example on jsFiddle
$('.swipebox').swipebox();
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption" rel="gallery-1">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption" rel="gallery-2">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
If adding a rel attribute to every swipebox looks tedious, you can add the rel attribute with a little script:
$('.swipebox').swipebox();
var X = 0; // set a global var
$('.swipebox').each(function() { //for each swipebox
X += 1; //increment the global var by 1
$(this).attr('rel', 'gallery-' + X); // set the rel attribute to gallery- plus the value of X
});
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
My simple solution :)
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox();
$( '.swipebox2' ).swipebox();
} )( jQuery );
</script>
<img src="small/1-1.jpg" />
<img src="small/1-2.jpg" />
<img src="small/2-1.jpg" />
<img src="small/2-2.jpg" />