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.
Related
I spent half a day writing the content section of my index page of my website but when I tried adding another image to the list of images (There is currently 6) it was a very long and annoying process. (Website: http://rikahiyuka.com)
Is there a way to write the code so that it will be easier to add more buttons (The Images)?
Things that are linked per image listed:
- JQuery
- Div (Link)
The most annoying part is adding to the JQuery.
Is there a better way to write the code for the buttons/images in the content section so it is more compact and easier to edit?
Note: The only section of the index.php file that uses PHP is the footer for the year number.
Instead of doing each image individually, just write one function:
function showhide(shownum) {
$("#Ip1, #Ip2, #Ip3, #Ip4, #Ip5, #Ip6").hide();
$("#Il1, #Il2, #Il3, #Il4, #Il5, #Il6, #IDTopic").hide();
$("#Ip" + shownum + ", #IDTopic, #Il" + shownum).show();
}
Then, if you want to show something, you simply call this function:
showhide(6);
You can put it in your HTML (like so:)
<td>
<img id="Iimg1" class="c-img" src="#" title="Show 1" onclick="showhide(1) />
</td>
or edit your JavaScript:
$("#Iimg1").click(function(){
showhide(1);
});
Replacing 1 with whichever link you want to show. This will make it much quicker and much less annoying because you won't have to list out each element to show and hide. Just call the showhide function :) It basically works by, instead of worrying about hiding everything except the one clicked on, hiding ALL of the links. Then, showing the one requested.
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 read about Masonry and after failing to get image appending to work was advised to switch to the successor Isotope. I was trying to improve or create variations on an album cover gallery, something I've done once or twice before using the same PHP classes.
I can get the basic functionality to work, but a button to click to add more images has always failed to work. I keep reading jQuery documentation and I've tried various JavaScript debuggers but I always end up with no images being added to my gallery when I click.
Trial and error is definitely required to get the best looking layout.
The biggest album cover seems to be 500 pixels with the smallest found in APIs was 75, choosing the right column width helps. I'm currently using 75 but 50 might have worked better. I just want to get adding images to work and be done with this little experiment.
I wanted to try something similar to this technique of appending more images to the bottom. I want to append more album covers which I fetch from various APIs (Amazon Product API, Last.fm, iTunes) using PHP. All the album covers come from APIs and I use PHP to find the URLs given the album title and artist. My code is running: http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php
I've changed the CSS rule many times, now I just have the default CSS suggested by the Isotope author.
PHP Code that loops and produces 10 divs with one image per div
$myAlbumCollection->randomMember();
$count = 0;
print('<div id="container">');
while ( $count < 10 )
{
// Check that current album is in Amazon
$buyLink = $myAlbumCollection->currentAlbumAmazonProductURL();
$imageURL = $myAlbumCollection->currentAlbumRandomImageURL();
if ( (strcmp($buyLink, '#') != 0) && (strcmp($imageURL, myInfo::MISSING_COVER_URL) != 0))
{
$count++;
print('<div class="item">');
print('<a href="' . $buyLink . '">');
print('<img src="' . $imageURL . '" />');
print('</a>');
print('</div>');
}
$myAlbumCollection->goToNextAlbum(); // This could loop forever if it doesn't find enough album covers, but in reality will timeout
}
print('</div>');
And lastly here is the javascript, the final problem is in here somewhere:
<script>
$(function(){
var $container = $('#container');
$('#insert a').click(function(){
var $newEls = $.get('./moreAlbumCovers.php');
$container.isotope( 'insert', $newEls );
return false;
});
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
</script>
The link gets called when clicked, I've stepped through it. The PHP produces DIVs As and IMG tags. I really am not sure what I'm doing wrong and repeated readings of the documentation isn't solving it. I've never really been a JavaScript guy. I'm not even a PHP guy, it seems right but repeated efforts to make it go have failed despite generous assistance and offering a bounty.
Thanks for the help.
Try adjusting the columnWidh value and width of item. Masonry aligns element with best fit column first layout. It works on mathematical equations. So a perfect, brick wall fitting is only hypothetical ideal case. It takes me a few tries on firebug and other tools to get the masonry working with ideally fitted layout. The key is to get the value of columnWidth and width, gutter etc in such a way that it solves the logic equations in good values.
:: EDIT ::
I found a link saved in my pockets page, of which i totally forgot about. It is a great tutorial. So i came back to give it here. Recommended to everyone who have trouble getting started with this plugin.
http://www.netmagazine.com/tutorials/get-started-jquery-masonry
Masonry isn't a very descriptive name for it. In fact it's an optimizing problem. It's something that is called np problem because there is too many permutations to check. Especially the masonry jquery plugin is a 1d bin-packing solver and it's arrange the bricks in vertical columns. Css by default arrange the bricks in horizontal order. In other words it's a depth-first sort of an adjacent tree model.
Update: Try adding masonry to your dummy div and delete everthing else:
$('#dummy').load('./moreAlbumCovers.php').masonry("reload");
I think you overthink it. The variable is empty because you assign it to a dom object. It's most likely become also an object and not usefull.
It's relly well explained here Jquery Masonry Seamless Responsive Image Grid + I would try to do exactly the same with isotope http://isotope.metafizzy.co/
edit:
I think isoptope and masonry just sorting out 1 dimensional bin packing, and what you are maybe looking after is 2 dimensional bin packing
like this http://codeincomplete.com/posts/2011/5/7/bin_packing/example/ (check complex case it fits all boxes perfectly )
and lib for that https://github.com/jakesgordon/bin-packing/
To get the more brick wall like effect you don't set an item width using CSS. This wasn't crystal clear given the instructions here. But a lot of testing seems to indicate that just specifying a columnWidth and then letting the browser and javascript do it's best gets closer to the performance I'm looking for. Will have to tweak and eventually try appending...
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)">");
});
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 :)