I have seen some good scripts come by but not one i really could use.
My website is php sql driven and i like to change the links on the site with a image
from thumbshots.
The code i have so far is:
<?php echo openld_htmlspecialchars($link['title']); ?>
And as far as the script i have go like:
$('.post-body a').each(
function(){
$('<img />').attr('src','http://open.thumbshots.org/image.aspx?url='+encodeURIComponent(this.href)).replaceAll($(this));
});
I used the .replaceAll function but it shows only the pictures and are not click links.
I used .insertAfter but then the text link keeps showing.
It's probably not a huge change in the script code but i don't seem to find the answer on my question.
Thanks
I hope that what you are looking for ...
$('.post-body a').each(function(){
$(this).html("<img src='http://open.thumbshots.org/image.aspx?url="+encodeURIComponent(this.href)">");
});
Related
Is there any responsive jQuery plugin for displaying image slider and also showing thumbnails on bullets hover.
Tried LayerSlider plugin but the whole image was not visible.
Please help
Thanks in advance
There are a couple that come to mind wowslider or sliderrevolution.I think both should fit this need for you.
see this url you will get some idea http://codepen.io/zuraizm/pen/vGDHl its working good enter code here http://codepen.io/zuraizm/pen/vGDHl
There doesnt seem to be much cloice if your against LayerSlider
you could implement one yourself with something like this with the hover function instead ?
var mainImage = $("#mainImage");
$(".img-container img").hover(function(){
var src = $(this).attr("src");
$("#mainImage").attr("src",src);
});
mainImage.on("click",function(){
$(this).css("transform","scale(2)");
});
I have done the easy bit and actually added a "Download Image" anchor into the swipebox.js html and formatted it with the CSS to make it play properly with the caption/title.
My specific problem lies in trying to add in a new data attribute containing the naked directory url to the image file and using that info to append it to the href of my created anchor so that I can link to the original size for each image.
Most other JQuery lightboxes can do this, but I stuck myself with using Swipebox because it was easier at the time and now it is returning to bite me in the ass.
You can check out what I have done so far # http://kazenracing.com/?page=1964_Griffith
It is not as pretty as some of my other sites, but people will want the larger images.
You can see I am using timthumb for both the thumbnails and the viewed image, so things will run a bit faster on slower connections and so I do not have to create three separate images "by hand". If I did not care about load times and if my customer did not care about load times I would just have the full image be the viewed one and just use timthumb for the thumbnails alone.
You can also see a data-href attribute ready to go on everything except the videos, which I have already accounted for.
EDIT:
What I tried to do before was add in a function inside the swipebox JS called "setDownload" and tried many ways to pull the data-href into the href of the Download anchor.
The last one I tried that worked but only for the first image was:
setDownload : function () {
$('a[data-href]').each(function() {
$('#swipebox-download').attr('href', $('.swipebox').attr('data-href'));
});
},
I even tried following the logic of setTitle, but that got me nowhere.
EDIT: Okay, now it has become; Who has got a better idea than putting it in the title attribute? Like so:
title="Image Name <a id="swipebox-download" href="path/to/image.jpg">Download</a>"
It does accomplish what I want, but it just seems dirty and wrong.
Well I got off my lazy ass and just figured it out the way I wanted it in the first place.
The big problem I had was wrapping my head around using data attributes.
After I got my head around it I pretty much monkeyed the code in using brutaldesign's already existing code for attributes. I even added an option to change the text of the download link in case it is used for something completely different.
Here is the beef of the code I added:
setDownload : function ( index ) {
var datahref = null;
$( '#swipebox-download' ).empty();
if ( elements[ index ] !== undefined ) {
datahref = elements[ index ].datahref;
}
if ( datahref ) {
$( '#swipebox-download' ).append( plugin.settings.downloadText );
$( '#swipebox-download' ).attr( "href", datahref );
} else {
$( '#swipebox-download' ).hide();
}
},
All the changes are documented here on Github.
Well, I guess, thank you for not answering my question.
I found it way more fulfilling figuring it out on my own than having it handed to me.
Oh, and the forked project page is here, if anyone would like to use it.
I'm creating a slideshow where I'm displaying images based on their urls. I've used PHP to extract the image urls from web pages and I've used JavaScript to display them in a slideshow format. Only thing is, the first picture takes a lot of time to load so I decided to cache the urls by storing them in a text file, but I don't know how to read the urls from the text file in my JavaScript bit?
Could anyone point me in the right direction as to how I should proceed. I couln't find anything helpful online.
My JS code is like this:
<script language="JavaScript1.1">
var slideimages=new Array()
slideshowimages("<?php echo join("\", \"", $image_urls); ?>") <--this is where I was initially echoing the array or image urls from php, but it proves slow for the first few images
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
var slideshowspeed1=30000
var whichimage1=0
function slideit1(){
if (!document.images)
return
document.images.slide1.src=slideimages[whichimage1].src
if (whichimage1<slideimages.length-1)
whichimage1++
else
whichimage1=0
setTimeout("slideit1()",slideshowspeed1)}slideit1()
</script>
Thanks!
Why are you pulling from an external website? You generally will get a lot more speed if you pull them locally. I do believe that once it pulls the images once or so, it will cache for users when it shows up again. What you could do is to use that list you pull and create the images hidden on the page so they load with the page. Then when going through the slideshow, the user should have had time to cache the images and the slideshow will have sped up.
Just make a CSS class known as hidden and visability:hidden;it. Most browsers will still try to load the data.
I have a small problem with my PHP code and It would be very nice if someone could help me. I want to display an image when hovering over a link. This is the link with the PHP code that I have now:
<?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?>
This code shows a image, but I want to execute this code when hovering over the link with the image:
<?php echo print_image_function(); ?>
The code also shows a image that belongs to a category. I don't want the initial image to disappear I simply want to show the second image on top off the first image when hovering over the first image.
I don't know if it is helpful but I use Wordpress and I am not a PHP expert. I even don't know if this is going to work. Thats why I am asking if somebody can help me with this.
Thanks in advance
THANKS EVERYONE
I want to thank everybody that took the time to read my post and helped me by giving their solution.
I didnt exspect so many answers in such a fast time. After spending a few hours trying it to get it to work with PHP, CSS and Javacript, I stumbled upon the following question on this website: Solution
It was exactly where I was looking for and with a few modifications to fit my needs, I got it to work. Sometimes things can be so easy while you are looking for the hard way. So for everyone that has the same problem: You can use one of the solutions that where given by the awesome people here or take a look at the link above.
Thanks again! :)
You can do this with CSS (if you so please and this fits with your overall architecture) - here is an example using the :hover condition and :after pseudo element.
html
<img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" />
css
.foo {
position: relative;
}
.foo:hover:after {
content: ' ';
background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
position: absolute;
top: 10px;
left: 10px;
height: 32px;
width: 32px;
}
http://jsfiddle.net/rlemon/3kWhf/ demo here
Edit:
Always when using new or experimental CSS features reference a compatibility chart http://caniuse.com/ to ensure you are still in your supported browsers. For example, :after is only supported starting IE8.
You cannot randomly execute server side code on the client side.
Try using javascript AJAX requests instead.
PHP is a server-side language; you can't get PHP to execute after the page has loaded (because PHP completely finishes parsing before the page loads). If you want hover events, you need JS.
Firstly you don't need the elseif statement. An else will serve the same purpose, unless you intend to have blank tags where neither a thumbnail or a video image are present.
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() )
{
the_post_thumbnail();
}
else
{
the_post_video_image();
}
?>
</a>
You can't explicitly use PHP for client side functionality. You will need to use javascript or jquery to supply the on hover capability.
Jquery example:
$(function() {
$('a').hover(function() {
// Code to execute whenever the <a> is hovered over
// Example: Whenever THIS <a> tag is hovered over, display
// the hidden image that has a class of .rollover
$(this + ' .rollover').fadeIn(300);
}, function() {
// Execute this code when the mouse exits the hover area
// Example (inline with above example)
$(this + ' .rollover').fadeOut(300);
});
});
To have an image placed on top of another image you would need to make sure your CSS uses absolute positioning for the images with the image that is to overlay the other on hover is given a z-index value higher than the image to sit underneath it.
Hope this helps.
You'll need some JavaScript and/or CSS to make this work, since PHP is on the server side, not in the client browser.
I have google custom search, by default the search box has got background image, I can remove that image, But not able to replace with my image. so Is there a way to do this.
Adding this to my CSS worked for me:
.cse input.gsc-input, input.gsc-input {background-image:none !important;}
Yes! You can do this!
Please find particular id or css for that and then use CSS according to that id or CSS and make sure you add !important at end it will works for you.
To remove the Google Custom search watermark you need to run a java-query infinite looped code it can't be done by adding a one time running code since every time you will click the search input field he code will rerun from the server side and the watermark will reappear.
the exact code you need to do is listed below but to achieve the desired result you must import Jquery liberary file from link jquery.com download/ and link it to your page
to link it to your page do so.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
the actual code to hide watermark is.
<script>
$(document).ready(function() {
setInterval( function()
{
$("#gsc-i-id1").css("background-image","none")
},1/*Time*/);
});
</script>
because the ID of the search box is " gsc-i-id1 " so the code will work even if you click and unclick the field.
Please adjust the time of the function to your preference for better performance better keep it less than 100 mile seconds
check the live performance of code by clicking the link below.
http://jsfiddle.net/atulc007/tHQAD/1/
You have to customize GCSE which is given in your code. To explain in detail, you have to select this url in your code - "http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en". Then paste and search this url in your browser. You will get the sorce code of that java script. In that find an image .gif link and replace with your image and save it as .js file and replace the link and upload. Hope you will enjoy :)